animación css3 en: hover; fuerza toda la animación

Creé una animación de rebote simple que estoy aplicando al :hover estado de :hover de un elemento:

 @keyframes bounce { 0% { top: 0; animation-timing-function: ease-out; } 17% { top: 15px; animation-timing-function: ease-in; } 34% { top: 0; animation-timing-function: ease-out; } 51% { top: 8px; animation-timing-function: ease-in; } 68% { top: 0px; animation-timing-function: ease-out; } 85% { top: 3px; animation-timing-function: ease-in; } 100% { top: 0; } } .box:hover { animation: bounce 1s; } 

La animación funciona bien, con la excepción de que cuando quita el cursor del elemento, se detiene bruscamente. ¿Hay alguna forma de obligarlo a continuar el número de iteraciones establecido incluso si el mouse ha salido? Básicamente, lo que estoy buscando aquí es una animación desencadenada por el :hover estado de :hover . No estoy buscando una solución de javascript . No he visto de todos modos hacer esto en la especificación, pero tal vez haya una solución obvia que he echado de menos aquí.

Aquí hay un violín con el que jugar: http://jsfiddle.net/dwick/vFtfF/

Me temo que la única forma de resolver esto es con un poco de javascript, debes agregar la animación como una clase y luego eliminarla cuando la animación termine.

 $(".box").bind("webkitAnimationEnd mozAnimationEnd animationend", function(){ $(this).removeClass("animated") }) $(".box").hover(function(){ $(this).addClass("animated"); }) 

http://jsfiddle.net/u7vXT/

Un truco simple hará el trabajo:

 -webkit-animation:swing 3600ms ease-in-out 6000s; -webkit-transform-origin:top; 

Establezca el ‘retraso’ con un valor alto en el elemento (no: hover).

De: Stackoverflow – Robert McKee

solo para mejorar la respuesta de Duopixel, cuando ejecute la animación infinita, tengo que hacer lo siguiente:

 $(".box").css("animation-iteration-count", "1"); $(".box").bind("webkitAnimationEnd mozAnimationEnd animationEnd", function(){ $(this).removeClass("animated") }) $(".box").hover(function(){ $(".box").css("animation-iteration-count", "infinite"); $(this).addClass("animated"); }) 

Esto simplemente no termina abruptamente la animación.

CSS puede ayudar en algunos casos, pero no en todos, a continuación se muestra el código que animará el espaciado de letras tanto en el vuelo estacionario como después del vuelo estacionario.

 h1 { -webkit-transition:all 0.3s ease; } h1:hover { -webkit-transition:all 0.3s ease; letter-spacing:3px; } 
  

Hello