点击查看原文
问题一 如何重播动画
1, 事实上 你无法仅用 CSS 重播现有的 CSS 动画 !!!
2, 通过 JS 我们可以做到这一点 !!!
问题二 如何改变动画速度
1, 直接更改 animation-duration 的值
是的，动画速度变慢了。但看起来仍有问题。当你切换复选框。🐶似乎跳到一个随机的位置，而不是最初的位置。怎么会这样？
W3C :
在动画运行时对动画属性值的更改将应用，就好像动画开始时就具有这些值一样
2, 利用多个动画进行叠加
在此版本中，慢动作可以无缝地进入或退出。也没有使用实验性功能。那么，这是完美的解决方案吗？是和否。
- 齿轮: 有两个
<div>s. 一个是另一个的父元素. 都具有相同的
spin animation 但是 animation-duration 的值不同. 元素的最终状态是两个动画的累积
.
- 挡位: 最开始, 只有一个
<div> 的 animation 状态为 animation running. 另一个
则会 paused (暂停). 当 checkbox 进行切换时, 两个 animation 将会交换其的状态.
虽然成功实现了效果 , 但是此方式局限性很大, 通常不适用于其他类型的动画
3, 使用 JS 计算并设置 animation-delay
基本上，您需要添加一个动画进度跟踪器，然后仔细计算新动画。但是，有时获取正确的 animation-delay
值可能很棘手（但可能）。
4, 使用 JS 直接操作 Animation 对象