悬停触发css动画既可用transition也可用animation，选择取决于效果需求：transition适用于简单状态切换，animation适用于多关键帧复杂动效；常见失效原因是动画名错误、未在:hover中完整声明animation属性或移动端不支持:hover。
悬停触发 CSS 动画必须用 animation 而不是 transition？
不是必须，但容易混淆。真正决定“是否需要动画”或“是否只需过渡”的，是行为类型：transition 适合状态切换（比如颜色渐变、尺寸微调），animation 适合多关键帧、循环、复杂时序（比如弹跳、旋转+缩放）。悬停触发两者都行，选哪个取决于你要的效果。
常见错误是写了 @keyframes 却没在 :hover 里显式声明 animation，结果悬停毫无反应——因为 CSS 动画默认不播放，必须靠属性触发。
-
transition只需在常态规则里声明，悬停改属性值即可自动过渡 -
animation必须在:hover块中写明animation: name 0.3s ease;才会播放 - 若想悬停开始、移开后反向播放，
animation-direction: alternate;+animation-fill-mode: forwards;不够用，得靠 js 或双 keyframes，纯 CSS 很难自然“倒播”
为什么加了 :hover 和 animation 还是不触发？
最常踩的坑是动画名拼错、未定义 @keyframes，或元素本身不可悬停（比如 display: none、pointer-events: none、父级遮挡）。
另一个隐蔽问题是：动画设置了 animation-fill-mode: none（默认值），导致动画一结束就立刻回退到初始状态，看起来像“闪一下就没了”。实际它播了，只是你没留住结果。
立即学习“前端免费学习笔记（深入）”；
- 检查浏览器开发者工具的 Styles 面板，确认
:hover状态被正确激活（伪类高亮） - 确认
@keyframes名称和animation-name完全一致（区分大小写） - 避免在悬停规则里只写
animation-duration，漏掉animation-name—— 这会导致动画无效 - 如果元素有
transform: scale(0)初始态，记得悬停时设为scale(1)，否则可能因尺寸为 0 导致点击区域失效
animation-play-state: paused/running 能替代 :hover 吗？
能，但没必要。用 animation-play-state 需要先让动画在常态下就“已启动但暂停”，再通过悬停切为 running。这多了一层控制，也增加了维护成本。
典型误用是这样写：
.box { animation: slideIn 2s; animation-play-state: paused; } .box:hover { animation-play-state: running; }问题在于：动画已声明，paused 只是暂停，但第一帧未必是你想要的起始态；而且一旦悬停过一次，移开后动画仍停留在最后一帧（除非加 animation-fill-mode: backwards;），体验不干净。
- 纯悬停触发动画，直接用
:hover { animation: ... }更直观、可控 -
animation-play-state更适合配合 JS 控制播放/暂停（比如视频封面动效） - 若真要用它，记得初始化时加
animation-fill-mode: backwards;，否则悬停前元素可能显示异常
移动端悬停（:hover）失效怎么办？
手机和平板没有“悬停”概念，:hover 在触摸设备上行为不一致：ios safari 可能延迟触发、android chrome 可能完全忽略，或只在模拟鼠标时偶然生效。
这不是 bug，是规范行为。W3C 明确指出 :hover 在无指针设备上是“可选实现”，不能依赖。
- 不要用
:hover做关键交互（比如展开菜单、显示操作按钮） - 若仅作视觉增强（比如按钮轻微上浮），可保留
:hover，同时用:active补充触摸反馈 - 真正需要悬停效果的场景（如工具提示），必须用 JS 监听
touchstart+click模拟，或改用点击展开 - 测试时务必在真机上验证，DevTools 的“Toggle device toolbar”模拟不够准
很多开发者卡在“写了却不动”，其实核心就两点：动画名对不上，或者忘了在 :hover 里把 animation 属性写全。移动端那块最容易被忽略——不是代码错，是设备根本不认这个伪类。