Sự kiện animationiteration

DOM sự kiện Sự kiện AnimationEvent

Định nghĩa và cách sử dụng

sự kiện animationiteration xảy ra khi animation CSS được phát lại.

Nếu Thuộc tính animation-iteration-count của CSSĐặt thành "1" có nghĩa là animation chỉ được phát sóng một lần, sẽ không xảy ra sự kiện animationiteration. Animation cần chạy nhiều lần mới kích hoạt sự kiện này.

Nếu bạn muốn biết thêm về CSS Animation, hãy học các khóa học của chúng tôi Giáo trình CSS3 Animation.

Khi CSS animation phát sóng, có thể xảy ra ba sự kiện:

Mô hình

Khi CSS animation lặp lại, hãy làm điều gì đó với phần tử <div>:

var x = document.getElementById("myDIV");
// Mã cho Chrome, Safari và Opera
x.addEventListener("webkitAnimationIteration", myRepeatFunction);
// Cú pháp tiêu chuẩn
x.addEventListener("animationiteration", myRepeatFunction);

Thử ngay

Cú pháp

object.addEventListener("webkitAnimationIteration", myScript);  // Mã cho Chrome, Safari và Opera
object.addEventListener("animationiteration", myScript);        // Cú pháp tiêu chuẩn

Ghi chú:Internet Explorer 8 hoặc các phiên bản sớm hơn không hỗ trợ Phương thức addEventListener().

Chi tiết kỹ thuật

Bubbling: Hỗ trợ
Có thể hủy: Không hỗ trợ
Loại sự kiện: Sự kiện AnimationEvent
Phiên bản DOM: Sự kiện cấp 3

Hỗ trợ trình duyệt

Số trong bảng cho biết phiên bản trình duyệt đầu tiên hỗ trợ hoàn toàn sự kiện đó.

Số sau dấu phẩy của "webkit" hoặc "moz" cho biết phiên bản đầu tiên sử dụng tiền tố.

sự kiện Chrome IE Firefox Safari Opera
animationiteration 4.0 webkit 10.0 16.0
5.0 moz		 4.0 webkit 15.0 webkit
12.1

Ghi chú:Đối với Chrome, Safari và Opera, hãy sử dụng webkitAnimationEnd.

Các trang liên quan

Giáo trình CSS:CSS3 Animation

Tài liệu tham khảo CSS:Thuộc tính animation của CSS3

Tài liệu tham khảo CSS:Thuộc tính animation-iteration-count của CSS3

Tài liệu tham khảo HTML DOM:Thuộc tính animation của Style

DOM sự kiện Sự kiện AnimationEvent