Pause a WebKit animation on hover

animation, css, css-animations

Solution

Instead of:

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

use:

.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/

Problem

I'm trying to get an animation to pause on mouse over with the following: ``` .quote:nth-child(1):hover { -webkit-animation-play-state: paused; -moz-animation-play-state: paused; -o-animation-play-state: paused; animation-play-state: paused; } ``` But it does not want to pause. Can anybody see what I'm doing wrong? JSFIDDLE

Original source