Событие анимациистарт
Пример
Сделайте что-нибудь с элементом <div>, когда анимация CSS запущена:
var x = document.getElementById("myDIV");
// Code for Chrome, Safari and Opera
x.addEventListener("webkitAnimationStart", myStartFunction);
// Standard syntax
x.addEventListener("animationstart", myStartFunction);
Определение и использование
Событие animationstart возникает, когда начинается воспроизведение CSS-анимации.
Для получения дополнительной информации об анимациях CSS см. наш учебник по анимациям CSS3 .
При воспроизведении CSS-анимации могут произойти три события:
- анимациястарт — происходит, когда анимация CSS началась
- анимация итерация — происходит, когда анимация CSS повторяется
- animationend — происходит, когда анимация CSS завершена.
Поддержка браузера
Цифры в таблице указывают на первую версию браузера, которая полностью поддерживает это событие.
Цифры, за которыми следует «webkit» или «moz», указывают первую версию, которая работала с префиксом.
Event | |||||
---|---|---|---|---|---|
animationstart | 4.0 webkit | 10.0 | 16.0 5.0 moz |
4.0 webkit | 15.0 webkit 12.1 |
Примечание. Для Chrome, Safari и Opera используйте префикс webkitAnimationStart.
Синтаксис
object.addEventListener("webkitAnimationStart", myScript); // Code for Chrome, Safari and Opera
object.addEventListener("animationstart", myScript); // Standard syntax
Примечание. Метод addEventListener() не поддерживается в Internet Explorer 8 и более ранних версиях.
Технические детали
Пузыри: | да |
---|---|
Отменяемо: | Нет |
Тип события: | АнимацияСобытие |
Версия ДОМ: | События уровня 3 |
Связанные страницы
Учебник по CSS: Анимация CSS3
Справочник по CSS: Свойство анимации CSS3
Справочник по HTML DOM: Свойство анимации стиля