transition必须写在默认状态而非:hover中，否则出动画失效；应优先使用transform和opacity等GPU加速属性，避免reflow；需显式声明过渡属性而非all，并注意渐变背景不可直接过渡。
transition 必须写在默认状态，不能只放在 :hover 里
很多悬停动画“进有动画、出没动画”，根本原因是把 transition 错误地只写在 :hover 规则中。浏览器只会对已存在 transition 的元素做属性插值——如果移出时该属性被移除（因为 :hover 规则失效），过渡就中断了。
正确做法是：把 transition 声明在元素的常态样式里，比如 .btn { transition: background-color 0.25s ease-in-out; }。这样无论进入还是离开 :hover，只要 background-color 变化，浏览器都会自动补全双向过渡。
- ❌ 错误：
.btn:hover { background-color: #2a5; transition: 0.25s; } - ✅ 正确：
.btn { background-color: #468; transition: background-color 0.25s ease-in-out; } .btn:hover { background-color: #2a5; } - ⚠️ 注意：
transition不支持display、height（未设初始值时）、font-size等非连续或触发布局重排的属性
优先用 transform 和 opacity，避免触发布局重排
用 transform 移动、缩放，或用 opacity 控制显隐，能走 GPU 加速，帧率稳定；而改 left、width、margin 会强制浏览器重排（reflow），卡顿明显，尤其在低端设备上。
例如按钮悬停放大，应写 transform: scale(1.05)，而不是 width: 110%；文字淡入应靠 opacity，而非 visibility 或 display。
立即学习“前端免费学习笔记（深入）”；
- ✅ 推荐：
transition: transform 0.2s cubic-bezier(0.3,0,0.2,1), opacity 0.2s ease; - ❌ 避免：
transition: width 0.2s, margin-left 0.2s; - ? 小技巧：加
will-change: transform;可提前提示浏览器优化渲染（仅对高频动画元素）
多个属性过渡要显式列出，别用 transition: all
transition: all 0.3s 看似省事，但会把所有可变属性（包括 outline、border-color、box-shadow 甚至焦点 outline）都纳入过渡，容易引发意外抖动或视觉干扰。
明确指定要过渡的属性，既可控又利于性能。颜色+缩放+阴影组合很常见，直接逗号分隔即可：
.card {
background-color: #fff;
transform: scale(1);
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
transition: background-color 0.2s, transform 0.25s, box-shadow 0.2s;
}
.card:hover {
background-color: #f8f9fa;
transform: scale(1.02);
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
- ✅ 显式声明：
transition: color 0.2s, background-color 0.25s, transform 0.3s; - ❌ 慎用：
transition: all 0.3s;—— 特别是在表单控件或带 focus 样式的元素上 - ⚠️ 注意：同一元素若存在多个
transition声明（如媒体查询中覆盖），后定义的会覆盖前一个，需检查 CSS 层叠顺序
渐变背景和复杂属性的过渡限制
浏览器对 background-image（尤其是 linear-gradient()）的过渡支持不一致，部分版本会跳变或完全不生效。这不是 bug，而是规范本身未要求渐变必须可插值。
解决办法不是硬刚，而是绕过限制：用纯色过渡打底，再叠加伪元素模拟渐变动效；或预设两套固定渐变色值，靠 background 整体切换 + 缓动函数控制节奏。
- ✅ 可靠方案：
transition: background-color 0.35s cubic-bezier(0.4, 0, 0.2, 1);+box-shadow增强层次感 - ✅ 替代方案：用
::before伪元素覆盖渐变层，通过opacity或transform控制其进出 - ❌ 不推荐：
transition: background 0.3s;试图过渡整个background: linear-gradient(...)值
all，三者任一都会让动画失真。 
