пример
Сделайте что - нибудь с <div> элемент , когда CSS анимация повторяется:
var x = document.getElementById("myDIV");
// Code for Chrome, Safari and Opera
x.addEventListener("webkitAnimationIteration", myRepeatFunction);
//
Standard syntax
x.addEventListener("animationiteration",
myRepeatFunction);
Попробуй сам " Определение и использование
Событие animationiteration происходит, когда CSS анимация повторяется.
Если CSS animationiteration подсчета свойство устанавливается в "1" , это означает , что анимация будет проигрываться только один раз, событие animationiteration не происходит. Анимация должна работать больше, чем когда-то для этого события, чтобы стрелять.
Дополнительные сведения о CSS Animations см наш учебник по CSS3 анимации .
Когда CSS анимация играет, есть три события, которые могут произойти:
- animationstart - происходит после запуска CSS анимации
- animationiteration - возникает, когда CSS анимация повторяется
- animationend - возникает , когда CSS анимация завершена
Поддержка браузеров
Числа в таблице указать первую версию браузера, который полностью поддерживает событие.
Числа следует "webkit" или "moz" указать первую версию , которая работала с префиксом.
Мероприятие | |||||
---|---|---|---|---|---|
animationiteration | 4,0 WebKit | 10,0 | 16,0 5.0 Мос | 4,0 WebKit | 15,0 WebKit 12,1 |
Примечание: Для Chrome, Safari и Opera, используйте префикс webkitAnimationIteration.
Синтаксис
object.addEventListener("webkitAnimationIteration", myScript );
// Code for Chrome, Safari and Opera
object .addEventListener("animationiteration", myScript );
// Standard syntax
Примечание: addEventListener() метод не поддерживается в Internet Explorer 8 и более ранних версий.
Технические подробности
Пузыри: | да |
---|---|
аннулированию: | нет |
Тип события: | AnimationEvent |
DOM Версия: | Уровень 3 События |
Похожие страницы
Учебник CSS: CSS3 Animations
CSS Reference: CSS3 animation Property
CSS Reference: CSS3 animation-iteration-count Property
HTML DOM ссылка: Style animation Property
<Объект Event