css3 animação em: hover; forçar toda animação

Eu criei uma animação de rejeição simples que estou aplicando ao estado :hover de um 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; } 

A animação funciona bem, com a exceção de que, quando você remove o cursor do elemento, ele pára abruptamente. Existe alguma maneira de forçá-lo a continuar o número de iterações, mesmo que o mouse tenha saído? Basicamente, o que estou procurando aqui é uma animação triggersda pelo estado :hover . Eu não estou procurando uma solução de javascript . Eu não vi de qualquer maneira fazer isso no spec, mas talvez haja uma solução óbvia que eu perdi aqui?

Aqui está um violino para brincar: http://jsfiddle.net/dwick/vFtfF/

Eu tenho medo que a única maneira de resolver isso é com um pouco de javascript, você deve adicionar a animação como uma class e, em seguida, removê-lo quando a animação termina.

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

http://jsfiddle.net/u7vXT/

Um truque simples fará o trabalho:

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

Defina o ‘atraso’ com um valor alto no elemento (não: passe o mouse).

De: Stackoverflow – Robert McKee

apenas para melhorar a resposta do Duopixel, quando runnig animitation infinito eu tenho que fazer:

 $(".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"); }) 

Isso não termina abruptamente a animação.

O CSS pode ajudar em alguns casos, mas não em todos, abaixo está o código que irá animar o espaçamento entre letras tanto em hover quanto em hover.

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

Hello