fotogramas clave de activación CSS3 y jQuery

Question

me escribieron una animación de fotogramas clave:

@-webkit-keyframes cubemove { 
0% {-webkit-transform: translateZ(-194px) rotateY(0deg);} 
20% {-webkit-transform: translateZ(-194px) rotateX(-180deg);} 
40% {-webkit-transform: translateZ(-194px) rotateX(-90deg);} 
60% {-webkit-transform: translateZ(-194px) rotateX(90deg);} 
80% {-webkit-transform: translateZ(-488.5px) rotateY(90deg);} 
90% {-webkit-transform: translateZ(-488.5px) rotateY(-90deg);} 
100% {-webkit-animation-play-state:paused;} 
} 

.cubebox { 
-webkit-animation: cubemove 30s ease-in-out 5s 1 normal; 
} 

Quiero correr esta animación sobre un rectángulo que hice usando el siguiente código HTML y consulta de código:

<figure id="box"> 
<img src="/images/cube/step1.jpg"/> 
<img src="/images/cube/step2.jpg"/> 
<img src="/images/cube/step3.jpg"/> 
<img src="/images/cube/step4.jpg"/> 
<img src="/images/cube/step5.jpg"/> 
<img src="/images/cube/step6.jpg"/> 
</figure> 

<button class="commencer">Start</button> 

<script type="text/javascript"> 
jQuery.noConflict(); 
$(document).ready(function(){ 
    $('.commencer').click(function(){ 
     $('#box').addClass('cubemove'); 
    }); 

    $('.commencer').click(function(){ 
     $(this).removeClass('cubemove'); 
    }); 
}); 

</script> 

Lo es que no pasa nada cuando hago clic en el botón. No soy muy bueno con jquery, así que ese podría ser el problema.

¡Muchas gracias por su ayuda!

Matt

Answer 1

Encontré el problema. Fue un problema de conflicto de consulta. Utilicé el siguiente código y funcionó.

<script type="text/javascript"> 
jQuery.noConflict(); 
jQuery(document).ready(function(){ 
    jQuery(".commencer").click(function(){ 
     jQuery("#box").addClass("cubebox"); 
    }); 
}); 

</script> 

Answer 2

Has añadido eventos de clic para añadir y eliminar tanto la clase al mismo botón. El resultado neto es que el elemento estará en un estado idéntico al que comenzó. Intenta usar para separar los botones para comenzar.

Answer 3

recomiendo que también intenta este plugin jQuery que puede agregar dinámicamente animaciones CSS3 a elementos y un montón de telas adicionales: https://github.com/krazyjakee/jQuery-Keyframes