悬停触发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。这多了一层控制，也增加了维护成本。
