animationiterationСобытие
Пример
Добавьте прослушиватель события к элементу <div>, когда CSS-анимация повторяется:
// Код для Chrome, Safari и Opera
x.addEventListener("webkitAnimationIteration", myStartFunction);
// Стандартный синтаксис
x.addEventListener("animationiteration", myStartFunction);
Попробуйте сами »
Определение и использование
Событие animationiteration срабатывает, когда CSS-анимация воспроизводится повторно.
Если для атрибута CSSanimation-iteration-countзадано значение "1", анимация проиграется только один раз, и событие animationiteration больше не будет срабатывать.
Дополнительные сведения о CSS-анимациях см. в нашей главеCSS3-анимации.
Когда воспроизводится CSS-анимация, происходят следующие три события:
- animationstart- Срабатывает после начала CSS-анимации
- animationiteration — срабатывает, когда CSS-анимация воспроизводится повторно.
- animationend — срабатывает после завершения CSS-анимации.
Поддержка браузеров
Числа в таблице указывают первую версию браузера, которая полностью поддерживает это событие.
Число, указанное после "webkit" или "moz", — это первый префикс версии, поддерживающий это событие.
| Event | |||||
|---|---|---|---|---|---|
| animationiteration | 4.0 webkit | 10.0 | 16.0 5.0 moz |
4.0 webkit | 15.0 webkit 12.1 |
Примечание:Браузеры Chrome, Safari и Opera используют префикс webkitAnimationEnd.
Синтаксис
object.addEventListener("animationiteration", myScript); // стандартный синтаксис
Примечание:Internet Explorer 8 и более ранние версии IE не поддерживают методaddEventListener().
Технические детали
| Всплывает ли событие: | Да |
|---|---|
| Можно ли его отменить: | Нет |
| Тип события: | AnimationEvent |
Связанные страницы
Учебник CSS:CSS3-анимации
Справочное руководство по CSS:Свойства анимации CSS3
Справочное руководство по CSS:Свойство CSS3 animation-iteration-count
Справочное руководство по HTML DOM:Свойства анимации Style
Объект события Другие расширения