Событие animationend

События DOM AnimationEvent

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

Событие animationend возникает, когда анимация CSS завершается.

Для получения дополнительной информации о анимации CSS обратитесь к нашему Уроки анимации CSS3.

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

Пример

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

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

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

Грамматика

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

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

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

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

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

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

Префикс "webkit" или "moz" после цифр указывает на первую версию, которую необходимо использовать.

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

Руководство HTML DOM:Свойство animation Style

События DOM AnimationEvent