17370845950

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 测试是否是它引起的异常