css3 animation on: hover; forzar la animación entera

He creado una animación simple rebote el cual estoy solicitando al estado de un elemento :hover:css3 animation on: hover; forzar la animación entera

@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 trabaja muy bien, con la excepción de que cuando se quita el cursor desde el 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 activada por el estado :hover. Estoy no buscando una solución 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í es un violín para jugar con: http://jsfiddle.net/dwick/vFtfF/

Fuente

2011-10-08 David Wick

Me temo que la única manera de resolver esto es con un poco de javascript, debe agregar la animación como una clase y luego lo elimina cuando termina la animación .

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

$(".box").hover(function(){ 
    $(this).addClass("animated");   
})

http://jsfiddle.net/u7vXT/

Fuente

2011-10-08 15:27:40 Duopixel

tenía la esperanza de evitar javascript, pero pensé que esta era la única manera. –

el nombre del evento agnóstico del navegador debe ser todo en minúscula: animationend – jackocnr

https://developer.mozilla.org/en-US/docs/Web/Events/animationend –

Un truco sencillo hará el trabajo:

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

Ajuste el 'retraso' con un alto valor en el elemento (no: flotar).

Desde: Stackoverflow - Robert McKee

Fuente

2013-05-29 04:45:40 Slake

CSS podría ayudar en algunos casos pero no en todos, a continuación es el código que animará el espaciado entre caracteres tanto en vuelo estacionario y después de la libración.

h1 
 
{ 
 
    -webkit-transition:all 0.3s ease; 
 
} 
 

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

<body> 
 
    <h1>Hello</h1> 
 
</body>

Fuente

2015-02-19 16:19:05

sólo para mejorar la respuesta Duopixel, cuando runnig animitation infinita que tengo que hacer:

$(".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 terminar abruptamente la animación.

Fuente

2015-08-20 23:32:42

¿Qué sucede si quiero detener la animación correctamente cuando elimino el control deslizante? y luego de nuevo comenzar la animación infinita cuando vuelo de nuevo? – Vinay

Puede implementar el evento mouseleave del cuadro, allí puede agregar este código. –

Desarrolló una solución: D ¡Aquí está el violín si ayuda a alguien! http://jsfiddle.net/sSYYE/33/ – Vinay

css3 animation on: hover; forzar la animación entera

Respuesta

Cuestiones relacionadas