Приостановить анимацию WebKit при зависании

Я пытаюсь сделать анимацию паузой на мыши со следующим:

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

Но он не хочет останавливаться. Кто-нибудь может понять, что я делаю неправильно?

JSFIDDLE

Ответы

Ответ 1

Вместо:

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

использование:

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

Ответ 2

Я вижу, что решение оказалось найдено. Тем не менее, я предлагаю другое легкое решение проблемы приостановки анимации и возврата к началу.

Чтобы "приостановить" и вернуться в исходное состояние анимации, используйте:

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

У меня была анимация, которая меняла цвет шрифта с темноты на свет, и когда я навис над ним с помощью "step-end", анимация приостановилась и мгновенно переключилась на начальный темный цвет, а затем возобновилась при перемещении указателя прочь.

Надеюсь, это поможет другим.: -)