Как прекратить проигрывание css анимации при ховере?

Question

[Jazz75RUS]

Привет, подскажите, есть у объекта анимация preserve-3d бесконечная, в спокойном состоянии вращается.. при ховере запускается другая 3d анимация по кейфреймам, соответственно они проигрываются одновременно, как при ховере прекратить анимацию, оставив объект в текущем положении и применить эффект при наведении, а при ауте проиграть анимацию возврата к первоначальной точке и начать заново свободную анимацию?

Возврат я так понимаю делается через transition по продолжительности равный задержке первой анимации - это правильно?

Давайте опишу пример, div бесконечно двигается слева направо и обратно... при наведении он должен начать двигаться вверх и вниз с той позиции в которой находился в момент ховера, как убираем курсор, он возвращается в первоначальную 0 позицию и снова начинается первая анимация влево и вправо.

Answer 1

[Stalker_RED]

.foo {
  width: 180px; height: 80px; background: red;
  animation: rotate 3s ease-in-out infinite;
}


.foo:hover {
  background: green;
  animation-play-state: paused;
}


@keyframes rotate {
  from {transform: rotate(0)}
  to {transform: rotate(360deg)}
}

jsfiddle.net/5npyrtuf

Дальше сами разберетесь?

Comments

[Jazz75RUS]

если честно не совсем.. на ховере висит другая анимация с кефреймами, не совсем понимаю как ее теперь запустить?

[Stalker_RED]

Jazz75RUS, насколько я помню, несколько анимаций можно только через запятую запустить.

[Stalker_RED]

Jazz75RUS, наверое, я неправильно понял чего именно вы добиваетесь.
соберите может свой пример в песочнице?

[Jazz75RUS]

jsfiddle.net/5npyrtuf/9

[Stalker_RED]

Jazz75RUS, интересная штука. Сходу не могу сообразить как именно сделать, возможно получится при помощи rotate3d jsfiddle.net/5npyrtuf/21

Ну или js применить.

[Jazz75RUS]

Stalker_RED, ну видимо придется получать текущее координаты анимации через js и передавать их в начало второй анимации

Answer 2

[Владимир Проскурин]

animation-play-state: paused;
Пример https://jsfiddle.net/atmxqhjk/

Comments

[Jazz75RUS]

тогда вторая анимация тоже не запускается, которая на ховере весит.

[Владимир Проскурин]

Jazz75RUS, я даже не уверен, можно ли так. Ведь стартовая позиция анимации берется из исходного селектора. Вы хотите делать при наведении обратную анимацию? Можете воспользоваться animation-fill-mode: forwards Что-то сложнее наверное через js. Ждите, может коллеги подскажут что. Я уже не знаю.

Answer 3

[Максим]

animation-play-state: paused;