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