RSSCSS

Hiệu ứng loading animation với CSS3

Khi CSS3 chưa ra đời thì việc tạo hiệu ứng cho trang web chủ yếu là dùng Flash hoặc jQuery. Việc dùng hai công nghệ đó khiến tốc độ website ảnh hưởng một phần. Và hôm nay, mình sẽ giúp các bạn tạo hiệu ứng chuyển động, chủ yếu nhờ đến hai thuộc tính Transition và Animation có trong CSS3.

CSS3 Animation

Trước khi vào phần hướng dẫn, chúng ta tham khảo vài thuộc tính của Animation và @keyframe. Thuộc tính animation xác định một chuyển động của một tag hay một hình ảnh.

animation: [name] [duration] [timing] [delay] [interaction-count] [direction] [play-state];
  • [animation-name]: Tên của animation, do chúng ta tự qui định.
  • [animation-duration]: Xác định thời gian để hoàn thành chuyển động, mặc định là 0s.
  • [animation-timing-function]: Mô tả animation sẽ diễn ra như thế nào trên chu kì của nó.
  • [animation-delay]: Xác định sau bao lâu thì chuyển động sẽ bắt đầu, mặc định sẽ là 0.
  • [animation-iteration-count]: Xác định số lần thực hiện chuyển động.
  • [animation-direction]: Animation sẽ diễn ra lần lượt từng chu kì hay ở chu kì tiếp theo sẽ đảo ngược lại với 2 giá trị: normal và alternate.
  • [animation-play-state]: Animation có diễn ra hay dừng.

Cấu trúc @keyframe

Thuộc tính @keyframes dùng để điều khiển diễn biến một hoạt động của thành phần, được dùng kèm với thuộc tính animation.

@keyframes Tên Anination {giá trị { css }}
  • [Tên Anination]: Xác định tên cho @keyframes. Tên này trùng với tên ở phần animation.
  • [giá trị]: Định dạng thành phần theo trí đầu và vị trí cuối.
  • [css]: Cần có một hay nhiều thuộc tính css.

Và bây giờ chúng ta bài tạo hiệu ứng loading animation

HTML5

<span class="step1"></span>
<span class="step2"></span>
<span class="step3"></span>
<span class="step4"></span>
<span class="step5"></span>
<span class="step6"></span>

CSS3

span {
    display: inline-block;
    background: #fff;
    width: 4px;
    height: 4px;
	margin: 12px 2px;
    -webkit-border-radius: 100%;
	-moz-border-radius: 100%;
	border-radius: 100%;
    
    -webkit-animation: loader 4s infinite;
    -webkit-animation-timing-function: cubic-bezier(0.030, 0.615, 0.995, 0.415);
    -webkit-animation-fill-mode: both;
    -moz-animation: loader 4s infinite;
    -moz-animation-timing-function: cubic-bezier(0.030, 0.615, 0.995, 0.415);
    -moz-animation-fill-mode: both;
    -ms-animation: loader 4s infinite;
    -ms-animation-timing-function: cubic-bezier(0.030, 0.615, 0.995, 0.415);
    -ms-animation-fill-mode: both;
    animation: loader 4s infinite;
    animation-timing-function: cubic-bezier(0.030, 0.615, 0.995, 0.415);
    animation-fill-mode: both;}

Tạo thời gian delay cho chuyển động.

.step1 {
	-webkit-animation-delay: 1s; 
	-moz-animation-delay: 1s; 
	-ms-animation-delay: 1s; 
	animation-delay: 1s;}
	
.step2 { 
	-webkit-animation-delay: 0.8s; 
	-moz-animation-delay: 0.8s; 
	-ms-animation-delay: 0.8s; 
	animation-delay: 0.8s;}
	
.step3 { 
	-webkit-animation-delay: 0.6s; 
	-moz-animation-delay: 0.6s; 
	-ms-animation-delay: 0.6s; 
	animation-delay: 0.6s;}
	
.step4 { 
	-webkit-animation-delay: 0.4s; 
	-moz-animation-delay: 0.4s; 
	-ms-animation-delay: 0.4s; 
	animation-delay: 0.4s;}
	
.step5 { 
	-webkit-animation-delay: 0.2s; 
	-moz-animation-delay: 0.2s; 
	-ms-animation-delay: 0.2s; 
	animation-delay: 0.2s;}
	
.step6 { 
	-webkit-animation-delay: 0s; 
	-moz-animation-delay: 0s; 
	-ms-animation-delay: 0s; 
	animation-delay: 0s;}

Và cuối cùng là @keyframes.

@-webkit-keyframes loader {
    0% { -webkit-transform: translateX(-30px); opacity: 0; }
    25% { opacity: 1; }
    50% { -webkit-transform: translateX(30px); opacity: 0; }
    100% { opacity: 0; }
}
@-moz-keyframes loader {
    0% { -moz-transform: translateX(-30px); opacity: 0; }
    25% { opacity: 1; }
    50% { -moz-transform: translateX(30px); opacity: 0; }
    100% { opacity: 0; }
}
@-ms-keyframes loader {
    0% { -ms-transform: translateX(-30px); opacity: 0; }
    25% { opacity: 1; }
    50% { -ms-transform: translateX(30px); opacity: 0; }
    100% { opacity: 0; }
}
@keyframes loader {
    0% { transform: translateX(-30px); opacity: 0; }
    25% { opacity: 1; }
    50% { transform: translateX(30px); opacity: 0; }
    100% { opacity: 0; }
}
Nguồn: Code Theory

 

Tags:

Nếu bạn thấy bài viết hữu ích, hãy nhấn +1 và các liên kết chia sẻ để website ngày càng phát triển hơn. Xin cám ơn bạn!

Nếu là khách, bạn phải đăng ký tài khoản và kích hoạt tài khoản để bình luận được hiển thị ở đây.
Thông tin kích hoạt gửi đến mail của bạn.

Tin mới hơn

Tin cũ hơn

Lên trên đầu