今天要介绍一种很简单的使用 CSS 控制动画播放与暂停的小技巧。 使用好了,可以在很多实际场景得以运用。 我们先来看个例子,本例子是我在闲逛 Codepen 时看到了,很有意思: 本例子,CodePen: https://codepen.io/mikegolus/pen/jJzRwJ 上面整个过程都是由 CSS 完成。抛开如何用 CSS 实现上述一些 UI 效果。本文主要讲的是如何只用 CSS 控制一次动画的行进,暂停与开始。 拆解分析需求 上述动画控制要完成的效果是: 页面 render 后,无任何操作,动画不会开始。只有当鼠标对元素进行 click ,触发元素的