Hoạt ảnh CSS
Hoạt ảnh CSS
CSS cho phép tạo hoạt ảnh cho các phần tử HTML mà không cần sử dụng JavaScript hoặc Flash!
Trong chương này, bạn sẽ tìm hiểu về các thuộc tính sau:
@keyframesanimation-nameanimation-durationanimation-delayanimation-iteration-countanimation-directionanimation-timing-functionanimation-fill-modeanimation
Hỗ trợ trình duyệt cho hoạt ảnh
Các số trong bảng chỉ định phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ thuộc tính.
| Property | |||||
|---|---|---|---|---|---|
| @keyframes | 43.0 | 10.0 | 16.0 | 9.0 | 30.0 |
| animation-name | 43.0 | 10.0 | 16.0 | 9.0 | 30.0 |
| animation-duration | 43.0 | 10.0 | 16.0 | 9.0 | 30.0 |
| animation-delay | 43.0 | 10.0 | 16.0 | 9.0 | 30.0 |
| animation-iteration-count | 43.0 | 10.0 | 16.0 | 9.0 | 30.0 |
| animation-direction | 43.0 | 10.0 | 16.0 | 9.0 | 30.0 |
| animation-timing-function | 43.0 | 10.0 | 16.0 | 9.0 | 30.0 |
| animation-fill-mode | 43.0 | 10.0 | 16.0 | 9.0 | 30.0 |
| animation | 43.0 | 10.0 | 16.0 | 9.0 | 30.0 |
CSS Animations là gì?
Hoạt ảnh cho phép một phần tử dần dần thay đổi từ kiểu này sang kiểu khác.
Bạn có thể thay đổi bao nhiêu thuộc tính CSS mà bạn muốn, bao nhiêu lần tùy ý.
Để sử dụng hoạt ảnh CSS, trước tiên bạn phải chỉ định một số khung hình chính cho hoạt ảnh.
Các khung hình chính giữ kiểu dáng mà phần tử sẽ có tại một số thời điểm nhất định.
Quy tắc @keyframes
Khi bạn chỉ định kiểu CSS bên trong @keyframes
quy tắc, hoạt ảnh sẽ dần dần thay đổi từ kiểu hiện tại sang kiểu mới tại một số thời điểm nhất định.
Để hoạt ảnh hoạt động, bạn phải liên kết hoạt ảnh với một phần tử.
Ví dụ sau liên kết hoạt ảnh "ví dụ" với phần tử <div>. Hoạt ảnh sẽ kéo dài trong 4 giây và nó sẽ dần dần thay đổi màu nền của phần tử <div> từ "đỏ" thành "vàng":
Thí dụ
/* The animation code */
@keyframes example {
from {background-color: red;}
to {background-color: yellow;}
}
/* The element to apply the animation to */
div {
width: 100px;
height: 100px;
background-color: red;
animation-name: example;
animation-duration: 4s;
}
Lưu ý: Thuộc animation-durationtính xác định thời gian hoàn thành một hoạt ảnh. Nếu thuộc animation-durationtính không được chỉ định, sẽ không có hoạt ảnh nào xảy ra, vì giá trị mặc định là 0s (0 giây).
Trong ví dụ trên, chúng tôi đã chỉ định khi nào kiểu sẽ thay đổi bằng cách sử dụng các từ khóa "from" và "to" (đại diện cho 0% (bắt đầu) và 100% (hoàn thành)).
Nó cũng có thể sử dụng phần trăm. Bằng cách sử dụng phần trăm, bạn có thể thêm bao nhiêu thay đổi kiểu tùy thích.
Ví dụ sau sẽ thay đổi màu nền của phần tử <div> khi hoạt ảnh hoàn thành 25%, hoàn thành 50% và một lần nữa khi hoạt ảnh hoàn thành 100%:
Thí dụ
/* The animation code */
@keyframes example
{
0% {background-color: red;}
25% {background-color: yellow;}
50% {background-color: blue;}
100% {background-color: green;}
}
/* The element to apply the animation to */
div {
width: 100px;
height: 100px;
background-color: red;
animation-name: example;
animation-duration: 4s;
}
Ví dụ sau sẽ thay đổi cả màu nền và vị trí của phần tử <div> khi hoạt ảnh hoàn thành 25%, hoàn thành 50% và một lần nữa khi hoạt ảnh hoàn thành 100%:
Thí dụ
/* The animation code */
@keyframes example
{
0% {background-color:red; left:0px; top:0px;}
25% {background-color:yellow; left:200px; top:0px;}
50% {background-color:blue; left:200px; top:200px;}
75% {background-color:green; left:0px; top:200px;}
100% {background-color:red; left:0px; top:0px;}
}
/* The element to apply the animation to */
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
}
Trì hoãn hoạt ảnh
Thuộc animation-delaytính chỉ định độ trễ để bắt đầu hoạt ảnh.
Ví dụ sau có độ trễ 2 giây trước khi bắt đầu hoạt ảnh:
Thí dụ
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-delay: 2s;
}
Giá trị âm cũng được phép. Nếu sử dụng các giá trị âm, hoạt ảnh sẽ bắt đầu như thể nó đã được phát trong N giây.
Trong ví dụ sau, hoạt ảnh sẽ bắt đầu như thể nó đã phát được 2 giây:
Thí dụ
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-delay: -2s;
}
Đặt số lần một hoạt ảnh sẽ chạy
Thuộc animation-iteration-counttính chỉ định số lần hoạt ảnh sẽ chạy.
Ví dụ sau sẽ chạy hoạt ảnh 3 lần trước khi nó dừng lại:
Thí dụ
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-iteration-count: 3;
}
Ví dụ sau sử dụng giá trị "vô hạn" để làm cho hoạt ảnh tiếp tục mãi mãi:
Thí dụ
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-iteration-count:
infinite;
}
Chạy hoạt ảnh theo hướng ngược lại hoặc chu kỳ thay thế
Thuộc animation-directiontính chỉ định xem một hoạt ảnh nên được phát tới, lùi hoặc theo các chu kỳ thay thế.
Thuộc tính hướng hoạt ảnh có thể có các giá trị sau:
normal- Hoạt ảnh được phát như bình thường (chuyển tiếp). Đây là mặc địnhreverse- Hoạt ảnh được phát theo hướng ngược lại (ngược)alternate- Hoạt ảnh được phát về phía trước, sau đó được phát ngược lạialternate-reverse- Hoạt ảnh được phát ngược trước, sau đó chuyển tiếp
Ví dụ sau sẽ chạy hoạt ảnh theo hướng ngược lại (ngược):
Thí dụ
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-direction:
reverse;
}
Ví dụ sau sử dụng giá trị "thay thế" để làm cho hoạt ảnh chạy về phía trước, sau đó chạy ngược lại:
Thí dụ
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-iteration-count: 2;
animation-direction:
alternate;
}
Ví dụ sau sử dụng giá trị "thay thế-đảo ngược" để làm cho hoạt ảnh chạy ngược trước, sau đó chuyển tiếp:
Thí dụ
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-iteration-count: 2;
animation-direction:
alternate-reverse;
}
Chỉ định Đường cong tốc độ của Hoạt ảnh
Thuộc animation-timing-functiontính chỉ định đường cong tốc độ của hoạt ảnh.
Thuộc tính chức năng định thời gian hoạt ảnh có thể có các giá trị sau:
ease- Chỉ định một hoạt ảnh có bắt đầu chậm, sau đó nhanh, sau đó kết thúc chậm (đây là mặc định)linear- Chỉ định một hoạt ảnh có cùng tốc độ từ đầu đến cuốiease-in- Chỉ định một hoạt ảnh có khởi động chậmease-out- Chỉ định một hoạt ảnh có kết thúc chậmease-in-out- Chỉ định một hoạt ảnh có bắt đầu và kết thúc chậmcubic-bezier(n,n,n,n)- Cho phép bạn xác định các giá trị của riêng mình trong một hàm bậc ba
Ví dụ sau đây cho thấy một số đường cong tốc độ khác nhau có thể được sử dụng:
Thí dụ
#div1 {animation-timing-function: linear;}
#div2
{animation-timing-function: ease;}
#div3 {animation-timing-function:
ease-in;}
#div4 {animation-timing-function: ease-out;}
#div5
{animation-timing-function: ease-in-out;}
Chỉ định chế độ tô màu cho hoạt ảnh
Hoạt ảnh CSS không ảnh hưởng đến một phần tử trước khi khung hình chính đầu tiên được phát hoặc sau khi khung hình chính cuối cùng được phát. Thuộc tính animation-fill-mode có thể ghi đè hành vi này.
Thuộc animation-fill-modetính chỉ định kiểu cho phần tử đích khi hoạt ảnh không phát (trước khi bắt đầu, sau khi kết thúc hoặc cả hai).
Thuộc tính animation-fill-mode có thể có các giá trị sau:
none- Giá trị mặc định. Hoạt ảnh sẽ không áp dụng bất kỳ kiểu nào cho phần tử trước hoặc sau khi phần tử đang thực thiforwards- Phần tử sẽ giữ lại các giá trị kiểu được đặt bởi khung hình chính cuối cùng (phụ thuộc vào hướng hoạt ảnh và số lần lặp lại hoạt ảnh)backwards- Phần tử sẽ nhận các giá trị kiểu được đặt bởi khung hình chính đầu tiên (phụ thuộc vào hướng hoạt ảnh) và giữ lại giá trị này trong khoảng thời gian trễ hoạt ảnhboth- Hoạt ảnh sẽ tuân theo các quy tắc cho cả tiến và lùi, mở rộng các thuộc tính hoạt ảnh theo cả hai hướng
Ví dụ sau cho phép phần tử <div> giữ lại các giá trị kiểu từ khung hình chính cuối cùng khi hoạt ảnh kết thúc:
Thí dụ
div {
width: 100px;
height: 100px;
background: red;
position: relative;
animation-name: example;
animation-duration: 3s;
animation-fill-mode: forwards;
}
Ví dụ sau cho phép phần tử <div> nhận các giá trị kiểu được đặt bởi khung hình chính đầu tiên trước khi hoạt ảnh bắt đầu (trong khoảng thời gian trễ hoạt ảnh):
Thí dụ
div {
width: 100px;
height: 100px;
background: red;
position: relative;
animation-name: example;
animation-duration: 3s;
animation-delay: 2s;
animation-fill-mode: backwards;
}
Ví dụ sau cho phép phần tử <div> nhận các giá trị kiểu được đặt bởi khung hình chính đầu tiên trước khi hoạt ảnh bắt đầu và giữ lại các giá trị kiểu từ khung hình chính cuối cùng khi hoạt ảnh kết thúc:
Thí dụ
div {
width: 100px;
height: 100px;
background: red;
position: relative;
animation-name: example;
animation-duration: 3s;
animation-delay: 2s;
animation-fill-mode: both;
}
Thuộc tính tốc ký hoạt hình
Ví dụ dưới đây sử dụng sáu thuộc tính hoạt ảnh:
Thí dụ
div
{
animation-name: example;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
}
Hiệu ứng hoạt ảnh tương tự như trên có thể đạt được bằng cách sử dụng thuộc tính tốc ký
animation:
Thí dụ
div
{
animation: example 5s linear 2s infinite alternate;
}
Thuộc tính hoạt ảnh CSS
Bảng sau liệt kê quy tắc @keyframes và tất cả các thuộc tính hoạt ảnh CSS:
| Property | Description |
|---|---|
| @keyframes | Specifies the animation code |
| animation | A shorthand property for setting all the animation properties |
| animation-delay | Specifies a delay for the start of an animation |
| animation-direction | Specifies whether an animation should be played forwards, backwards or in alternate cycles |
| animation-duration | Specifies how long time an animation should take to complete one cycle |
| animation-fill-mode | Specifies a style for the element when the animation is not playing (before it starts, after it ends, or both) |
| animation-iteration-count | Specifies the number of times an animation should be played |
| animation-name | Specifies the name of the @keyframes animation |
| animation-play-state | Specifies whether the animation is running or paused |
| animation-timing-function | Specifies the speed curve of the animation |