CSS Animation
- Previous Page CSS Transition
- Next Page CSS Tooltip
CSS Animation
CSS có thể thực hiện hiệu ứng animation của phần tử HTML mà không cần sử dụng JavaScript hoặc Flash!
Trong chương này, bạn sẽ học 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 của animation
Số trong bảng chỉ ra phiên bản trình duyệt đầu tiên hỗ trợ hoàn toàn thuộc tính này.
Thuộc tính | Chrome | IE | Firefox | Safari | Opera |
---|---|---|---|---|---|
@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 |
Animation CSS là gì?
Animation giúp phần tử từ từ chuyển từ giao diện này sang giao diện khác.
Bạn có thể thay đổi ngẫu nhiên bất kỳ số lượng thuộc tính CSS nào.
Để sử dụng animation CSS, bạn phải trước tiên chỉ định một số keyframe cho animation.
Các keyframe chứa giao diện mà phần tử có vào một thời điểm cụ thể.
Quy tắc @keyframes
Nếu bạn trong @keyframes
Trong quy tắc, quy định giao diện CSS, animation sẽ từ từ thay đổi từ giao diện hiện tại sang giao diện mới trong một thời gian cụ thể.
Để animation hoạt động, bạn phải gắn animation với một phần tử nào đó.
Ví dụ dưới đây sẽ gắn animation "example" với phần tử <div>. Animation sẽ kéo dài 4 giây, trong khi đó màu nền của phần tử <div> sẽ từ đỏ dần chuyển sang vàng:
Mô hình
/* Mã animation */ @keyframes example { from {màu nền: đỏ;} to {màu nền: vàng;} } /* Áp dụng hiệu ứng animation cho phần tử này */ div { width: 100px; height: 100px; background-color: red; animation-name: example; animation-duration: 4s; }
Lưu ý:animation-duration
Thuộc tính xác định cần bao lâu để animation hoàn thành. animation-duration
Nếu không có thuộc tính, animation sẽ không xảy ra vì giá trị mặc định là 0s (0 giây).
Trong ví dụ trên, bằng cách sử dụng từ khóa "from" và "to" (đại diện cho 0% (bắt đầu) và 100% (hoàn thành)), chúng ta đã thiết lập khi nào giao diện thay đổi.
Bạn cũng có thể sử dụng giá trị phần trăm. Bằng cách sử dụng phần trăm, bạn có thể thêm bất kỳ số lượng thay đổi giao diện nào bạn muốn.
Ví dụ dưới đây sẽ thay đổi màu nền của phần tử <div> khi animation hoàn thành 25%, hoàn thành 50% và animation hoàn thành 100%:
Mô hình
/* Mã animation */ @keyframes example { 0% {màu nền: đỏ;} 25% {màu nền: vàng;} 50% {background-color: blue;} 100% {background-color: green;} } /* Áp dụng animation cho phần tử */ div { width: 100px; height: 100px; background-color: red; animation-name: example; animation-duration: 4s; }
Dưới đây là ví dụ sẽ thay đổi màu nền và vị trí của phần tử <div> khi animation hoàn thành 25%, 50% và animation hoàn thành 100%:
Mô hình
/* Mã 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;} } /* Áp dụng animation cho phần tử */ div { width: 100px; height: 100px; position: relative; background-color: red; animation-name: example; animation-duration: 4s; }
Chậm trễ animation
animation-delay
Thuộc tính quy định thời gian chậm trễ bắt đầu animation.
Dưới đây là ví dụ có 2 giây chậm trễ trước khi bắt đầu animation:
Mô hình
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 giá trị âm, animation sẽ bắt đầu phát như thể nó đã phát N giây.
Trong ví dụ sau, animation sẽ bắt đầu phát như thể nó đã phát 2 giây:
Mô hình
div { width: 100px; height: 100px; position: relative; background-color: red; animation-name: example; animation-duration: 4s; animation-delay: -2s; }
Đặt số lần animation nên chạy
animation-iteration-count
Thuộc tính xác định số lần animation nên chạy.
Dưới đây là ví dụ để chạy animation 3 lần trước khi dừng:
Mô hình
div { width: 100px; height: 100px; position: relative; background-color: red; animation-name: example; animation-duration: 4s; animation-iteration-count: 3; }
Dưới đây là ví dụ sử dụng giá trị "infinite" để làm cho animation tiếp tục mãi mãi:
Mô hình
div { width: 100px; height: 100px; position: relative; background-color: red; animation-name: example; animation-duration: 4s; animation-iteration-count: infinite; }
Chạy ngược lại hoặc lặp lại animation
animation-direction
Thuộc tính xác định animation chạy về phía trước, chạy ngược lại hay chạy theo cách lặp lại.
animation-direction
Thuộc tính có thể chấp nhận các giá trị sau:
normal
- Animation chạy bình thường (về phía trước). Giá trị mặc địnhreverse
- Animation chạy ngược lại (ngược lại)alternate
- Animation chạy về phía trước trước, sau đó chạy ngược lạialternate-reverse
- Animation chạy ngược lại trước, sau đó chạy về phía trước
Ví dụ sau sẽ chạy animation theo hướng ngược lại (ngược lại):
Mô hình
div { width: 100px; height: 100px; position: relative; background-color: red; animation-name: example; animation-duration: 4s; animation-direction: reverse; }
Dưới đây là ví dụ sử dụng giá trị "alternate" để làm cho animation chạy về phía trước trước, sau đó chạy ngược lại:
Mô hình
div { width: 100px; height: 100px; position: relative; background-color: red; animation-name: example; animation-duration: 4s; animation-iteration-count: 2; animation-direction: alternate; }
Dưới đây là ví dụ sử dụng giá trị "alternate-reverse" để làm cho animation chạy ngược lại trước, sau đó chạy về phía trước:
Mô hình
div { width: 100px; height: 100px; position: relative; background-color: red; animation-name: example; animation-duration: 4s; animation-iteration-count: 2; animation-direction: alternate-reverse; }
Định nghĩa đường cong tốc độ của hiệu ứng hoạt hình
animation-timing-function
Thuộc tính quy định đường cong tốc độ của hiệu ứng hoạt hình.
animation-timing-function
Thuộc tính có thể chấp nhận các giá trị sau:
ease
- Định nghĩa hiệu ứng hoạt hình bắt đầu chậm hơn, sau đó tăng tốc, sau đó kết thúc chậm hơn (mặc định)linear
- Định nghĩa hiệu ứng hoạt hình có tốc độ từ đầu đến cuối giống nhauease-in
- Định nghĩa hiệu ứng hoạt hình bắt đầu chậm hơnease-out
- Định nghĩa hiệu ứng hoạt hình kết thúc chậm hơnease-in-out
- Định nghĩa hiệu ứng hoạt hình bắt đầu và kết thúc chậm hơncubic-bezier(n,n,n,n)
- Chạy giá trị của bạn trong hàm ba điểm Bezier
Dưới đây là một số ví dụ về các đường cong tốc độ có thể sử dụng:
Mô hình
#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;}
Định nghĩa chế độ điền đầy cho hiệu ứng hoạt hình
CSS hiệu ứng hoạt hình sẽ không ảnh hưởng đến yếu tố trước khi phát sóng khung chốt đầu tiên hoặc sau khi phát sóng khung chốt cuối cùng.animation-fill-mode
Thuộc tính có thể che盖这种行为.
Khi không phát triển hiệu ứng hoạt hình (trước khi bắt đầu, sau khi kết thúc, hoặc cả hai đều kết thúc),animation-fill-mode
Thuộc tính quy định phong cách của yếu tố mục tiêu.
Thuộc tính animation-fill-mode có thể chấp nhận các giá trị sau:
none
- Giá trị mặc định. Hiệu ứng hoạt hình sẽ không áp dụng bất kỳ phong cách nào cho yếu tố trước khi thực hiện hoặc sau khi thực hiện.forwards
- Yếu tố sẽ giữ lại giá trị phong cách được đặt bởi khung chốt cuối cùng (tuỳ thuộc vào animation-direction và animation-iteration-count).backwards
- Yếu tố sẽ lấy giá trị phong cách được đặt bởi khung chốt đầu tiên (tùy thuộc vào animation-direction) và giữ giá trị này trong thời gian chờ của hiệu ứng hoạt hình.both
- Hiệu ứng hoạt hình sẽ tuân theo cả các quy tắc tiến và lùi, từ đó mở rộng thuộc tính hiệu ứng hoạt hình theo hai hướng.
Dưới đây là ví dụ để <div> yếu tố giữ lại giá trị phong cách từ khung chốt cuối cùng sau khi hiệu ứng hoạt hình kết thúc:
Mô hình
div { width: 100px; height: 100px; background: red; position: relative; animation-name: example; animation-duration: 3s; animation-fill-mode: forwards; }
Ví dụ dưới đây sẽ làm cho phần tử <div> nhận giá trị phong cách của khung chìa khóa đầu tiên trong thời gian trễ của animation:
Mô hình
div { width: 100px; height: 100px; background: red; position: relative; animation-name: example; animation-duration: 3s; animation-delay: 2s; animation-fill-mode: backwards; }
Ví dụ dưới đây sẽ làm cho phần tử <div> nhận giá trị phong cách của khung chìa khóa đầu tiên trước khi animation bắt đầu, và giữ giá trị phong cách của khung chìa khóa cuối cùng sau khi animation kết thúc:
Mô hình
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 viết tắt animation
Ví dụ dưới đây sử dụng sáu thuộc tính animation:
Mô hình
div { animation-name: example; animation-duration: 5s; animation-timing-function: linear; animation-delay: 2s; animation-iteration-count: infinite; animation-direction: alternate; }
Sử dụng viết tắt animation
Thuộc tính cũng có thể tạo ra hiệu ứng animation như ví dụ trên:
Mô hình
div { animation: example 5s linear 2s infinite alternate; }
Thuộc tính animation CSS
Bảng dưới đây liệt kê các quy tắc @keyframes và tất cả các thuộc tính animation CSS:
Thuộc tính | Mô tả |
---|---|
@keyframes | Định nghĩa chế độ animation. |
animation | Đặt thuộc tính viết tắt cho tất cả các thuộc tính animation. |
animation-delay | Định nghĩa độ trễ bắt đầu của animation. |
animation-direction | Định nghĩa animation là phát trước, phát sau hay phát lặp lại. |
animation-duration | Định nghĩa thời gian cần để animation hoàn thành một chu kỳ. |
animation-fill-mode | Định nghĩa phong cách của phần tử khi animation không được phát (trước khi bắt đầu, sau khi kết thúc, hoặc cả hai cùng lúc). |
animation-iteration-count | Định nghĩa số lần animation cần phát chơi. |
animation-name | Định nghĩa tên của animation @keyframes. |
animation-play-state | Define whether the animation is running or paused. |
animation-timing-function | Define the speed curve of the animation. |
- Previous Page CSS Transition
- Next Page CSS Tooltip