CSS animation là công nghệ được giới thiệu trong phiên bản CSS3. Nó cho phép chúng ta tạo hiệu ứng chuyển động mà không phải sử dụng Javascript hay Flash. Trong bài học này bạn sẽ tìm hiểu cách tạo chuyển động thẳng và quay vòng đồng thời cho một thẻ div nhờ sử dụng HTML5 và CSS3.
Một số thuộc tính

1. @keyframes: dùng để thiết lập một chuyển động.
Cú Pháp @keyframes Name { /code/ }
Trong đó

• Name: là tên của chuyển động.
  
• Code: là các đoạn code cho tiến trình chuyển động.
  

2. animation-name tác dụng xác định thành phần sẽ thực thi animation nào.
Cú Pháp
animation-name: name;
Trong đó : Name chính là tên của thuộc tính @keyframes
.element {
width: 50px;
height: 50px;
background-color: #009966;
position: relative;
margin: 0 auto;
animation-name: bounce;
animation-duration: 2s, 2s;
animation-iteration-count: infinite, infinite;
}
@-webkit-keyframes bounce {
from {
top: 150px;
animation-timing-function: ease-out;
}
25% {
top: 50px;
animation-timing-function: ease-in;
}
50% {
top: 200px;
animation-timing-function: ease-out;
}
75% {
top: 75px;
animation-timing-function: ease-in;
}
to {
top: 150px;
}
}

3. animation-duration :thiết lập khoảng thời gian thực thị 1 chuyển động animation
Cú Pháp

animation-duration: <time>#

Trong đó: time là có thể tính bằng s hoặc ms.

.element {
width: 50px;
height: 50px;
left: 0;
background-color: #009966;
position: relative;
transform-origin: left center;
}
.container:hover .element {
animation-name: wobble;
}
.element-1 {
background-color: #009966;
animation-duration: 2s;
}
@keyframes wobble {
0% {
left: 0px;
}
10% {
left: 50px;
}
20% {
left: 25px;
}
30% {
left: 100px;
}
40% {
left: 50px;
}
50% {
left: 200px;
}
60% {
left: 100px;
}
70% {
left: 250px;
}
80% {
left: 200px;
}
90% {
left: 300px;
}
100% {
left: 0px;
}
}


4. animation-timing-function : xác định tốc độ chuyển động của một animation sẽ như thế nào.
Cú Pháp:

animation-timing-function: value;

5. animation-delay : xác định độ trễ của mỗi lượt chuyển động.
Cú Pháp

animation-delay: value;

6. animation-iteration-count: thiết lập số lần thực hiện một animation.
Cú Pháp

animation-iteration-count: value;

7.animation-direction : xác định xem chiều chạy của animation sẽ như thế nào.
Cú Pháp

aniamtion-direction: value;

8. animation-fill-mode: xác định trạng thái của một animation, khi mà animation không được chạy (có thể là animation này đã chạy xong hoặc đang bị delay).
Cú Pháp

animation-fill-mode: value;

9. animation-play-state: xác định trạng thái của animation.
animation-platy-state: value;

Trong thiết kế giao diện website hiện đại Animation rất hữu ích và được sử dụng rộng rãi . Mong rằng bài viết có thể giúp được các bạn hiểu về Animation trong qua trình tìm hiểu. Xin cảm ơn đã đọc bài viết .



CÔNG TY TNHH TƯ VẤN TRUYỀN THÔNG MINARA
ĐỊA CHỈ:
- 182 Trần Bình Trọng, P.3, Q.5, Tp.HCM
- 27 Đường số 16, Trung Tâm Hành Chính Dĩ An, Bình Dương.
Điện thoại: 097.777.1060
Email: info@minara.vn
Website: www.minara.vn