Các animationbất động sản trong CSS có thể được sử dụng để animate nhiều thuộc tính CSS khác như color, background-color, height, hoặc width. Mỗi hoạt ảnh cần được xác định bằng @keyframesquy tắc at sau đó được gọi với thuộc animationtính, như sau:
.element ( animation: pulse 5s infinite; ) @keyframes pulse ( 0% ( background-color: #001F3F; ) 100% ( background-color: #FF4136; ) )Mỗi @keyframesquy tắc tại thời điểm xác định điều gì sẽ xảy ra tại các thời điểm cụ thể trong hoạt ảnh. Ví dụ: 0% là phần đầu của hoạt ảnh và 100% là phần cuối. Sau đó, các khung hình chính này có thể được kiểm soát bởi thuộc tính tốc ký animationhoặc tám thuộc tính phụ của nó, để cung cấp nhiều quyền kiểm soát hơn đối với cách thao tác các khung hình chính đó.
Thuộc tính phụ
animation-name: khai báo tên của@keyframesat-rule để thao tác.animation-duration: khoảng thời gian cần để hoạt ảnh hoàn thành một chu kỳ.animation-timing-function: thiết lập các đường cong gia tốc đặt trước chẳng hạn nhưeasehoặclinear.animation-delay: thời gian giữa phần tử được tải và bắt đầu chuỗi hoạt ảnh (ví dụ thú vị).animation-direction: thiết lập hướng của hoạt ảnh sau chu kỳ. Thiết lập lại mặc định của nó trên mỗi chu kỳ.animation-iteration-count: số lần hoạt ảnh sẽ được thực hiện.animation-fill-mode: đặt giá trị nào được áp dụng trước / sau hoạt ảnh.
Ví dụ: bạn có thể đặt trạng thái cuối cùng của hoạt ảnh để duy trì trên màn hình hoặc bạn có thể đặt nó để chuyển về trước khi hoạt ảnh bắt đầu.animation-play-state: tạm dừng / phát hoạt ảnh.
Các thuộc tính con này sau đó có thể được sử dụng như sau:
@keyframes stretch ( /* declare animation actions here */ ) .element ( animation-name: stretch; animation-duration: 1.5s; animation-timing-function: ease-out; animation-delay: 0s; animation-direction: alternate; animation-iteration-count: infinite; animation-fill-mode: none; animation-play-state: running; ) /* is the same as: */ .element ( animation: stretch 1.5s ease-out 0s alternate infinite none running; )Dưới đây là danh sách đầy đủ các giá trị mà mỗi thuộc tính phụ này có thể nhận:
animation-timing-function | dễ dàng, dễ ra, dễ vào, dễ vào, tuyến tính, bậc ba (x1, y1, x2, y2) (ví dụ: bậc ba (0,5, 0,2, 0,3, 1,0)) |
animation-duration | Xs hoặc Xms |
animation-delay | Xs hoặc Xms |
animation-iteration-count | X |
animation-fill-mode | tiến, lùi, cả hai, không |
animation-direction | bình thường, thay thế |
animation-play-state | tạm dừng, đang chạy, đang chạy |
Nhiều bước
Nếu một hoạt ảnh có cùng thuộc tính bắt đầu và kết thúc, sẽ hữu ích khi phân tách các giá trị 0% và 100% bên trong bằng dấu phẩy @keyframes:
@keyframes pulse ( 0%, 100% ( background-color: yellow; ) 50% ( background-color: red; ) )Nhiều hoạt ảnh
Bạn cũng có thể phân tách các giá trị bằng dấu phẩy để khai báo nhiều hoạt ảnh trên một bộ chọn. Trong ví dụ dưới đây, chúng ta muốn thay đổi màu của vòng tròn trong @keyframekhi cũng di chuyển nó từ bên này sang bên kia bằng một vòng tròn khác.
.element ( animation: pulse 3s ease infinite alternate, nudge 5s linear infinite alternate; )Hiệu suất
Việc tạo hoạt ảnh cho hầu hết các thuộc tính là mối quan tâm về hiệu suất, vì vậy chúng ta nên tiến hành một cách thận trọng trước khi tạo hoạt ảnh cho bất kỳ thuộc tính nào. Tuy nhiên, có một số kết hợp nhất định có thể được tạo hoạt ảnh một cách an toàn:
transform: translate()transform: scale()transform: rotate()opacity
Thuộc tính nào có thể được làm động?
MDN có một danh sách các thuộc tính CSS có thể được làm động. Thuộc tính hoạt hình có xu hướng về màu sắc và số. Một ví dụ về thuộc tính không thể hoạt hình là background-image.
Hỗ trợ trình duyệt
Dữ liệu hỗ trợ trình duyệt này là từ Caniuse, có nhiều chi tiết hơn. Một con số cho biết rằng trình duyệt hỗ trợ tính năng ở phiên bản đó trở lên.
Máy tính để bàn
| Trình duyệt Chrome | Firefox | I E | Cạnh | Safari |
|---|---|---|---|---|
| 4* | 5 * | 10 | 12 | 5.1 * |
Di động / Máy tính bảng
| Chrome dành cho Android | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 4* | 6,0-6,1 * |
Thêm thông tin
- hoạt ảnh trên MDN
- Sử dụng hoạt ảnh CSS
- hoạt ảnh trên W3C
- Jank busting để có hiệu suất hiển thị tốt hơn
- Hoạt ảnh web tại nơi làm việc
- Năm cách để tạo hoạt ảnh một cách có trách nhiệm
- Chuyển trạng thái, Độ trễ tiêu cực, Nguồn gốc hoạt ảnh và hơn thế nữa
- Đang bắt đầu hoạt ảnh CSS giữa chừng
- Hoạt ảnh hiệu suất cao