Hiệu ứng loading animation với CSS3

Trong thiết kế website 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; }
}

 

Với hiệu ứng trên bạn có thể nâng cấp website từ sử dụng javascrip thành css làm tăng tốc độ website của mình hơn.

Nguồn: Code Theory