hover 触发的 transition 不生效需检查三点：一是属性不可过渡（如 display、height:auto），应改用 opacity、transform 或 max-height；二是 transition 必须写在默认状态而非 :hover 中；三是默认态与 hover 态的值类型须一致（如 color 不能从 #000 变为 inherit）。
hover 触发的 transition 不生效？检查这三点
最常见的情况是：写了 transition，也写了 :hover，但鼠标移上去没动画。根本原因通常是属性不可过渡或声明位置错误。
-
display、visibility、height（从0到auto）等属性无法触发 CSS 过渡，改用opacity、transform或固定高度 +max-height -
transition必须写在「默认状态」（非 hover）的规则里，而不是只写在:hover中 - 目标属性在默认态和 hover 态的值类型必须一致，比如不能从
color: #000变到color: transparent（可以），但不能从color: #000变到color: inherit（浏览器无法插值）
用 transform + opacity 替代 top/left/margin 动画
直接修改 top、left 或 margin 会触发重排（layout），性能差；而 transform 和 opacity 由合成层处理，更流畅。
button {
opacity: 0.8;
transform: translateY(0);
transition: opacity 0.2s ease, transform 0.2s ease;
}
button:hover {
opacity: 1;
transform: translateY(-2px);
}
- 避免写
transition: all 0.2s—— 它会让所有可动画属性都参与过渡，包括你没想动的，还可能掩盖意外变化 - 多个属性过渡时，用逗号分隔，不要写成空格；每个属性可配独立时长与缓动函数
-
transform: scale(1)和transform: scale(1.05)是安全的，但transform: scale(1) rotate(0deg)与transform: rotate(10deg)不匹配，会导致过渡中断
hover 动画卡顿？可能是硬件加速没开或层级问题
即使用了 transform，某些浏览器（尤其旧版 Safari 或移动端 WebView）仍可能掉帧。加 will-change 或强制提升为合成层能缓解。
a {
transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
will-change: transform;
}
-
will-change: transform告诉浏览器“这个元素即将被变换”，提前分配图层资源；但别滥用，它会增加内存开销 - 如果 hover 后元素被遮挡，检查
z-index是否生效 ——z-index只对定位元素（position为relative、absolute、fixed或sticky）有效 - 在 iOS Safari 上，
:hover默认不触发（触屏设备无“悬停”概念），需加touch-action: manipulation或用@media (hover: hover)做条件判断
伪元素 hover 动画失效？确保父容器可交互
像 ::before、::after 这类伪元素本身不能响应事件，所以 .box::before:hover 是无效的。必须通过父元素的 :hover 控制伪元素样式。
立即学习“前端免费学习笔记（深入）”；
.card {
position: relative;
}
.card::before {
content: '';
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
background: rgba(0,0,0,0.1);
opacity: 0;
transition: opacity 0.3s;
}
.card:hover::before {
opacity: 1;
}
- 伪元素要参与过渡，必须有初始值（如
opacity: 0）和结束值（如opacity: 1），且两者都得显式声明 - 如果伪元素内容依赖
content属性（比如图标字体），content本身不可过渡，只能靠opacity、transform等间接表现“出现”效果 - 部分旧浏览器（IE11）不支持伪元素上的
transition，需降级为 JS 控制 class 切换
