@Jazz75RUS

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

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

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

Давайте опишу пример, div бесконечно двигается слева направо и обратно... при наведении он должен начать двигаться вверх и вниз с той позиции в которой находился в момент ховера, как убираем курсор, он возвращается в первоначальную 0 позицию и снова начинается первая анимация влево и вправо.
  • Вопрос задан
  • 2723 просмотра
Решения вопроса 1
Stalker_RED
@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

Дальше сами разберетесь?
Ответ написан
Пригласить эксперта
Ответы на вопрос 2
Vlad_IT
@Vlad_IT Куратор тега CSS
Front-end разработчик
LenovoId
@LenovoId
I want, women not to get sick
animation-play-state: paused;
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы