Reiniciar la animación en CSS3: ¿alguna forma mejor que eliminar el elemento?

Solución:

Solo configure el animation propiedad a través de JavaScript para "none" y luego establece un tiempo de espera que cambia la propiedad a "", por lo que vuelve a heredar del CSS.

Demostración para Webkit aquí: http://jsfiddle.net/leaverou/xK6sa/ Sin embargo, tenga en cuenta que en el uso del mundo real, también debe incluir -moz- (al menos).

No es necesario un tiempo de espera, use reflujo para aplicar el cambio:

function reset_animation() {
  var el = document.getElementById('animated');
  el.style.animation = 'none';
  el.offsetHeight; /* trigger reflow */
  el.style.animation = null; 
}

#animated {
  position: absolute;
  width: 50px; height: 50px;
  background-color: black;
  animation: bounce 3s ease-in-out infinite;
}
@keyframes bounce {
  0% { left: 0; }
  50% { left: calc( 100% - 50px ); }
  100% { left: 0; }
}

<div id="animated"></div>
<button onclick="reset_animation()">Reset</button>

Si tiene alguna clase para la animación css3, por ejemplo .parpadear entonces tú puedes removeClass para algún elemento y addClass para este elemento pensamiento setTimeout con 1 milisegundo por clic.

  $("#element").click(function(){
     $(this).removeClass("blink");

     setTimeout(function(){
       $(this).addClass("blink);
    },1 ///it may be only 1 milisecond, it's enough
  });

---

---

Utiliza Nuestro Buscador