Sự kiện animationstart

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

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

Khi animation CSS bắt đầu phát lại, sự kiện animationstart sẽ xảy ra.

Để 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 lại, có thể xảy ra ba sự kiện:

Mô hình

Khi animation CSS bắt đầu, hãy thực hiện một số điều gì đó với phần tử <div> này:

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

Thử nghiệm trực tiếp

Cú pháp

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

Chú thích：Internet Explorer 8 hoặc các phiên bản trước không hỗ trợ Phương thức addEventListener()。

Chi tiết kỹ thuật

Bubbling： Hỗ trợ
Có thể hủy bỏ： 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ố trong bảng cho biết phiên bản trình duyệt đầu tiên hỗ trợ sự kiện này hoàn toàn.

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

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

Chú thích：Đối với Chrome, Safari và Opera, hãy sử dụng webkitAnimationEnd。

Các trang liên quan

Hướng dẫn CSS：CSS3 Animation

Thủ sách 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