这动画的控制方式真是巧妙独特啊！

本文共计1322个文字，预计阅读时间需要6分钟。

今天，在群里看到一个问题：有一个动画，一开始静止处于第一页，只有用户hover时才运行动画，运行一次后停止，并且停留在最后一页。使用CSS可以实现吗？

今天，有在群里看到这样一个问题：有一个动画，一开始静止处于第一帧，只在用户 hover 的时候运行动画，在运行一次后停止，并且停留在最后一帧，使用 CSS 可以完成么？

像是这样：

一个非常有意思的问题，答案是可以的。我们抽取一下其中的关键点：

1. 动画只运行一次，未运行前处于第一帧，运行完后处于最后一帧
2. 动画通过 hover 驱动，只有用户 hover 元素的时候，动画才进行

animation-fill-mode 控制元素在各个阶段的状态

首先，动画只运行一次，未运行前处于第一帧，运行完后处于最后一帧。

这个刚好利用 CSS 动画的 animation-fill-mode: both 即可。