Question

选中复选框后，div正在跳跃。取消选中该复选框后，div会立即移至初始位置。

是否可以顺利完成最后一次动画迭代，然后仅使用没有JS的CSS停止？

＆＃13;

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

＆＃13;

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

＆＃13;

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

平滑动画停止

1 个答案: