CSS :hover 动画不触发的主因是未在默认状态声明 animation，须设为 none 或占位动画；需匹配 animation-fill-mode（如 forwards 保持结束帧）；并排查元素尺寸、pointer-events 及 transition 冲突。
CSS :hover 动画不触发，最常见的原因是 animation 属性只写在 :hover 状态里，而没在元素的默认（初始）状态中定义。浏览器需要知道动画“从哪开始”，否则 hover 时可能无变化或直接跳变。
必须在默认状态声明 animation
哪怕你只想让动画在悬停时播放，也要先在元素的常规样式中设置 animation，哪怕用 none 或一个空动画占位：
- ✅ 正确写法：默认状态设
animation: none;或animation: fade-in 0.3s forwards;（即使不希望初始有动画） - ❌ 错误写法：只在
:hover里写animation: slide-up 0.4s ease;，默认状态完全没提animation
检查 animation-fill-mode 是否匹配预期
如果动画只在 hover 期间运行，但离开后元素“回弹”或卡住，很可能是 animation-fill-mode 设置不当：
- 用
forwards可让动画结束帧保持生效（适合 hover 进入效果） - 用
backwards或both可影响初始状态（需配合animation-delay负值才明显） - 默认是
none，动画结束后样式立即恢复原状
确保触发元素可交互且未被遮挡
有时候动画没反应，和 CSS 本身无关，而是 DOM 问题：
立即学习“前端免费学习笔记（深入）”；
- 元素没有尺寸（比如宽高为 0、或内容为空且未设 padding/min-height）
- 父级设置了
pointer-events: none，或自身有pointer-events: none - 上面覆盖了透明/半透明元素（如伪元素、绝对定位层），拦截了鼠标事件
避免与 transition 混用导致冲突
如果同时写了 transition 和 animation，尤其都作用于同一属性（如 transform、opacity），可能相互干扰：
- 优先使用其中一种方式实现动效，别叠加控制同一属性
- 若必须共存，确保
transition的持续时间、缓动函数不意外覆盖动画行为 - 可临时注释掉
transition测试是否是它引起的异常
