CSS:keyframes — остановить движение элемента?

Question

[Михаил Р.]

Привет!
Создал элементы с keyframes, сделал так, что при наведение на родителя, у ребенка меняется цвет, НО вот и проблема. Цвет-то меняется, все замечательно, но мне надо, что бы он 1 раз поменялся и перестал это делать (при наведенном курсоре). Т.е. как бы "воспроизвелся" лишь раз.
Может кто знает? =)

Answer 1

[Евгений Петров]

Вот так можно останавливать анимацию.
Используем animation-play-state.
А для количества повторов используется animation-iteration-count.

Пример для одноразовой смены фона. Используется animation-fill-mode.

Comments

[Михаил Р.]

Благодарю, но снова возникла проблема...
codepen.io/anon/pen/mJOwvE - сделал, но смена цвета текста доходит лишь до 50% и останавливается, когда должно "проиграть" все 100% и остановится. В чем может быть проблема?

[Евгений Петров]

Я не понимаю из примера, что вы хотите сделать. Попробуйте описать словами алгоритм смены.