Hướng dẫn keyframe css animation - hoạt ảnh css khung hình chính
Animation và @keyframestag {
animation: [animation-name] [duration] [timing] [delay] [interaction-count] [direction];
}
@keyframes animation-name {
}3 và tag {
animation: [animation-name] [duration] [timing] [delay] [interaction-count] [direction];
}
@keyframes animation-name {
}4 là một bộ thuộc tính đi chung với nhau dùng để tạo hiệu ứng chuyển động, 2 thuộc tính này được kỳ vọng giảm tải lượng lớn source code Javascript.Phần lớn trang web gần đây sử dụng tag {
animation: [animation-name] [duration] [timing] [delay] [interaction-count] [direction];
}
@keyframes animation-name {
}5 và tag {
animation: [animation-name] [duration] [timing] [delay] [interaction-count] [direction];
}
@keyframes animation-name {
}4 khá nhiều để tạo hiệu ứng thêm cho trang web, đặc biệt những trang Landing page.Cấu trúcCần phải có đầy đủ cả 2 thuộc tính tag {
animation: [animation-name] [duration] [timing] [delay] [interaction-count] [direction];
}
@keyframes animation-name {
}5 và tag {
animation: [animation-name] [duration] [timing] [delay] [interaction-count] [direction];
}
@keyframes animation-name {
}4.Cấu trúc |
| Giá trị | Đơn vị | VD | Mô tả |
|---|---|---|---|
| animation-name | Tên bất kỳ, không khoảng cách. | boxAnimation | Xác định tên cho một animation, bắt buộc trùng với tên khai báo tại tag {
animation: [animation-name] [duration] [timing] [delay] [interaction-count] [direction];
}
@keyframes animation-name {
}4. |
| duration | Thời gian | 5s | Thời gian để hoàn thành một chuyển động, mặc định là 0s. |
| timing | linear ease ease-in ease-out ease-in-out cubic-bezier(n,n,n,n) ease ease-in ease-out ease-in-out cubic-bezier(n,n,n,n) | ease | Xác định loại hiệu ứng chuyển động. |
| delay | Thời gian | 5s | Thời gian để hoàn thành một chuyển động, mặc định là 0s. |
| timing | linear ease ease-in ease-out ease-in-out cubic-bezier(n,n,n,n) infinite | ease Giá trị infinite là lập vô hạn. | |
| Xác định loại hiệu ứng chuyển động. | delay alternate | 2s | Cho biết sau bao lâu thì chuyển động sẽ bắt đầu, mặc định sẽ là 0. |
interaction-count
Số tự nhiên infinite
Animation
Số lần thực hiện chuyển động, mặc định 1 lần. Giá trị infinite là lập vô hạn.
p {
background-color: #476CFF;
text-align: center;
width: 100px;
}direction
normal alternate
alternate
p {
background-color: #476CFF;
text-align: center;
width: 100px;
animation: moveRight 5s infinite;
}
@keyframes moveRight {
from { width: 100px; }
to { width: 300px; }
}direction
normal alternate
- alternate : tên này cần phải trùng với @keyframes.
- Cho biết chuyển động có đảo ngược ở chu kỳ tiếp theo hay không, mặc định là normal. : một chu kỳ chuyển động trong 5s.
- Cách sử dụng: cho chuyển động lặp vô hạn.
HTML viết:
Animation
CSS viết - khi chưa sử dụng animation:
p {
background-color: #476CFF;
text-align: center;
width: 100px;
animation: moveRight 5s infinite alternate;
}
@keyframes moveRight {
from { width: 100px; }
to { width: 300px; }
}Hiển thị trình duyệt:
p {
background-color: #476CFF;
text-align: center;
width: 100px;
position: relative;
animation: moveRight 5s infinite alternate;
}
@keyframes moveRight {
from { left: 0; }
to { left: 100px; }
}Tạo một vài chuyển động đơn giản, để các bạn hình dung được rõ về tag {
animation: [animation-name] [duration] [timing] [delay] [interaction-count] [direction];
}
@keyframes animation-name {
}5:
tag {
animation: [animation-name] [duration] [timing] [delay] [interaction-count] [direction];
}
@keyframes animation-name {
}0CSS viết:
tag {
animation: [animation-name] [duration] [timing] [delay] [interaction-count] [direction];
}
@keyframes animation-name {
}1Ví dụ trên, ta cho thuộc tính animation có 3 giá trị:
tag {
animation: [animation-name] [duration] [timing] [delay] [interaction-count] [direction];
}
@keyframes animation-name {
}2[animation-name]: tên này cần phải trùng với @keyframes.
