CSS3无法反转动画

Question

我有一个问题。

我想播放一个 CSS 动画，然后让用户通过单击一个按钮来还原它。 因为在我未来的项目中会有很多这样的动画，所以我不想为前向动画和后向动画制作关键帧。

既然它存在，我想使用“动画方向：反向”属性，但我遇到了一个问题： 在我以“正常”方向播放动画后，似乎无法使用“反向”属性播放动画。

.expand-bl {
    animation: expand-bl-kf 1s;
    animation-fill-mode: both;
    animation-direction: normal;
}
.collapse-bl {
    animation: expand-bl-kf 1s;
    animation-fill-mode: both;
    animation-direction: reverse;
}

这是为什么呢？ 有人知道解决方法吗？

这里有一个问题： https://jsfiddle.net/armoxo1q/1/

编辑：

我找到了这篇文章： https://css-tricks.com/restart-css-animation/

它表示使用 jquery 或（在 cmets 中）再次删除和附加元素以使用 setTimeout。 从处理的角度来看，我更喜欢 setTimeout，因为浏览器不必分离并重新附加节点 虽然从美学的角度来看我喜欢删除/附加模式，因为使用 setTimeout 你可以看到#container DIV 折叠然后动画的一点闪光

我已将这些方法添加到我的小提琴中

Answer 1

问题是animation-iteration-count默认是1，而你的动画已经完成了那个迭代。

因此，您可以将其增加到2：

.collapse-bl {
    animation: expand-bl-kf 1s;
    animation-fill-mode: both;
    animation-direction: reverse;
    animation-iteration-count: 2;
}

document.getElementById("container").className = "expand-bl";

document.getElementById("container").addEventListener("animationend", function (e) {
  console.log(e)
  if (e.animationName === "expand-bl-kf" && e.target.className === "expand-bl") document.getElementById("close").style.display = "block";
  else if (e.animationName === "expand-bl-kf" && e.target.className === "collapse-bl") document.getElementById("close").style.display = "none";
});

document.getElementById("close").addEventListener("click", function () {
  document.getElementById("container").className = "collapse-bl";
});

body, html {
  margin: 0;
  padding: 0;
}
#close {
  display: none;
  position: absolute;
  left: 10px;
  top: 10px;
  z-index: 999;
}
#stage {
  width:600px;
  height:600px;
  background-color: pink;
}
#container {
  width:300px;
  height:250px;
  background-color: orange;
  position: absolute;
  left: 300px;
  top: 0px;
}
.expand-bl {
  animation: expand-bl-kf 1s;
  animation-fill-mode: both;
  animation-direction: normal;
}
.collapse-bl {
  animation: expand-bl-kf 1s;
  animation-fill-mode: both;
  animation-direction: reverse;
  animation-iteration-count: 2;
}
@keyframes expand-bl-kf {
  from {
    width:300px;
    height:250px;
    left: 300px;
    top: 0px;
  }
  to {
    width:600px;
    height:600px;
    left: 0px;
    top: 0px;
  }
}

<button id="close">close</button>
<div id="stage">
  <div id="container" class="container"></div>
</div>