流畅的动画停止

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>

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;
}

如果您想完成动画，您可以使用此处讨论的 WITH JS 解决方案： Stopping a CSS animation but letting its current iteration finish

流畅的动画停止

Smooth animation stop

css

animation

keyframe