sự kiện hoạt hình
Thí dụ
Làm điều gì đó với phần tử <div> khi hoạt ảnh CSS được lặp lại:
var x = document.getElementById("myDIV");
// Code for Chrome, Safari and Opera
x.addEventListener("webkitAnimationIteration", myRepeatFunction);
// Standard syntax
x.addEventListener("animationiteration", myRepeatFunction);
Định nghĩa và Cách sử dụng
Sự kiện hoạt ảnh hóa xảy ra khi hoạt ảnh CSS được lặp lại.
Nếu thuộc tính CSS animation-iteration-count được đặt thành "1", có nghĩa là hoạt ảnh sẽ chỉ được phát một lần, thì sự kiện animationiteration sẽ không xảy ra. Hoạt ảnh cần chạy nhiều lần để sự kiện này kích hoạt.
Để biết thêm thông tin về CSS Animations, hãy xem hướng dẫn của chúng tôi về CSS3 Animations .
Khi hoạt ảnh CSS phát, có ba sự kiện có thể xảy ra:
- animationstart - xảy ra khi hoạt ảnh CSS đã bắt đầu
- hoạt ảnh - xảy ra khi hoạt ảnh CSS được lặp lại
- animationend - xảy ra khi hoạt ảnh CSS đã hoàn thành
Hỗ trợ trình duyệt
Các số trong bảng chỉ định phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ sự kiện.
Các số theo sau là "webkit" hoặc "moz" chỉ định phiên bản đầu tiên hoạt động với tiền tố.
Event | |||||
---|---|---|---|---|---|
animationiteration | 4.0 webkit | 10.0 | 16.0 5.0 moz |
4.0 webkit | 15.0 webkit 12.1 |
Lưu ý: Đối với Chrome, Safari và Opera, hãy sử dụng tiền tố webkitAnimationIteration.
Cú pháp
object.addEventListener("webkitAnimationIteration", myScript); // Code for Chrome, Safari and Opera
object.addEventListener("animationiteration", myScript); // Standard syntax
Lưu ý: Phương thức addEventListener () không được hỗ trợ trong Internet Explorer 8 và các phiên bản trước đó.
Chi tiết kỹ thuật
Bong bóng: | Đúng |
---|---|
Có thể hủy bỏ: | Không |
Loại sự kiện: | AnimationEvent |
Phiên bản DOM: | Sự kiện cấp 3 |
Các trang liên quan
Hướng dẫn CSS: Hình ảnh động CSS3
Tham chiếu CSS: Thuộc tính hoạt ảnh CSS3
Tham chiếu CSS: Thuộc tính CSS3 animation-iteration-count
Tham chiếu DOM HTML: Thuộc tính hoạt hình kiểu