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