animation-duration
xác định khoảng thời gian bao lâu một hình ảnh động cần thực hiện để hoàn thành. Nếu thuộc tính animation-duration
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).Đăng nhập
Bạn chưa có tài khoản? Đăng ký.
Bạn đã quên password?
CSS cho phép chúng ta tạo hoạt ảnh cho các phần tử HTML mà không cần phải sử dụng JavaScript hoặc Flash!
Trong bài đọc này, chúng ta 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
Các số trong bảng bên dưới chỉ định phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ cho 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 |
Thuộc tính CSS animation
cho phép một phần tử dần dần thay đổi từ kiểu này sang kiểu khác. Chúng ta có thể thay đổi bao nhiêu thuộc tính CSS và thay đổi bao nhiêu lần tùy ý.
Để sử dụng hoạt ảnh CSS, trước tiên chúng ta phải chỉ định một số khung hình chính cho hoạt ảnh. Các khung hình chính sẽ giữ kiểu dáng mà phần tử sẽ có tại một số thời điểm nhất định.
Khi chúng ta chỉ định kiểu CSS bên trong quy tắt @keyframes
, hoạt ảnh sẽ 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, chúng ta phải liên kết hoạt ảnh với một phần tử HTML.
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 dần thay đổi màu nền của phần tử <div> từ "red" thành "yellow".
Ví dụ
/* Code animation */ @keyframes example { from {background-color: red;} to {background-color: yellow;} } /* Phần tử áp dụng hiệu ứng animation */ div { width: 100px; height: 100px; background-color: red; animation-name: example; animation-duration: 5s; }
animation-duration
xác định khoảng thời gian bao lâu một hình ảnh động cần thực hiện để hoàn thành. Nếu thuộc tính animation-duration
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 ta đã 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 giá trị phần trăm. Bằng cách sử dụng giá trị phần trăm, chúng ta 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%.
Ví dụ
/* Code animation */ @keyframes example { 0% {background-color: red;} 25% {background-color: yellow;} 50% {background-color: green;} 100% {background-color: blue;} } /* Phần tử áp dụng hiệu ứng animation */ div { width: 100px; height: 100px; background-color: red; animation-name: example; animation-duration: 5s; }
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ụ
/* Code animation */ @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;} } /* Phần tử áp dụng hiệu ứng animation */ div { width: 100px; height: 100px; position: relative; background-color: red; animation-name: example; animation-duration: 4s; }
Thuộc tính animation-delay
quy định cụ thể thời gian delay trước khi bắt đầu của một hình ảnh động.
Ví dụ sau hoạt ảnh chờ 2s trước khi bắt đầu chạy hiệu ứng.
Ví dụ
div { width: 100px; height: 100px; position: relative; background-color: red; animation-name: example; animation-duration: 5s; animation-delay: 2s; }
Giá trị âm cũng được cho 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ó đã chạy được 2 giây.
Ví dụ
div { width: 100px; height: 100px; position: relative; background-color: red; animation-name: example; animation-duration: 5s; animation-delay: -2s; }
Thuộc tính animation-iteration-count
quy định cụ thể số lần hoạt ảnh sẽ chạy.
Ví dụ sau hoạt ảnh sẽ chạy 3 lần trước khi nó dừng lại.
Ví dụ
div { width:100px; height:100px; position:relative; background-color:red; animation-name:example; animation-duration:5s; animation-iteration-count:3; }
Ví dụ sau sử dụng giá trị "infinite" để làm cho hoạt ảnh chạy mãi mãi
Ví dụ
div { width:100px; height:100px; position:relative; background-color:red; animation-name:example; animation-duration:5s; animation-iteration-count:infinite; }
Thuộc tính animation-direction
quy định cụ thể một phần tử chạy hiệu ứng hoạt ảnh sẽ chạy về phía trước, hay chạy ngược lại hoặc chạy một chu kỳ thay thế khác.
Thuộc tính animation-direction
có các giá trị sau:
normal
- Hoạt ảnh được chạy như bình thường (chuyển tiếp). Đây là mặc địnhreverse
- Hoạt ảnh được chạy theo hướng ngược lại (ngược)alternate
- Hoạt ảnh được chạy về phía trước, sau đó sẽ chạy ngược lạialternate-reverse
- Hoạt ảnh được chạy ngược trước, sau đó sẽ chuyển tiếpVí dụ sau sẽ chạy hoạt ảnh theo hướng ngược lại (reverse)
Ví dụ
div { width:100px; height:100px; position:relative; background-color:red; animation-name:example; animation-duration:5s; animation-direction:reverse; }
Ví dụ sau sử dụng giá trị "alternate" để làm cho hoạt ảnh chạy về phía trước, sau đó chạy ngược lại
Ví dụ
div { width:100px; height:100px; position:relative; background-color:red; animation-name:example; animation-duration:5s; animation-iteration-count:2; animation-direction:alternate; }
Ví dụ sau sử dụng giá trị "alternate-reverse" để làm cho hoạt ảnh chạy ngược trước, sau đó chuyển tiếp
Ví dụ
div { width:100px; height:100px; position:relative; background-color:red; animation-name:example; animation-duration:5s; animation-iteration-count:2; animation-direction:alternate-reverse; }
Thuộc tính animation-timing-function
quy định các tùy biến tốc độ của hoạt ảnh.
Thuộc tính animation-timing-function
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 với 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 baVí dụ sau đây cho thấy một số tùy biến 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;}
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
quy định cụ thể một kiểu cho các phần tử mục tiêu khi các hoạt ảnh được dừng chạy (trước khi nó bắt đầu, sau khi nó kết thúc, hoặc cả hai).
Thuộc tính animation-fill-mode
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ử 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ễ của 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ướngVí 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; }
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).
Ví 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.
Ví dụ
div { width: 100px; height: 100px; background: red; position: relative; animation-name: example; animation-duration: 3s; animation-delay: 2s; animation-fill-mode: both; }
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; }
Hiệu ứng hoạt ảnh tương tự như trên có thể được viết tắt bằng cách sử dụng thuộc tính duy nhất animation