transition必须写在常态样式中，声明具体属性如transform或background-color，配合ease-out等缓动函数；opacity过渡需保持元素在文档流中，避免visibility干扰；transform优先用translate实现gpu加速。
transition必须写在常态样式里，不能只放:hover中
浏览器只在transition声明存在时才做插值计算；一旦:hover状态失效，transition规则就没了，属性变化直接跳变。常见错误是把transition写在:hover里，比如.btn:hover { transform: scale(1.2); transition: 0.2s; }——移出时必然突兀。
正确做法是把transition放在基础选择器中：
.btn {
transform: scale(1);
transition: transform 0.2s ease-out;
}
.btn:hover {
transform: scale(1.2);
}
- transition必须声明具体属性（如
transform），别用all，否则其他未预期的样式变更也会被过渡 - 缓动函数建议用
ease-out或cubic-bezier(.25,.46,.45,.94)，比linear更自然 - 若同时改多个属性（如
transform和opacity），在同一个transition里逗号分隔，不要拆成多条
opacity过渡要小心visibility干扰
opacity能平滑过渡，但visibility不能——它只有visible/hidden两个离散值，浏览器不支持插值。如果在常态里写了visibility: hidden，元素根本不会渲染，:hover也触发不了。
正确组合是：
.fade-box {
opacity: 0;
transition: opacity 0.3s ease-in;
}
.fade-box:hover {
opacity: 1;
}
- 初始
opacity: 0保持元素在文档流中，仍可响应事件（需配合pointer-events: none禁用交互） - 绝对不要在常态加
visibility: hidden，也不要在:hover里加visibility: visible - 若需彻底移除元素，得等
transitionend事件监听opacity变为0后再操作DOM
background-color过渡必须显式声明初始值
transition: background基本无效，因为background是简写属性，浏览器无法对linear-gradient()或混合值做插值。唯一可靠的是background-color，但它要求初始和悬停状态都只动这个属性。
错误写法：button { background: #4a6fa5; transition: background 0.3s; } → 悬停时background: #2c4b7a可能被忽略颜色通道
正确写法：
button {
background-color: #4a6fa5;
transition: background-color 0.25s ease-in-out;
}
button:hover {
background-color: #2c4b7a;
}
- 初始值必须显式写，哪怕用
transparent或rgba(0,0,0,0) - hover里只改
background-color，别碰background-image或整个background - 父容器若有
transform或opacity（尤其iOS Safari），可能静默禁用子元素背景过渡，需临时排查
transform动画优先选translate而非top/left
transform: translate()触发GPU加速，性能远高于top/left这类触发布局重排的属性。而且translate天然支持平滑进出，不需要额外hack。
错误写法：.box { position: relative; top: 0; } .box:hover { top: 20px; transition: top 0.3s; } → 可能抖动、卡顿，尤其在移动端
推荐写法：
.box {
transform: translateY(0);
transition: transform 0.3s cubic-bezier(.25,.46,.45,.94);
}
.box:hover {
transform: translateY(20px);
}
- 别写
transition: position——它完全无效 - 避免在
:hover里切换position类型（如relative→absolute），会重置定位上下文，动画中断 - 如果必须兼容IE11，才考虑
top方案，并加will-change: top提示渲染引擎
transition，只动一个可插值的属性，且确保它的起始值和结束值都是明确、连续、硬件友好的。任何“看起来像动画”的补救（比如伪元素叠加、多层transition嵌套），往往掩盖了根本问题。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
