平滑动画停止

Question

当复选框被选中时，div会跳动。当你取消复选框时，div会立即移回初始位置。

是否可能仅使用CSS而不使用JS，平滑地完成最后一次动画迭代并在此之后停止？

#jumping-div {
  width: 100px;
  height: 100px;
  margin-top: 100px;
  background-color: red;
}
@keyframes jump {
  0% {
    transform: scaleY(1) translateY(0);
  }
  50% {
    transform: scaleY(0.8) translateY(-70%);
  }
}
#toggle:checked ~ #jumping-div {
  animation-name: jump;
  animation-duration: 2.0s;
  animation-iteration-count: infinite;
}

<input type="checkbox" id="toggle"><label for="toggle">jump</label>
<div id="jumping-div"></div>

- Pasha

Answer 1

如果没有JS，这是不可能的。 你可以使用CSS来实现动画暂停，只需取消复选框的选中状态即可，重新选中后动画将继续播放：

#toggle:checked ~ #jumping-div {
  animation-play-state:running;
}

#jumping-div {
  animation-play-state:paused;
  animation-name: jump;
  animation-duration: 2.0s;
  animation-iteration-count: infinite;
}

如果您想完成动画，可以使用在此处讨论的带JS的解决方案： 停止CSS动画但让其当前迭代完成

- Marileen