- Trang chủ
- Tham khảo
- CSS
- CSS3
- Thuộc tính @keyframes
Định nghĩa và sử dụng
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.
Cấu trúc
@keyframes tênAnimation { giá trị { css } } @-moz-keyframes tênAnimation { giá trị { css } } @-webkit-keyframes tênAnimation { giá trị { css } }
Trong đó:
- @-moz-keyframes hỗ trợ cho firefox.
- @-webkit-keyframes hỗ trợ cho Google Chrome và Safari.
@keyframes có các giá trị như sau:
@keyframes | Tên animation | @keyframes aniName{} | Xác định tên cho @keyframes. |
from {thuộc tính: giá trị;} to {thuộc tính: giá trị;} | from {top: 0;} to {bottom: 100px; color: red;} | Định dạng thành phần theo trí đầu và vị trí cuối. | |
Phần trăm {thuộc tính: giá trị;} | 0% {top: 0;} 50% {top: 150px;} 100% {top: 50px;} | Định dạng thành phần theo phần trăm thời gian hành động diễn ra. |
HTML viết:
HỌC WEB CHUẨN
Hiển thị trình duyệt khi chưa có CSS:
CSS viết:
p { position: relative; width: 130px; animation: aniName 10s infinite; -moz-animation: aniName 10s infinite; -webkit-animation: aniName 10s infinite; -o-animation: aniName 10s infinite; } @keyframes aniName { 0% { left: 0px; } 50% { left: 80%; color: #cc0000; background: #cccccc; } 100% { left: 0px; } } @-moz-keyframes aniName { 0% { left: 0px; } 50% { left: 80%; color: #cc0000; background: #cccccc; } 100% { left: 0px; } } @-webkit-keyframes aniName { 0% { left: 0px; } 50% { left: 80%; color: #cc0000; background: #cccccc; } 100% { left: 0px; } } @-o-keyframes aniName { 0% { left: 0px; } 50% { left: 80%; color: #cc0000; background: #cccccc; } 100% { left: 0px; } }
Hiển thị trình duyệt khi có CSS:
- Trang chủ
- Hướng dẫn học
- Hướng dẫn học CSS3
- Animation và @keyframes
Animation và @keyframes
Animation
và @keyframes
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 animation
và @keyframes
khá nhiều để tạo hiệu ứng thêm cho trang web, đặc biệt những trang Landing page.
Cấu trúc
Cần phải có đầy đủ cả 2 thuộc tính animation
và @keyframes
.
Cấu trúc animation
cơ bản
tag { animation: [animation-name] [duration]; } @keyframes animation-name { }
Cấu trúc animation
tổng quát
tag { animation: [animation-name] [duration] [timing] [delay] [interaction-count] [direction]; } @keyframes animation-name { }
@keyframes
có 2 cấu trúc như sau [tùy vào mục đích sử dụng]:
@keyframes animation-name {
from { }
to { }
}
@keyframes animation-name {
0% { }
10% { }
40% { }
...
100% { }
}
Các giá trị của animation
:
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 @keyframes .
|
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 | Xác định loại hiệu ứng chuyển động. |
delay | Thời gian | 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 | 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. | |
direction | normal alternate | alternate | Cho biết chuyển động có đảo ngược ở chu kỳ tiếp theo hay không, mặc định là normal. |
Cách sử dụng
HTML viết:
Animation
CSS viết - khi chưa sử dụng animation:
p { background-color: #476CFF; text-align: center; width: 100px; }
Hiển thị trình duyệt:
Tạo một vài chuyển động đơn giản, để các bạn hình dung được rõ về animation
:
CSS viết:
p { background-color: #476CFF; text-align: center; width: 100px; animation: moveRight 5s infinite; } @keyframes moveRight { from { width: 100px; } to { width: 300px; } }
Hiển thị trình duyệt:
Ví dụ trên, ta cho thuộc tính animation có 3 giá trị:
- [animation-name]: tên này cần phải trùng với @keyframes.
- [duration]: một chu kỳ chuyển động trong 5s.
- [interaction-count]: cho chuyển động lặp vô hạn.
Ví dụ thêm về animation
và @keyframes
Animation
Animation lặp lại và đổi chiều
p {
background-color: #476CFF;
text-align: center;
width: 100px;
animation: moveRight 5s infinite alternate;
}
@keyframes moveRight {
from { width: 100px; }
to { width: 300px; }
}
Animation theo vị trí
p { background-color: #476CFF; text-align: center; width: 100px; position: relative; animation: moveRight 5s infinite alternate; } @keyframes moveRight { from { left: 0; } to { left: 100px; } }
Animation với transform
p { background-color: #476CFF; text-align: center; width: 100px; position: relative; animation: moveRight 5s infinite alternate; } @keyframes moveRight { from { left: 0; transform: rotate[0deg]; } to { left: 200px; transform: rotate[360deg]; } }
Animation kết hợp nhiều giá trị
p {
background-color: #476CFF;
text-align: center;
width: 100px;
position: relative;
animation: moveRight 5s infinite alternate;
}
@keyframes moveRight {
from {
background-color: #73BEFF;
height: 30px;
line-height: 30px;
left: 0;
}
to {
background-color: #FFFF00;
height: 100px;
line-height: 100px;
left: 200px;
}
}
Animation và @keyframes theo phần trăm
p {
background-color: #476CFF;
text-align: center;
width: 100px;
position: relative;
animation: moveRight 5s infinite alternate;
}
@keyframes moveRight {
0% {
background-color: #73BEFF;
left: 0;
top: 0;
}
30% {
background-color: #FFFF00;
left: 150px;
top: 40px;
transform: rotate[0deg];
}
60% {
background-color: #FF0000;
left: 300px;
top: 0;
transform: rotate[-180deg];
}
100% {
background-color: #BC70FF;
left: 400px;
top: 60px;
transform: rotate[180deg];
}
}
Ngoài các ví dụ trên, animation
còn có nhiều thuộc tính riêng cho từng giá trị, các bạn có thể xem thêm tại tham khảo animation.