今天在群里看到这样一个问题：有一个动画，一开始还在第一帧，只有用户悬停时才运行，运行一次就停止，一直停留在最后一帧。使用CSS可以做到吗？像这样：一个非常有趣的问题，答案是肯定的。提一下重点：动画只运行一次，在运行前的第一帧，运行后的最后一帧。动画是由悬停驱动的，只有当用户悬停在元素上时才会发生动画。animation-fill-mode控制每个阶段元素的状态首先，动画只运行一次，在运行前的第一帧，运行后的最后一帧。这只是利用了animation-fill-mode：这两种CSS动画。animation-fill-mode:backwards：动画开始前元素的样式为动画运行时的第一帧，动画结束后的样式恢复为CSS规则设置的样式。animation-fill-mode:forwards：动画开始前元素的样式为CSS规则设置的样式，动画结束后的样式表示为执行时遇到的最后一个关键帧计算出的值（即，它在一帧结束时停止）。而animation-fill-mode:both兼顾了以上两种模式的特点，使得动画开始前的样式在动画运行时为第一帧，在动画结束后停在最后一帧。反向使用animation-play-state实现悬停触发动画进度。动画由悬停驱动，只有当用户悬停在元素上时，动画才会执行此操作，使用animation-play-state。我们都知道在正常情况下，动画应该处于运行状态，那么如果我们将动画的默认状态设置为暂停，只有当鼠标点击或者悬停时，设置它的animation-play-state:running，这样我们可以使用悬停控制动画的进度！基于以上两点，我们来实现一个有趣的打字动画，让动画只触发一次，并且只有鼠标悬停时才会运行动画。
HoverMe-你是猪！
p{position:relative;字体系列：等宽；宽度：26ch；动画：输入3ssteps(15,end)；动画填充模式：两者；动画播放状态：暂停；overflow:hidden;}p:hover{animation-play-state:running;}p::before{position:absolute;内容：””;宽度：4px；顶部：0；底部：0；右：0；动画：闪烁.8s线性无限;}@keyframes闪烁{0%,50%{border-right:4pxsolidtransparent;}50%,100%{border-right:4pxsolid#000;}}@keyframes打字{来自{width:11ch;}到{宽度：26ch；}}默认会显示这样一个界面：接下来，我们把鼠标放在上面看看会发生什么：有趣，完美实现上面提到的需求——动画由悬停驱动，只有当用户点击时，动画才会进行悬停在元素上。当然这里也用到了一些小技巧，一起来说明一下：打字动画使用的是逐帧动画而不是补间动画，主要是利用了CSS动画的step-timing-functionstepeasing功能，即在代码步骤（15，结束）。ch是CSS中的相对单位，表示元素使用的字体中字形“0”的宽度。font-family:monospace代表等宽字体，每个字符的宽度都是一样的，因为我们用的是26ch作为.元素的宽度，文本HoverMe-Youareapig只有26个字符，包括空格，而26ch只是表示该文本的长度。最开始显示的文本Hoverme-countingspaces是11ch宽，最后需要显示整个文本宽度为26ch，中间需要15步的逐帧动画。这里的元素只是和代码一一对应。借助上面4个步骤，加上我们上面介绍的animation-fill-mode:both和animation-play-state:paused的应用，我们就完美的实现了这样一个非常有趣的打字动画。完整代码可以点击这里CodePenDemo——hover运行一次动画[1]。如果你想对CSS动画有更深入细致的了解，可以看我的这篇文章，里面对动画的各个属性都有很详细的解释：简单的CSS动画[2]最后OK，本文到此结束，希望这篇文章对你有所帮助:)参考[1]CodePenDemo--hover运行一次动画：https://codepen.io/Chokcoco/pen/QWQNJyp。[2]简单的CSS动画：https://github.com/chokcoco/iCSS/issues/141。