Hoạt ảnh CSS
Hoạt ảnh CSS
CSS cho phép hoạt hình các phần tử HTML mà không cần sử dụng JavaScript!
Trong chương này bạn sẽ tìm hiểu về các thuộc tính sau:
-
@keyframes -
animation-name -
animation-duration -
animation-delay -
animation-iteration-count -
animation-direction -
animation-timing-function -
animation-fill-mode -
animation
Hỗ trợ trình duyệt cho ảnh động
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 |
Hoạt ảnh CSS 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 tùy thích.
Để 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.
Khung hình chính chứa 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 quy tắc @keyframes , hoạt ảnh sẽ dần thay đổi từ kiểu hiện tại sang kiểu mới vào những 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 "example" với phần tử <div>. Hoạt ảnh sẽ kéo dài trong 4 giây và nó sẽ dần thay đổi màu nền của phần tử <div> từ "đỏ" sang "vàng":
Ví 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;
}
Hãy tự mình thử » Lưu ý: Thuộc tính animation-duration xác định thời gian hoàn thành một hoạt ảnh. Nếu thuộc tính animation-duration không được chỉ định thì 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 thời điểm kiểu sẽ thay đổi bằng cách sử dụng từ khóa "từ" và "đến" (đại diện cho 0% (bắt đầu) và 100% (hoàn thành)).
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 về 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%:
Ví 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;
} Hãy tự mình thử »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%:
Ví 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;
} Hãy tự mình thử » Trì hoãn hoạt ảnh
Thuộc tính animation-delay chỉ định độ trễ khi bắt đầu hoạt ảnh.
Ví dụ sau có độ trễ 2 giây trước khi bắt đầu hoạt ảnh:
Ví dụ
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-delay: 2s;
} Hãy tự mình thử »Giá trị âm cũng được cho phép. Nếu sử dụng giá trị âm, hoạt ảnh sẽ bắt đầu như thể nó đã phát được N giây.
Trong ví dụ sau, hoạt ảnh sẽ bắt đầu như thể nó đã phát được 2 giây:
Ví dụ
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-delay: -2s;
} Hãy tự mình thử »Đặt số lần hoạt ảnh sẽ chạy
Thuộc tính animation-iteration-count 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 dừng:
Ví dụ
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-iteration-count: 3;
} Hãy tự mình thử »Ví dụ sau sử dụng giá trị "vô hạn" để làm cho hoạt ảnh tiếp tục diễn ra mãi mãi:
Ví dụ
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-iteration-count:
infinite;
} Hãy tự mình thử »Chạy hoạt ảnh theo hướng ngược lại hoặc theo chu kỳ thay thế
Thuộc tính animation-direction chỉ định liệu một hoạt ảnh sẽ được phát tiến, lùi hay theo chu kỳ luân phiên.
Thuộc tính animation-direction 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 định -
reverse- Hoạt ảnh được phát theo hướng ngược lại (ngược) -
alternate- Hoạt ảnh được phát tiến trước, sau đó phát lùi -
alternate-reverse- Hoạt ảnh được phát ngược trước, sau đó chuyển tiếp
Ví dụ sau sẽ chạy ảnh động theo hướng ngược lại (ngược):
Ví dụ
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-direction:
reverse;
} Hãy tự mình thử »Ví dụ sau sử dụng giá trị "thay thế" để làm cho hoạt ảnh chạy tiến trước, sau đó chạy lùi:
Ví dụ
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-iteration-count: 2;
animation-direction:
alternate;
} Hãy tự mình thử »Ví dụ sau sử dụng giá trị "alternate-reverse" để làm cho hoạt ảnh chạy lùi trước, sau đó chạy tiếp:
Ví 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;
} Hãy tự mình thử »Chỉ định đường cong tốc độ của hoạt ảnh
Thuộc tính animation-timing-function chỉ định đường cong tốc độ của hoạt ảnh.
Thuộc tính animation-timing-function có thể có các giá trị sau:
-
ease- Chỉ định hoạt ảnh có khởi đầu chậm, sau đó nhanh, rồi kết thúc chậm (đây là mặc định) -
linear- Chỉ định hoạt ảnh có cùng tốc độ từ đầu đến cuối -
ease-in- Chỉ định hoạt ảnh có khởi đầu chậm -
ease-out- Chỉ định hoạt ảnh có kết thúc chậm -
ease-in-out- Chỉ định hoạt ảnh có khởi đầu và kết thúc chậm -
cubic-bezier(n,n,n,n)- Cho phép bạn xác định các giá trị của riêng mình trong hàm cub-bezier
Ví dụ sau đây cho thấy một số đường cong tốc độ khác nhau có thể được sử dụng:
Ví 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;} Hãy tự mình thử »Chỉ định chế độ điền 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 tính animation-fill-mode chỉ định kiểu cho phần tử đích khi hoạt ảnh không phát (trước khi hoạt ảnh bắt đầu, sau khi hoạt ảnh 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 nó thực thi -
forwards- 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 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 ảnh -
both- 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:
Ví dụ
div {
width: 100px;
height: 100px;
background: red;
position: relative;
animation-name: example;
animation-duration: 3s;
animation-fill-mode: forwards;
} Hãy tự mình thử »Ví dụ sau cho phép phần tử <div> nhận các giá trị kiểu do khung hình chính đầu tiên đặt trước khi hoạt ảnh bắt đầu (trong khoảng thời gian trễ hoạt ảnh):
Ví dụ
div {
width: 100px;
height: 100px;
background: red;
position: relative;
animation-name: example;
animation-duration: 3s;
animation-delay: 2s;
animation-fill-mode: backwards;
} Hãy tự mình thử »Ví dụ sau cho phép phần tử <div> nhận các giá trị kiểu do khung hình chính đầu tiên đặt 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:
Ví dụ
div {
width: 100px;
height: 100px;
background: red;
position: relative;
animation-name: example;
animation-duration: 3s;
animation-delay: 2s;
animation-fill-mode: both;
} Hãy tự mình thử »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:
Ví dụ
div
{
animation-name: example;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
}
Hãy tự mình thử » Hiệu ứng hoạt hình tương tự như trên có thể đạt được bằng cách sử dụng thuộc tính animation tốc ký:
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 |
