Событие animationiteration

DOM событие AnimationEvent

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

Событие animationiteration возникает при повторении CSS анимации.

Если Свойство animation-iteration-count CSSУстановив значение "1", анимация будет выполняться только один раз, и не будет вызываться событие animationiteration. Анимация должна выполняться несколько раз, чтобы событие было вызвано.

Если вы хотите узнать больше о CSS анимации, пожалуйста, изучите наш CSS3 анимация教程.

Когда CSS-анимация играет, могут произойти три события:

Пример

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

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

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

Грамматика

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

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

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

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

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

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

Числа после "webkit" или "moz" указывают на первую версию, использующую префикс.

Событие Chrome IE Firefox Safari Opera
animationiteration 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:Свойство CSS3 animation

Руководство по CSS:Свойство CSS3 animation-iteration-count

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

DOM событие AnimationEvent