Sự kiện animationend

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

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

Sự kiện animationend xảy ra khi animation CSS hoàn thành.

Để biết thêm về animation CSS, hãy học các khóa học của chúng tôi Hướng dẫn animation CSS3.

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

Mẫu

Khi CSS animation kết thúc, hãy thực hiện một số việc với phần tử <div>:

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

Thử ngay

Cú pháp

object.addEventListener("webkitAnimationEnd", myScript);  // Mã cho Chrome, Safari và Opera
object.addEventListener("animationend", 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

Bùng nổ: Hỗ trợ
Có thể hủy: Không hỗ trợ
Loại sự kiện: Sự kiện AnimationEvent
Phiên bản DOM: Level 3 Events

Hỗ trợ trình duyệt

Số liệu trong bảng注明是完全支持该事件的首个浏览器版本。

Chữ "webkit" hoặc "moz" sau số liệu chú thích cho biết phiên bản đầu tiên sử dụng tiền tố.

Sự kiện Chrome IE Firefox Safari Opera
animationend 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

CSS Hướng dẫn:Chuẩn animation của CSS3

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

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

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