Событие animationend
Пример
Сделайть что-нибудь с элементом <div>, когда анимация CSS закончилась:
var x = document.getElementById("myDIV");
// Код для Chrome, Safari и Opera
x.addEventListener("webkitAnimationEnd", myEndFunction);
// Стндартный синтаксис
x.addEventListener("animationend", myEndFunction);
Попробуйте сами »
Определение и использование
Событие animationend
происходит, когда анимация CSS завершена.
Для получения дополнительной информации о CSS-анимации смотрите CSS3 Анимации.
Когда воспроизводится анимация CSS, могут произойти три события:
- animationstart - происходит, когда анимация CSS началась
- animationiteration - происходит, когда анимация CSS повторяется
- animationend - происходит, когда анимация CSS завершена
Поддержка браузера
Цифры в таблице указывают на первую версию браузера, которая полностью поддерживает это событие.
Цифры, за которыми следует «webkit» или «moz», указывают первую версию, которая работала с префиксом.
Событие | |||||
---|---|---|---|---|---|
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); // Код для Chrome, Safari и Opera
object.addEventListener("animationend", myScript); // Стандартный синтаксис
Технические подробности
Пузыри: | Да |
---|---|
Отменяемый: | Нет |
Тип события: | Событие анимации |
DOM Версия: | События 3 уровня |
Связанные страницы
CSS Учебник: CSS3 анимации
CSS Справочник: CSS3 Свойство анимации
HTML DOM Справочник: Свойство анимации стиля