Анимации дают много возможностей, но нередко бывает необходимо добавить взаимодействие или задать определенную последовательность ключевых кадров, которые будут воспроизведены один за другим. Например, анимация может запускаться в ответ на нажатии клавиши или движение мыши.

Типы событий 

Анимированный элемент вызывает событие трех типов:

• animationstart — событие вызывается, когда анимация начинается в первый раз.
• animationiteration — событие вызывается в начале каждого цикла, кроме первого раза.
• animationend — событие вызывается, когда анимация завершена, если она вообще заканчивается.

Поддержка браузерами 

Эти три типа событий поддерживаются браузерами Firefox, Internet Explorer от версии 10 и Opera версии 12.

К сожалению, браузерам Chrome, Safari и Opera от версии 15 требуется приставка производителя webkit, а также запись в стиле ВерблюжьегоРегистра: webkitAnimationStart, webkitAnimationIteration и webkitAnimationEnd.

Таким образом, нужно задать обработчики событий и для обоих групп браузеров:

// анимируемый элемент
var anim = document.getElementById("myelement");

// обработчики событий для браузеров на движке Webkit
anim.addEventListener("webkitAnimationStart", AnimationListener);
anim.addEventListener("webkitAnimationIteration", AnimationListener);
anim.addEventListener("webkitAnimationEnd", AnimationListener);
// стандартные обработчики событий
anim.addEventListener("animationstart", AnimationListener);
anim.addEventListener("animationiteration", AnimationListener);
anim.addEventListener("animationend", AnimationListener); 

Объект события 

В примере кода выше обработчик событий AnimationListener вызывается каждый раз, когда происходит событие анимации. Объект события передается как одиночное значение. Кроме стандартных свойств и методов, он также содержит:

• animationName: название анимации CSS3.
• elapsedTime: время в секундах от начала анимации.

Свойства с этими же названиями доступны во всех браузерах.

Т.е., мы можем предпринять соответствующие действия, например, когда анимация под названием «flash» (вспышка) заканчивается для элемента с идентификатором «myelement»:

function AnimationListener(e) {
    var
        t = e.target,
        name = e.animationName,
        end = (e.type.toLowerCase().indexOf("animationend") >= 0);
    if (end && name == "flash" && t.id == "myelement") {
        // do something
    }
} 

Посмотрите демонстрацию работы событий анимации.

На странице с демонстрацией работы находится кнопка. При нажатии на кнопку класс под названием «enable» (включено) будет переключен, что запустит анимацию под названием «flash».  Название анимации, тип и время от начала анимации будут показаны в консоли, когда вызывается событие анимации. Когда анимация заканчивается, класс под названием «enable» у кнопки удаляется, чтобы ее снова можно было нажать.

Если вы изучили все уроки этих серий, Вы узнали все о переходах и анимациях CSS3.

Автор урока Craig Buckler

Перевод — Дежурка

Смотрите также:

• Цикл уроков об анимациях CSS3. Часть 1. Основы. Что такое анимации?
• Цикл уроков об анимации CSS3. Часть 2: Основы свойств анимаций
• Цикл уроков об анимациях CSS3. Часть 3. Продвинутые эффекты анимации