Ví dụ

div {
chiều rộng: 100px;
chiều cao: 100px;
vị trí: tương đối;
background-color: red;
animation-name: example;
thời lượng hoạt ảnh: 4 giây;
hoạt ảnh-độ trễ: -2 giây;
}

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 một 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;
thời lượng hoạt ảnh: 4 giây;
hoạt ảnh-lặp-đếm: 3;
}

Hãy tự mình thử »

Ví dụ sau sử dụng giá trị “vô hạn” để tạo hoạt ảnh
tiếp tục mãi mãi:

Ví dụ

div {
chiều rộng: 100px;
chiều cao: 100px;
vị trí: tương đối;
background-color: red;
animation-name: example;
hoạt ảnh-thời lượng: 4 giây;
hoạt-động-lặp-đếm:
vô hạn;
}

Hãy tự mình thử »

Chạy hoạt ảnh theo hướng ngược hoặc chu kỳ thay thế

Thuộc tính animation-direction chỉ định
liệu hoạt ảnh có nên được phát tiến, lùi hay thay thế hay không
chu kỳ.

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
  (tiền đạo). Đây là mặc định
• ngược lại – Hoạt ảnh được phát trong
  hướng ngược lại (ngược)
• alternate – Hoạt ảnh được phát
  chuyển tiếp trước, sau đó lùi lại
• alternate-reverse – Hoạt ảnh được phát
  lùi 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):

Ví dụ

div {
chiều rộng: 100px;
chiều cao: 100px;
vị trí: tương đối;
background-color: red;
animation-name: example;
thời lượng hoạt ảnh: 4 giây;
hướng hoạt ảnh:
đảo ngược;
}

Hãy tự mình thử »

Ví dụ sau sử dụng giá trị “thay thế” để tạo hoạt ảnh
chạy tiến trước, sau đó chạy lùi:

Ví dụ

div {
chiều rộng: 100px;
chiều cao: 100px;
vị trí: tương đối;
background-color: red;
animation-name: example;
animation-time: 4 giây;
animation-iteration-count: 2;
hướng hoạt hình:
thay thế;
}

Hãy tự mình thử »

Ví dụ sau sử dụng giá trị “thay thế-đảo ngược” để tạo hoạt ảnh
chạy lùi trước, sau đó chạy tới:

Ví dụ

div {
chiều rộng: 100px;
chiều cao: 100px;
vị trí: tương đối;
background-color: red;
animation-name: example;
animation-time: 4 giây;
animation-iteration-count: 2;
hướng hoạt ảnh:
thay thế-đảo ngược;
}

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 hình.

Thuộc tính animation-timing-function có thể có các giá trị sau:

• easy – Chỉ định hoạt ảnh có bắt đầu chậm, sau đó nhanh, rồi 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ối
• easy-in – Chỉ định hoạt ảnh có khởi động chậm
• easy-out – Chỉ định hoạt ảnh có kết thúc chậm
• easy-in-out – Chỉ định hoạt ảnh có phần bắt đầu và kết thúc chậm
• Cub-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:

Chỉ định chế độ lấp đầy 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 một
kiểu cho phần tử đích khi hoạt ảnh không phát (trước nó
bắt đầu, sau khi kết thúc hoặc cả hai).

Thuộc tính chế độ hoạt ảnh 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 thi
• chuyển tiếp – Phần tử sẽ giữ lại
  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)
• ngược lại – Phần tử sẽ nhận được kiểu
  các giá trị đượ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 điều này trong khoảng thời gian trễ hoạt ảnh
• cả hai – 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 trong cả hai
  chỉ đường

Ví dụ sau cho phép & lt; div & gt; phần tử 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: rel;
animation-name: example;
animation- thời lượng: 3 giây;
animation-fill-mode: chuyển tiếp;
}

Hãy tự mình thử »

Ví dụ sau cho phép & lt; div & gt; phần tử 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 {
chiều rộng: 100px;
chiều cao: 100px;
nền: đỏ;
vị trí: tương đối;
animation-name: example;
thời lượng hoạt ảnh: 3 giây;
animation-delay: 2 giây;
animation-fill-mode: back;
}

Hãy tự mình thử »

Ví dụ sau cho phép & lt; div & gt; phần tử nhận các giá trị kiểu đã đặ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;
vị trí: tương đối;
animation-name: example;
thời lượng hoạt ảnh: 3 giây;
animation-delay: 2 giây;
animation-fill-mode: both;
}

Hãy tự mình thử »

Thuộc tính tốc ký hoạt ảnh

Ví dụ dưới đây sử dụng sáu thuộc tính hoạt ảnh:

Ví dụ

div
{
animation-name: example;

thời lượng hoạt ảnh: 5 giây;

animation-timing-function: tuyến tính;

animation-delay: 2 giây;

animation-iteration-count: vô hạn;

hướng hoạt ảnh: thay thế;
}

Hãy tự mình thử »

Có thể đạt được hiệu ứng hoạt ảnh tương tự như trên bằng cách sử dụng tốc ký
Thuộc tính animation :

Ví dụ

div
{
hoạt ảnh: ví dụ 5s tuyến tính 2s xen kẽ vô hạn;
}

Hãy tự mình thử »

Tự kiểm tra bằng các bài tập

Bài tập:

Thêm hoạt ảnh 2 giây cho & lt; div & gt; phần tử này thay đổi màu từ đỏ sang xanh lam. Gọi hoạt ảnh là “ví dụ”.

& lt; phong cách & gt;
div {
  chiều rộng: 100px;
  chiều cao: 100px;
  background-color: đỏ;
  tên-hoạt hình :;
  : 2 giây;
}

Ví dụ về @keyframes {
  từ {: red;}
  thành {: blue;}
}
& lt; / style & gt;

& lt; body & gt;
  & lt; div & gt; Đây là div & lt; / div & gt;
& lt; / body & gt;

Bắt đầu bài tập

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:

Tài sản
Sự mô tả

@keyframes
Chỉ định mã hoạt ảnh

hoạt ảnh
Thuộc tính viết tắt để thiết lập tất cả các thuộc tính hoạt ảnh

hoạt ảnh trễ
Chỉ định thời gian trễ để bắt đầu hoạt ảnh

hướng hoạt ảnh
Chỉ định xem một hoạt ảnh sẽ được phát về phía trước, phía sau hoặc
trong các chu kỳ thay thế

thời lượng hoạt ảnh
Chỉ định thời gian hoạt ảnh phải mất để hoàn thành một chu kỳ

animation-fill-mode
Chỉ định kiểu cho phần tử khi hoạt ảnh không phát
(trước khi bắt đầu, sau khi kết thúc hoặc cả hai)

hoạt-động-lặp-đếm
Chỉ định số lần một hoạt ảnh sẽ được phát

tên hoạt hình
Chỉ định tên của hoạt ảnh @keyframes

animation-play-state
Chỉ định hoạt ảnh đang chạy hay bị tạm dừng

hoạt ảnh-thời gian-chức năng
Chỉ định đường cong tốc độ của hoạt ảnh