CSS动画在:hover中不生效，是因为必须在默认状态预先定义animation（如none），否则浏览器跳过动画启动；正确做法是默认设animation: none，hover时覆盖为具体动画，或用animation-play-state控制启停。
CSS动画写在 :hover 里不生效，通常是因为动画属性（如 animation）只在悬停时声明，而元素默认状态未定义动画相关基础属性，导致浏览器无法正确触发或过渡动画。关键解决方式是：**必须在元素的默认（非 hover）状态中预先定义 animation，哪怕只是设为 none 或一个空动画**。
为什么 hover 里单独写 animation 不生效？
浏览器对 CSS 动画的触发有隐式要求：若元素初始状态完全没声明 animation（包括 animation-name、animation-duration 等），仅在 :hover 中设置，部分浏览器（尤其是 Chrome 新版本）会跳过动画启动逻辑，直接应用最终样式，造成“无动画”假象。这并非 bug，而是规范中对动画可动画性（animatable）和初始状态一致性的要求。
正确写法：默认状态必须声明 animation
即使你只想在 hover 时播放一次动画，也要在默认状态中“占位”声明 animation。常用做法：
- 默认状态设
animation: none;或animation: initial; - hover 状态覆盖为具体动画，如
animation: slideIn 0.3s ease; - 若需反复触发，推荐用
animation-play-state控制启停（更可靠）
推荐方案：用 animation-play-state 替代重写 animation
比反复切换 animation 值更稳定的方式是固定定义动画，仅控制播放状态：
立即学习“前端免费学习笔记（深入）”；
- 默认状态：
animation: slideIn 0.3s ease; animation-play-state: paused; - hover 状态：
animation-play-state: running; - 这样避免了动画重复注册/销毁，兼容性好，且支持多次悬停触发
额外检查点
如果仍不生效，顺手排查以下常见问题：
- 确认
@keyframes名称拼写与animation-name完全一致（区分大小写） - 检查是否被更高优先级样式（如内联 style 或 !important）意外覆盖
- 确保元素有明确宽高或内容，能被鼠标准确 hover 到（空 div 默认无尺寸）
- 避免在 hover 中同时修改
display（如display: none ↔ block），这会中断动画生命周期
