web-dev-qa-db-fra.com

Suspendre une animation WebKit en survol

J'essaie d'obtenir une animation pour faire une pause sur la souris avec ce qui suit:

.quote:nth-child(1):hover {
    -webkit-animation-play-state: paused;
    -moz-animation-play-state: paused;
    -o-animation-play-state: paused;
    animation-play-state: paused;
}

Mais il ne veut pas s'arrêter. Quelqu'un peut-il voir ce que je fais mal?

[~ # ~] jsfiddle [~ # ~]

cssanimationcss-animations
26
user2760221

Au lieu de:

.quote:nth-child(1):hover 
{
    -webkit-animation-play-state: paused;
    -moz-animation-play-state: paused;
    -o-animation-play-state: paused;
    animation-play-state: paused;
}

utilisation:

.quote-wrapper:hover .quote 
{
    -webkit-animation-play-state: paused;
    -moz-animation-play-state: paused;
    -o-animation-play-state: paused;
     animation-play-state: paused;
}

[~ # ~] démo [~ # ~] : http://jsfiddle.net/j4Abq/2/

57
tomsullivan1989

Je peux voir qu'une solution semble avoir été trouvée. Cependant, j'offre une autre solution simple au problème de la pause d'une animation ET de la réinitialisation au début.

Pour faire une pause et revenir à l'état initial de l'animation, utilisez:

<selector>:hover {
    animation: step-end;
}

J'avais une animation en cours qui changeait infiniment la couleur de la police du foncé au clair, et quand je l'ai survolé en utilisant `` step-end '', l'animation s'est arrêtée et est instantanément passée à la couleur sombre initiale, puis a repris lorsque le pointeur s'est éloigné.

J'espère que cela peut aider les autres. :-)

6
JohnnyAce