正文从这里开始。今天我将介绍一个非常简单的技巧来使用CSS控制动画播放和暂停。很好用，可以用在很多实际场景中。我们先来看一个例子。这个例子是我在浏览Codepen时看到的，非常有趣：这个例子CodePenDemo--CSSBeer![1]上面的整个过程都是由CSS完成的。且不说如何使用CSS来实现上面的一些UI效果。这篇文章主要讲如何只用CSS来控制动画的进度、暂停和开始。拆解需求上面的动画控件的效果是：页面渲染完成后，如果没有任何操作，动画不会启动。只有当鼠标点击元素并触发元素的:active伪类效果时，动画才会开始；当动画到达任意一点时，如果鼠标停止点击，动画就会停止；如果再次点击该元素，动画会从上一帧开始继续播放结束状态，如果动画播放完毕，再次点击不会重复播放，动画状态会保持在动画的最后一帧。需求的解决方案看似复杂，但实现起来其实非常容易，主要是借助伪类：active和动画播放状态animation-play-state。让我们举一个简单的例子，一个移动的球，它从左向右移动。
div{margin:50pxauto;width:100px;height:100px;background:#000;animation:move1slinear;animation-fill-mode:forwards;}@keyframesmove{100%{transform:translate(200px,0)rotate(180deg);}}接下来我们做一个简单的变换，动画默认状态为暂停：div{margin:50pxauto;width:100px;height:100px;background:#000;animation:move1slinear;animation-fill-mode:forwards;+animation-play-state:paused;}只有点击，动画才会运行：body:activediv{animation-play-state:running;}看看效果，为了方便清除点击的过程。在点击的过程中，我还改变了背景颜色（背景颜色的变化表示当前鼠标按下）：CodePenDemo--CSScontrolsanimationprogress[2]综上所述，整个过程其实很简单。了解这个方法后，你可以随意将它添加到任何你想要的动画中，然后抛出一个类似的demo：CodePenDemo——CSS控制动画进度的一个非常有用的技巧[3]，赶快GET吧。最后，本文到此结束，希望对你有所帮助：）更多精彩的CSS技术文章汇总在我的Github——iCSS[4]，持续更新中。欢迎点个星订阅收藏。有什么问题或者建议可以多交流。原创文章文笔有限，知识匮乏。如果文章中有任何不准确的地方，请告诉我。参考资料[1]本例CodePenDemo--CSSBeer!:https://codepen.io/mikegolus/pen/jJzRwJ[2]CodePenDemo--CSS控制动画进度:https://codepen.io/Chokcoco/pen/XGvwjL[3]CodePenDemo--CSS控制动画进度：https://codepen.io/Chokcoco/pen/ZPgxwy[4]Github--iCSS：https://github.com/chokcoco/iCSS