Làm cách nào để ngăn hoạt ảnh CSS quay trở lại vị trí ban đầu?

Thuộc tính@keyframes43. 010. 016. 09. 030. 0animation-name43. 010. 016. 09. 030. 0animation-duration43. 010. 016. 09. 030. 0animation-delay43. 010. 016. 09. 030. 0animation-iteration-count43. 010. 016. 09. 030. 0animation-direction43. 010. 016. 09. 030. 0animation-timing-function43. 010. 016. 09. 030. 0animation-fill-mode43. 010. 016. 09. 030. 0animation43. 010. 016. 09. 030. 0

Ảnh động CSS là gì?

Hoạt ảnh cho phép một phần tử thay đổi dần dần 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, bao nhiêu lần 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

Các khung hình chính giữ các kiểu mà phần tử sẽ có vào những thời điểm nhất định

Quy tắc @keyframes

Khi bạn chỉ định các kiểu CSS bên trong quy tắc @keyframes, hoạt ảnh sẽ dần 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 "ví dụ" với

yếu tố. 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ử từ "đỏ" sang "vàng"

Ví dụ

/* Mã hoạt hình */
ví dụ @keyframes {
từ {màu nền. màu đỏ;}
thành {màu nền. màu vàng;}
}

/* Phần tử để áp dụng hiệu ứng động cho */
div {
bề rộng. 100px;
chiều cao. 100px;
màu nền. màu đỏ;
tên hoạt hình. ví dụ;
Thời lượng hoạt ảnh. 4s;
}

Ghi chú. Thuộc tính animation-duration xác định khoảng thời gian một hoạt ảnh sẽ 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à 0 giây (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 kiểu tùy thích

Ví dụ sau sẽ thay đổi màu nền của

phần tử 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ụ

/* Mã hoạt hình */
ví dụ @keyframes {
0%   {màu nền. màu đỏ;}
25%  {màu nền. màu vàng;}
50%  {màu nền. màu xanh da trời;}
100% {màu nền. màu xanh lá;}
}

/* Phần tử để áp dụng hiệu ứng động cho */
div {
bề rộng. 100px;
chiều cao. 100px;
màu nền. màu đỏ;
tên hoạt hình. ví dụ;
Thời lượng hoạt ảnh. 4s;
}

Ví dụ sau sẽ thay đổi cả màu nền và vị trí của

phần tử 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ụ

/* Mã hoạt hình */
ví dụ @keyframes {
0%   {màu nền. màu đỏ; . 0px; . 0px;}
25%  {màu nền. màu vàng; . 200px; . 0px;}
50%  {màu nền. màu xanh da trời; . 200px; . 200px;}
75%  {màu nền. màu xanh lá; . 0px; . 200px;}
100% {màu nền. màu đỏ; . 0px; . 0px;}
}

/* Phần tử để áp dụng hiệu ứng động cho */
div {
bề rộng. 100px;
chiều cao. 100px;
Chức vụ. liên quan đến;
màu nền. màu đỏ;
tên hoạt hình. ví dụ;
Thời lượng hoạt ảnh. 4s;
}

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 {
bề rộng. 100px;
chiều cao. 100px;
Chức vụ. liên quan đến;
màu nền. màu đỏ;
tên hoạt hình. ví dụ;
Thời lượng hoạt ảnh. 4s;
chậm trễ hoạt hình. 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ó đã phát được 2 giây

Ví dụ

div {
bề rộng. 100px;
chiều cao. 100px;
Chức vụ. liên quan đến;
màu nền. màu đỏ;
tên hoạt hình. ví dụ;
Thời lượng hoạt ảnh. 4s;
chậm trễ hoạt hình. -2s;
}

Đặ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 {
chiều rộng. 100px;
chiều cao. 100px;
chức vụ. liên quan đến;
màu nền. màu đỏ;
tên hoạt hình. ví dụ;
Thời lượng hoạt ảnh. 4s;
hoạt hình-lặp lại-đếm. 3;
}

Ví dụ sau sử dụng giá trị "infinite" để làm cho hoạt ảnh tiếp tục mãi mãi

Ví dụ

div {
bề rộng. 100px;
chiều cao. 100px;
Chức vụ. liên quan đến;
màu nền. màu đỏ;
tên hoạt hình. ví dụ;
Thời lượng hoạt ảnh. 4s;
hoạt hình-lặp lại-đếm. vô tận;
}

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

Thuộc tính animation-direction chỉ định xem hoạt ảnh sẽ được phát tiến, lùi hay theo chu kỳ thay thế

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

• @keyframes6 - Hoạt hình được phát như bình thường (chuyển tiếp). Đây là mặc định
• @keyframes7 - Hoạt hình được phát theo hướng ngược lại (lùi)
• @keyframes8- Hoạt hình được phát tới trước, sau đó phát ngược lại
• @keyframes9 - Hoạt hình được phát ngược trước, sau đó phát tiếp

Ví dụ sau sẽ chạy hoạt hình theo hướng ngược lại (ngược)

Ví dụ

div {
bề rộng. 100px;
chiều cao. 100px;
Chức vụ. liên quan đến;
màu nền. màu đỏ;
tên hoạt hình. ví dụ;
Thời lượng hoạt ảnh. 4s;
hướng hoạt hình. đảo ngược;
}

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 {
bề rộng. 100px;
chiều cao. 100px;
Chức vụ. liên quan đến;
màu nền. màu đỏ;
tên hoạt hình. ví dụ;
Thời lượng hoạt ảnh. 4s;
hoạt hình-lặp lại-đếm. 2;
hướng hoạt hình. Luân phiên;
}

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 {
chiều rộng. 100px;
chiều cao. 100px;
Chức vụ. liên quan đến;
màu nền. màu đỏ;
tên hoạt hình. ví dụ;
Thời lượng hoạt ảnh. 4s;
hoạt hình-lặp lại-đếm. 2;
hướng hoạt hình. xen kẽ-đảo ngược;
}

Chỉ định Đường cong Tốc độ của Hoạt hì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

• animation-name1 - Chỉ định hoạt ảnh bắt đầu chậm, sau đó nhanh, rồi kết thúc chậm (đây là mặc định)
• animation-name2 - Chỉ định hoạt ảnh có cùng tốc độ từ đầu đến cuối
• animation-name3 - Chỉ định hoạt ảnh bắt đầu chậm
• animation-name4 - Chỉ định hoạt ảnh có kết thúc chậm
• animation-name5 - Chỉ định hoạt ảnh bắt đầu và kết thúc chậm
• animation-name6 - 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

Ví dụ

#div1 {chức năng hoạt hình-thời gian. tuyến tính;}
#div2 {chức năng hoạt hình-thời gian. xoa dịu;}
#div3 {chức năng hoạt hình-thời gian. dễ dàng trong;}
#div4 {chức năng hoạt hình-thời gian. thả lỏng;}
#div5 {chức năng hoạt hình-thời gian. dễ dàng ra vào;}

Chỉ định chế độ lấp đầy cho một hình ảnh động

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 bắt đầu, sau khi kết thúc hoặc cả hai)

Chức năng nào buộc một hình ảnh động chuyển sang trạng thái kết thúc?

Bạn định cấu hình hoạt ảnh CSS để lặp vô thời hạn như thế nào?

Sự khác biệt giữa độ trễ hoạt ảnh và độ trễ chuyển tiếp là gì?