Можно ли воспроизводить анимацию в обоих направлениях с помощью одного правила @keyframes? - PullRequest
Новая
       24

Можно ли воспроизводить анимацию в обоих направлениях с помощью одного правила @keyframes?

0 голосов
/ 23 сентября 2019

Я хотел бы использовать одно правило @keyframes для анимации элемента из одного состояния в другое, а затем для возврата к исходному состоянию, когда я выполняю действие (с той же анимацией).Я видел, что использование animation-direction: reverse; - это способ воспроизвести анимацию в обратном порядке.Однако, когда я пытаюсь его использовать, переходы на моем элементе исчезают.Если я установлю новый @keyframes с перевернутым состоянием, он будет работать нормально.

Какой смысл animation-direction в этом случае?Я что-то недопонимаю?

Есть ли способ воспроизвести анимацию в обоих направлениях с помощью одного правила @keyframes без потери переходов?Я не могу использовать transition, мне нужно animation.

Вот пример для игры (наведите квадраты): 

div {
  width: 100px;
  height: 100px;
  animation: fade 0.6s ease-in-out forwards;
  margin: 15px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: white;
}

#box-1:hover {
  animation: fade 0.6s ease-in-out forwards;
  animation-direction: reverse;
}

#box-2:hover {
  animation: fadeReverse 0.6s ease-in-out forwards;
}

@keyframes fade {
  0% { background: red; }
  100% { background: blue; }
}

@keyframes fadeReverse {
  0% { background: blue; }
  100% { background: red; }
}
<div id="box-1">:(</div>
<div id="box-2">:)</div>

1 Ответ

1 голос
/ 23 сентября 2019

Это потому, что вы применяете ту же анимацию к элементу при наведении, что и анимация, которая находится в состоянии элемента по умолчанию.

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

Вы можете использовать reverse анимацию или дублировать существующую и использовать ее с direction: reverse

Подробнее здесь перезапустить анимацию

подробнее здесь

еще одна статья здесь

Если вы ДЕЙСТВИТЕЛЬНО хотите использовать только 1 анимацию, это можно решить с помощьюjavascript, удалив и добавив класс «animate-me».Но это все равно не будет идеальным 

div {
  width: 100px;
  height: 100px;
  animation: fade 0.6s ease-in-out forwards;
  margin: 15px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: white;
}

#box-1:hover {
   animation: fade2 0.6s ease-in-out forwards;
  animation-direction: reverse;
}

#box-2:hover {
  animation: fadeReverse 0.6s ease-in-out forwards;
}

@keyframes fade {
  0% { background: red; }
  100% { background: blue; }
}
@keyframes fade2 {
  0% { background: red; }
  100% { background: blue; }
}

@keyframes fadeReverse {
  0% { background: blue; }
  100% { background: red; }
}
<div id="box-1">:(</div>
<div id="box-2">:)</div>
...