How to Capture CSS3 Animation Events in JavaScript

By Craig Buckler

As animaes CSS3 so suaves e rpidas de implementar, mas, ao contrrio do JavaScript, voc no tem
controle frame-a-frame. Felizmente, voc pode aplicar manipuladores de eventos a qualquer elemento
para determinar o estado da animao. Isso permite controle fino, como reproduzir animaes
diferentes em sequncia.

Considere esta simples animao CSS3:

#anim.enable
{
-webkit-animation: flash 1s ease 3;
-moz-animation: flash 1s ease 3;
-ms-animation: flash 1s ease 3;
-o-animation: flash 1s ease 3;
animation: flash 1s ease 3;
}
/* animation */
@-webkit-keyframes flash {
50% { opacity: 0; }
}
@-moz-keyframes flash {
50% { opacity: 0; }
}
@-ms-keyframes flash {
50% { opacity: 0; }
}
@-o-keyframes flash {
50% { opacity: 0; }
}
@keyframes flash {
50% { opacity: 0; }
}

Quando a classe "enable" aplicada ao elemento com ID "anim", a animao denominada "flash"
executada trs vezes. Cada iterao dura um segundo durante o qual o elemento desaparece e entra o
outro.

Trs tipos de eventos so disparados quando a animao ocorre:

animationstart - O evento animationstart acionado quando a animao iniciada pela primeira vez.

var anim = document.getElementById("anim");

anim.addEventListener("animationstart", AnimationListener, false);

animationiteration - O evento animationinteration disparado no incio de cada nova iterao de

animao, isto , a cada iterao, exceto a primeira.
anim.addEventListener("animationiteration", AnimationListener, false);

animationend - O evento animationend disparado quando a animao termina.

anim.addEventListener("animationend", AnimationListener, false);

Compatibilidade do navegador

No momento da escrita, Firefox, Chrome, Safari, Opera e IE10 suportam animao CSS3 e os
manipuladores de eventos associados. Alm disso, o Opera, IE10 e os navegadores webkit usam prefixos
e jogam em algumas mudanas de caso para uma boa medida ...

W3C standard Firefox webkit Opera IE10

animationstart animationstart webkitAnimationStart oanimationstart MSAnimationStart

animationiteration animationiteration webkitAnimationIteration oanimationiteration MSAnimationIteration

animationend animationend webkitAnimationEnd oanimationend MSAnimationEnd

A maneira mais fcil em torno do prefixo shenanigans chamar "addEventListener" para todos os
nomes prefixados e no prefixados usando uma funo personalizada:
var pfx = ["webkit", "moz", "MS", "o", ""];
function PrefixedEvent(element, type, callback) {
for (var p = 0; p < pfx.length; p++) {
if (!pfx[p]) type = type.toLowerCase();
element.addEventListener(pfx[p]+type, callback, false);
}
}>code>
Os manipuladores de eventos de vrios navegadores podem agora ser atribudos usando uma nica linha
de cdigo:
// animation listener events
PrefixedEvent(anim, "AnimationStart", AnimationListener);
PrefixedEvent(anim, "AnimationIteration", AnimationListener);
PrefixedEvent(anim, "AnimationEnd", AnimationListener);
 O objeto de evento
No cdigo acima, a funo "AnimationListener" chamada sempre que ocorre um evento de animao.
Um objeto de evento passado como um nico argumento. Alm das propriedades e mtodos padro,
ele tambm fornece:
ema NtoniA : o nome da animao CSS3 (por exemplo, flash)
eim TdpslaE : o tempo em segundos desde que a animao comeou.
Podemos, portanto, detectar quando a animao flash termina, p.

if (e.animationName == "flash" &&

e.type.toLowerCase().indexOf("animationend") >= 0) {
...
}

O cdigo poderia, por exemplo, remover a classe existente ou aplicar outra animao CSS3 em uma
seqncia especfica.