Событие animationstart

События DOM Событие AnimationEvent

Определение и использование

Событие animationstart возникает при начале播放 CSS анимации.

Для получения дополнительной информации о CSS анимациях изучите наш Уроки CSS3 анимации.

При播放 CSS анимации могут произойти три события:

  • animationstart - Вызывается при начале CSS анимации
  • animationiteration - Вызывается при повторении CSS анимации
  • animationend - Вызывается при завершении CSS анимации

Пример

Когда начинается CSS анимация, выполните что-то с элементом <div>:

var x = document.getElementById("myDIV");
// Код для Chrome, Safari и Opera
x.addEventListener("webkitAnimationStart", myStartFunction);
// Стандартная грамматика
x.addEventListener("animationstart", myStartFunction);

Попробуйте сами

Грамматика

объект.addEventListener("webkitAnimationStart", myScript);  // Код для Chrome, Safari и Opera
объект.addEventListener("animationstart", myScript);        // Стандартная грамматика

Комментарии:Microsoft Internet Explorer 8 и более ранние версии не поддерживают Метод addEventListener().

Технические детали

Баллирование: Поддерживается
Отменяемые: Не поддерживается
Тип события: Событие AnimationEvent
Версия DOM: Уровень 3 событий

Поддержка браузеров

Числа в таблице указывают на первую версию браузера, которая полностью поддерживает это событие.

Знак "webkit" или "moz" после числа указывает на первую версию префикса, который используется.

События Chrome IE Firefox Safari Opera
animationstart 4.0 webkit 10.0 16.0
5.0 moz		 4.0 webkit 15.0 webkit
12.1

Комментарии:Для Chrome, Safari и Opera используйте webkitAnimationEnd.

Соответствующие страницы

CSS курс:Анимация CSS3

CSS справочник:Свойство animation CSS3

Руководство HTML DOM:Свойство animation стиля

События DOM Событие AnimationEvent