События CSS анимации

CSS анимация более гладкая, по сравнению с анимацией на JavaScript, ее быстрее реализовать. Но, в отличие от анимации на JavaScript, в CSS3 анимации нет полного контроля над каждым кадром. НО можно добавить обработчики событий для любого элемента, чтобы определить состояние анимации. Это дает более детальный контроль, например, позволяет проигрывать различные анимации в последовательности.

Типы событий

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

animationstart

Событие вызывается, когда анимация начинается в первый раз.
Для установки обработчика на событие используются только метод addEventListener():

element.addEventListener("animationstart", обработчикСобытия, false);

element.addEventListener("webkitAnimationStart", обработчикСобытия, false);

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

animationiteration

Событие вызывается в начале каждого цикла, кроме первого раза.
Для установки обработчика на событие используются только метод addEventListener():

element.addEventListener("animationiteration", обработчикСобытия, false);

animationend

Событие вызывается, когда анимация завершена, если она вообще заканчивается.
Для установки обработчика на событие используются только метод addEventListener():

element.addEventListener("animationend", обработчикСобытия, false);

Свойства объектов событий

Кроме стандартных свойств и методов, объекты событий содержат два свойства:

animationName: название анимации CSS3.
elapsedTime: время в секундах от начала анимации. Для события animationstart, это свойство всегда возвращает значение "0".

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

Совместимость с браузерами


Да	10,0	16,0	4,0	12,1

Пример

<style>
#anim
 { margin: 25px; width: 530px; height: 150px; padding: 10px;
   background: lightgray; position: relative; margin: 20px; }
#anim.enable
 { -webkit-animation: example  5s ease 3;
    animation: example  5s ease 3;}

@-webkit-keyframes example 
  { from {top: 0px;} to {top: 200px;} }

@keyframes example 
  { from {top: 0px;} to {top: 200px;} }
</style>

<button id="but" onclick="begin()"> Нажмите, чтобы начать анимацию </button>
<div id="anim"></div>

<script type="text/javascript">
var but = document.getElementById('but');
var anim = document.getElementById('anim');
var color = ['orange', 'pink', '#00ffff', 'lightgray'];
var Ind;

// Code for Chrome, Safari and Opera
anim.addEventListener("webkitAnimationStart", funev, false);
anim.addEventListener("webkitAnimationIteration", funev, false);
anim.addEventListener("webkitAnimationEnd", funev, false);

// Standard syntax
anim.addEventListener("animationstart",  funev, false);
anim.addEventListener("animationiteration",  funev, false);
anim.addEventListener("animationend",  funev, false);

function begin() { Ind=0;
  anim.innerHTML='Анимация включена.';
  anim.className='enable';
  but.disabled = true; }

function funev(event) {
  anim.innerHTML += "<br>" + (Ind+1) +
    ". Анимация: " + event.animationName + 
    "; Type: " + event.type +
    "; elapsedTime: " + event.elapsedTime.toFixed(2) + ' секунд';
  if (Ind == color.length) Ind=0;
  anim.style.backgroundColor = color[Ind++];
  if (event.type.toLowerCase().indexOf("end") >= 0)
    {anim.innerHTML += "<br>Анимация отключена.";
     anim.className=''; anim.style.backgroundColor = "lightgray";
     but.disabled = false;
    }
}
</script>