animationstartСобытие

Пример

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

var x = document.getElementById("myDIV"); //Код для Chrome, Safari и Opera x.addEventListener("webkitAnimationStart", myStartFunction); //Стандартный синтаксис x.addEventListener("animationstart", myStartFunction);

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

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

Событие animationstart срабатывает, когда начинается воспроизведение CSS-анимации.

Для получения дополнительной информации о CSS-анимациях см. нашCSS3 Animationраздел.

Когда воспроизводится CSS-анимация, происходят следующие три события:

animationstart - срабатывает после начала CSS-анимации
animationiteration- срабатывает, когда CSS-анимация повторяется
animationend- срабатывает после завершения CSS-анимации

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

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

Числа, после которых указано "webkit" или "moz", обозначают номер первой версии, поддерживавшей событие с префиксом.

Event
animationstart	4.0 webkit	10.0	16.0 5.0 moz	4.0 webkit	15.0 webkit 12.1

Примечание:Браузеры Chrome, Safari и Opera используют префикс webkitAnimationEnd.

Синтаксис

object.addEventListener("webkitAnimationStart", myScript);  // Chrome, Safari 与 Opera 语法
object.addEventListener("animationstart", myScript);        // 标准语法

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

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