Animaciones CSS3: el evento animationstart no se activará al usar la transición:

Dado lo siguiente:

.slide{ transition: all 1s ease 0s; transform: translateX(-100%); } 

y

 document.documentElement.addEventListener('animationstart', function() { alert(1); }, false); 

el evento no se disparará.

Sin embargo, si el CSS es:

 .slide { animation: slide 1s infinite } @keyframes slide { from { transform: translateX(0); } to { transform: translateX(-100px); } } 

Sí dispara.

¿Cómo? Es una animation en ambos casos, sin embargo, en el primer caso no usamos los fotogtwigs key que tienen otras consecuencias negativas.

¿No es esto un error en cómo los browseres han implementado esta característica?

Aquí hay un ejemplo para el primero:

http://jsbin.com/hizoyopimu/1/edit?html,css,js,console,output

Y segundo:

¿Hay algo equivalente?

TL; DR (Respuesta corta):

A partir de ahora no hay ningún evento que se dispare durante el inicio de una transición. Las transiciones siempre ocurren solo cuando se cumple una condición de activación y, por lo tanto, el evento que desencadena la transición puede considerarse, aproximadamente, equivalente al evento de transitionstart .

En el siguiente fragment, he agregado una function definida por el usuario ( transitionStart ) que se llama justo después de .addClass('slide') y esto es algo así como transitionstart .

 /* For Animation Start */ setTimeout(function() { $('.animated').removeClass('hide').addClass('slide'); }, 1000); $('.animated').bind('animationstart webkitAnimationStart', function() { console.log('Animation Started'); }); /* For Transition Start */ setTimeout(function() { $('.animated').removeClass('hide').addClass('slide'); transitionStart(); }, 1000); function transitionStart(){ console.log('Transition Started'); } 
 .element { padding: 10px; background-color: #ccc; width: 100px; height: 100px; } .element.animated.hide { display: none; } .animated.slide { animation: slide 1s infinite } @keyframes slide { from { transform: translateX(0); } to { transform: translateX(-100px); } } .element.transitioned.hide { transform: translateX(-100%); } .transitioned.slide { transition: all 2s ease-in 0s; transform: translateX(200%); } 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <h3>Element with Animation</h3> <div class='element hide animated'> box </div> <h3>Element with Transition</h3> <div class='element hide transitioned'> box </div> 

El siguiente código funciona. Aunque ha especificado el inicio de animation para un oyente, también ha definido que la animation en css es infinita, lo que hará que la alerta se active solo en el primer inicio inicial del ciclo infinito. Si desea detectar la animation en cada ciclo de parada / inicio / repetición: una opción sería repetir la animation con javascript en lugar de css infinito. Espero que esto ayude a tu investigación.

 .slide { animation: slide 1s infinite } @keyframes slide { from { transform: translateX(0); } to { transform: translateX(100px); } } 

JS

 var x = document.querySelector('.slide'); x.addEventListener('animationstart',function(){ alert(1) },false)