使用 CSS 控制动画行进

CSS 动画
使用 CSS 控制动画播放与暂停的小技巧。使用好了，可以在很多实际场景得以运用。
先来看个例子：

上面整个过程都是由 CSS 完成。抛开如何用 CSS 实现上述一些 UI 效果。只用 CSS 控制一次动画的行进，暂停与开始。

拆解分析需求

上述动画控制要完成的效果是：

• 页面 render 后，无任何操作，动画不会开始。只有当鼠标对元素进行 click ，触发元素的 :active 伪类效果的时候，动画才开始进行；
• 动画进行到任意时刻，鼠标停止点击，则动画停止；
• 重新对元素进行点击，动画继续从上一帧结束的状态开始
• 如果动画播放完，再点击不会重复播放，动画状态保留在动画的最后一帧

  解决需求

  看着好像挺复杂的，其实实现起来很容易，主要借助了伪类 :active 与动画的播放状态 animation-play-state 。
  以一个运动的小球做一个简单的示例，小球从左运动到右。

  <div></div>

  ```css div { margin: 50px auto; width: 100px; height: 100px; background: #000; animation: move 1s linear; animation-fill-mode: forwards; }

@keyframes move { 100% { transform: translate(200px, 0) rotate(180deg); } }

![2021-05-24-16-39-49-580817.gif](https://cdn.nlark.com/yuque/0/2021/gif/396745/1621845731390-e6e8f5ed-9ab7-4213-ac2c-556f881431e2.gif#clientId=u4234fac7-f750-4&from=ui&id=u6c9b3236&originHeight=140&originWidth=323&originalType=binary&size=26869&status=done&style=shadow&taskId=u78aa44df-6d68-4798-9ef4-057221b6320)<br />接下来，就进行简单的改造，动画的默认状态是暂停的：
```css
div {
    margin: 50px auto;
    width: 100px;
    height: 100px;
    background: #000;
    animation: move 1s linear;
    animation-fill-mode: forwards;
+   animation-play-state: paused;
}

只有通过点击的时候，动画才会运行：

body:active div {
    animation-play-state: running;
}

看看效果，为了方便看清点击的过程，在点击的过程中，改了下背景颜色（背景变色表示当前鼠标按下）：

总结一下

嗯，整个过程其实非常简单。理解了这种方法后，就可以随意加到任何动画中：