Как я могу повернуть анимацию после наведения, как переход? - PullRequest
Новая
       30

Как я могу повернуть анимацию после наведения, как переход?

0 голосов
/ 08 июля 2019

CSS-переходы оживляют обратно в предыдущее состояние, следуя правилам перехода в обратном порядке.Но анимации нет.Они просто внезапно возвращаются в исходное состояние (например, когда :hover или класс удаляется).Есть ли способ заставить анимацию вести себя как переходы (как в коде ниже). 

.box {
  width: 50px;
  height: 50px;
}

.box.transition {
  background-color: green;
  transition: 500ms linear all;
}

.box.transition:hover {
  width: 100px;
  height: 100px;
}

.box.animation {
  background-color: red;
  animation-duration: 500ms;
  animation-fill-mode: both;
  animation-timing-function: linear;
}

.box.animation:hover {
  animation-name: zoom;
}

@keyframes zoom {
  to {
    width: 100px;
    height: 100px;
  }
}
<!-- If I "unhover" .box.animation, it goes back to the original state abruptly -->
<div class="box transition"></div>
<div class="box animation"></div>

1 Ответ

0 голосов
/ 08 июля 2019

Анимация как переходы

Да и нет, вы можете заставить их вести себя аналогично, но не идентично, но не с помощью: hover.

Состояние зависания заканчивается, когда вы прекращаете зависание элемента.Поэтому, когда вы перестанете висеть над ним, правило css, которое предназначено для: hover, будет немедленно удалено.

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

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

animation-direction: alternate; будет перебирать анимацию от начала до конца и возвращаться назад.

...