Приостановка WebKit анимацию на парении

Я пытаюсь получить анимацию, чтобы сделать паузу на мыши над следующим:Приостановка 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

источник

2013-11-18 user2760221

Вместо:

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

источник

2013-11-18 16:43:10 tomsullivan1989

Спасибо Том. Это работает почти идеально. Проблема, которую я нахожу, заключается в том, что если я не позволяю каждому циклу цитат до наведения/приостановки, кажется, испортит анимацию. Я пробовал перемещать команду наведения (выстрел в темноте), но это не помогает. Есть идеи? – user2760221

Это просто приостановит анимацию в любом состоянии, в котором она находится, я не уверен, что вы могли бы сделать, чтобы изменить это. Может быть, попробуйте расспросить его как новый вопрос? Удачи. – tomsullivan1989

Спасибо Том! Это, похоже, устранило проблему. – user2760221

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

Для того, чтобы «пауза» и вернуться в исходное состояние анимации, использование:

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

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

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

источник

2017-05-15 12:35:18 JohnnyAce

Приостановка WebKit анимацию на парении

ответ

Смежные вопросы