今天，有在群里看到这样一个问题：有一个动画，一开始静止处于第一帧，只在用户 hover 的时候运行动画，在运行一次后停止，并且停留在最后一帧，使用 CSS 可以完成么?,像是这样：,一个非常有意思的问题，答案是可以的。我们抽取一下其中的关键点：,动画只运行一次，未运行前处于第一帧，运行完后处于最后一帧。,动画通过 hover 驱动，只有用户 hover 元素的时候，动画才进行。,首先，动画只运行一次，未运行前处于第一帧，运行完后处于最后一帧。,这个刚好利用 CSS 动画的 animation-fill-mode: both 即可。,而，animation-fill-mode: both 兼顾了上面两种模式的特点，可以使得动画开始前的样式为动画运行时的第一帧，动画结束后停在最后一帧。,反向利用 animation-play-state 实现 hover 触发动画行进。,而动画通过 hover 驱动，只有用户 hover 元素的时候，动画才进行这一点，利用 animation-play-state 即可。,我们都知道，正常情况下，动画应该是运行状态，那如果我们将动画的默认状态设置为暂停，只有当鼠标点击或者 hover 的时候，才设置其 animation-play-state: running，这样就可以利用 hover 控制动画的行进!,基于上述两点，我们来实现一个有意思的打字动画，做到动画只触发单次，并且只有 hover 的时候动画会运行。,默认情况下，展示这样一个界面：,接下来，我们把鼠标放上去，看看会发生什么：,有意思，完美的实现了上面说的要求 -- 动画通过 hover 驱动，只有用户 hover 元素的时候，动画才进行。,当然，这里还运用了几个小技巧，一并解释下：,借助上面 4 步及搭配我们上文介绍的 animation-fill-mode: both、animation-play-state: paused 的应用，我们就完美的实现了这样一个非常有意思的打字动画。,完整的代码，你可以戳这里 CodePen Demo -- running once animation by hover[1]。,如果你想对 CSS 动画有更深入细致的了解，可以翻看我的这篇文章，对动画的每一个属性都有着十分细致的讲解：深入浅出 CSS 动画[2],OK，本文到此结束，希望本文对你有所帮助 🙂
© 版权声明
文章版权归作者所有，未经允许请勿转载。
">