用left/top+opacity动画会卡顿，因触发重排重绘、CPU压力大；应改用transform+opacity，由GPU加速仅触发复合，配合will-change和正确transition写法可提升性能。
为什么只用 left/top 改位置 + opacity 会卡顿
浏览器对 left、top 这类布局属性的动画触发的是「重排（reflow）+ 重绘（repaint）」，每帧都要计算元素在文档流中的位置，CPU 压力大。而 transform（如 translateX、translateY）和 opacity 是合成层友好属性，能交由 GPU 加速，只触发「复合（compositing）」，帧率更稳。
常见错误现象：transition: left 0.3s, opacity 0.3s 在中低端设备上明显掉帧，滚动时动画暂停，或首次动画延迟。
- 必须把位移逻辑从
left/top挪到transform: translateX()/translateY() -
opacity可以保留，它本身是可硬件加速的属性 - 为确保合成层创建，建议加
will-change: transform, opacity（仅在必要时，避免滥用）
transition 中同时写 transform 和 opacity 的写法细节
不能只写 transition: all 0.3s —— 这会让所有变化都参与过渡，可能误触其他未预期的属性（比如 color 或 font-size），且部分浏览器对 all 的优化较差。
正确写法是显式声明：
立即学习“前端免费学习笔记（深入）”；
.box {
transition: transform 0.3s ease, opacity 0.3s ease;
}
注意点：
- 两个属性共用同一缓动函数（
ease）时可以合并写成transition: transform 0.3s ease, opacity 0.3s ease；如果缓动不同，必须分开写两行（CSS 不支持单条声明里混用不同 timing-function） - 不要写
transition: transform opacity 0.3s—— 缺少逗号会失效 - 起始状态需明确定义
transform: translateX(0) translateY(0)，否则首次动画可能跳变
用 @keyframes 实现更精细控制时的避坑点
当需要分阶段动画（比如先平移再淡入，或位移与透明度非线性同步），@keyframes 更合适。但容易忽略合成上下文问题：
@keyframes slideIn {
from {
opacity: 0;
transform: translateX(-20px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
关键提醒：
- 务必在动画元素上设置
transform: translateX(0)（或任意不影响视觉的初始transform），否则某些浏览器（尤其是 Safari）可能不触发 GPU 合成，导致闪烁或卡顿 - 避免在
@keyframes中混用left和transform—— 浏览器无法将它们合并进同一合成层，会降级回软件渲染 - 如果动画结束后要保持最终状态，记得加
animation-fill-mode: forwards
移动端 iOS Safari 的透明度动画抖动问题
iOS Safari 对 opacity 动画有历史遗留 bug：当元素有 transform 且同时做 opacity 过渡时，可能在动画中短暂出现半像素模糊或闪烁，尤其在 retina 屏上。
实操缓解方案：
- 给元素加
-webkit-backface-visibility: hidden（仅 iOS/Safari 有效） - 或强制开启 3D 上下文：
transform: translateZ(0)，配合opacity使用更稳定 - 慎用
opacity: 0.99类似值 —— iOS 对亚像素透明度处理不稳定，尽量用整数百分比（0、0.3、0.5、1）
最易被忽略的是：即使你没写 translateZ，只要用了 transform，iOS 就可能因层叠上下文判断失误而禁用合成。加一行 transform: translateX(0) translateZ(0) 是低成本高收益的做法。
