css - texto - hacer parpadear una imagen en html

Poner en pausa una animación de WebKit en vuelo estacionario

Question

Estoy tratando de hacer que una animación se detenga al pasar el mouse con lo siguiente:

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

Pero no quiere hacer una pausa. ¿Alguien puede ver lo que estoy haciendo mal?

JSFIDDLE

Answer 1

En lugar 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;
}

utilizar:

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

DEMO : http://jsfiddle.net/j4Abq/2/

Answer 2

Veo que parece que se encontró una solución. Sin embargo, ofrezco otra solución fácil al problema de detener una animación Y reiniciarla al comienzo.

Para ''pausar'' y volver al estado inicial de la animación, use:

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

Tenía una animación ejecutándose que cambiaba infinitamente el color de la fuente de oscuro a claro, y cuando me movía sobre ella usando ''step-end'', la animación se detenía y cambiaba instantáneamente al color oscuro inicial, luego se reanudaba cuando el puntero se alejaba.

Espero que esto ayude a otros. :-)