是否可以使用单个 @keyframes 规则在两个方向上播放动画？

Question

我想使用单个 @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>

Answer 1

这是因为您对悬停时的元素应用了与元素默认状态下的动画相同的动画。

因此该元素已经具有默认方向的动画，但随后您再次反向应用它。但这是行不通的。我真的不知道为什么会这样。但是在一个元素上应用相同的动画两次是行不通的。所以你需要2个不同的关键帧。

您可以使用 reverse 动画或复制现有动画并将其与 direction: reverse

一起使用

在这里阅读更多 restart animation

more info here

another article here

如果您真的只想使用 1 个动画，可以使用 javascript 通过删除和添加 'animate-me' class 来解决。但还是不太理想

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>

是否可以使用单个 @keyframes 规则在两个方向上播放动画？

Is it possible to play an animation in both directions with a single @keyframes rule?

css

animation

transition