妙啊！动画还可以这样控制？
最新回答
弦未尽
2026-10-31 11:47:10
答案是肯定的，通过CSS动画的两个关键特性：
动画只运行一次，开始前为第一帧，结束时为最后一帧，利用CSS动画的属性`animation-fill-mode: both`即可解决。
`animation-fill-mode: both`属性保证动画启动前的样式为动画运行的第一帧，结束时停在最后一帧，完美符合需求。
而要实现仅在用户悬停时动画启动，可以利用`animation-play-state`属性。正常情况下动画运行，通过设置默认状态为`animation-play-state: paused`，鼠标悬停时转为`running`，实现动画仅在用户操作时触发。
基于上述原理，设计一个有趣的打字动画，做到单次动画仅在用户悬停时运行。
动画默认显示界面，用户悬停后动画效果启动，完美实现仅通过悬停触发单次动画。
实现动画效果时，还结合了`animation-fill-mode: both`和`animation-play-state: paused`的巧妙使用，让动画设计更加灵活。
完整代码示例可参考此链接：CodePen Demo -- running once animation by hover
对CSS动画有更深入理解感兴趣？推荐阅读此文章：深入浅出 CSS 动画
本文结束，希望对你有所帮助。如有疑问或建议，欢迎交流。原创文章，欢迎指正。
热门标签
