CSS hover动画不触发的主因是transition未在默认状态声明，且需确保属性可过渡、无样式覆盖、避免布局触发。正确做法是在默认状态设transition和初始值，优先用transform/opacity等高性能属性。
CSS hover 动画不触发，最常见的原因是动画属性（如 transition 或 @keyframes）被错误地只写在 :hover 伪类里，而初始状态缺少必要样式或过渡声明。
动画必须定义在「默认状态」上
Transition 不是“悬停时开始动画”，而是“当属性值变化时，平滑过渡”。如果默认状态没设初始值、没写 transition，浏览器就不知道该从哪变到哪，自然不触发。
- ✅ 正确：在元素默认选择器中声明
transition和初始样式 - ❌ 错误：只在
:hover里写transition或只改属性却不设初始态
确保 hover 前后有可过渡的属性变化
不是所有 CSS 属性都能被 transition。例如 display、height（从 0 到 auto）、font-size（若默认是 inherit 或未明确设置）可能失效。
- 优先使用可过渡属性：color、opacity、transform、background-color、width/height（需固定值，非 auto）
- 用
transform: scale(1)→scale(1.1)比直接改width更可靠 - 避免依赖
auto值；高度变化可用max-height配合足够大的初始值模拟
检查是否被其他样式覆盖或禁用
hover 动画失效也可能是样式被覆盖、指针事件拦截，或元素本身不可交互。
立即学习“前端免费学习笔记（深入）”；
- 确认元素有
cursor: pointer且未被pointer-events: none禁用 - 检查父级是否有
overflow: hidden或transform导致堆叠上下文异常，遮挡 hover 区域 - 用浏览器开发者工具「Styles」面板验证：悬停时是否真的应用了 hover 样式？transition 是否生效？
动画卡顿或一闪而过？留意重排与性能
即使语法正确，用 top/left、width/height 触发 layout，或频繁读写 offsetTop 等，会导致动画掉帧甚至不触发。
- 用
transform+opacity实现动画，它们只触发合成（composite），性能最优 - 避免在 hover 中动态修改 class 再触发动画——应提前定义好状态，靠 class 切换驱动
- 对复杂动画，考虑用
@keyframes+animation替代 transition，控制更精确
