动画不平滑主因是渲染性能与布局重排，应启用硬件加速（transform: translateZ(0)、will-change）、用transform替代left/top、统一animation-timing-function，并避免强制回流。
在使用 CSS 的 animation-opacity 和 animation-transform 组合实现元素透明度与位置变化时，如果动画看起来不平滑，通常不是因为属性本身的问题，而是由渲染性能、动画触发方式或浏览器优化机制导致的。以下是常见原因及解决方法。
启用硬件加速提升动画流畅度
浏览器默认使用软件渲染处理大多数动画，但在涉及 opacity 和 transform 时，可以通过开启硬件加速（GPU 渲染）显著提升流畅性。
建议对动画元素添加以下样式：transform: translateZ(0);will-change: opacity, transform;backface-visibility: hidden;
这些属性能提示浏览器提前将元素提升为独立图层，交由 GPU 处理，减少重绘和重排开销。
使用 transform 而非 left/top 控制位置
如果动画中使用 left 或 top 改变元素位置，会触发频繁的布局重计算（reflow），导致卡顿。
立即学习“前端免费学习笔记（深入）”；
应始终用transform: translateY() 或 translateX() 替代：
- ❌
left: 100px;— 触发 reflow - ✅
transform: translateX(100px);— 合成阶段处理，更流畅
结合 opacity 动画时，两者都属于合成属性，能被高效合并处理。
确保 animation-timing-function 一致且合理
opacity 和 transform 若使用不同的缓动函数（如一个用 ease，一个用 linear），可能导致视觉上的不同步感。
建议统一设置：animation: slide-fade 0.5s ease-in-out;
并在关键帧中同时控制两个属性：
@keyframes slide-fade {
from {
opacity: 0;
transform: translateY(-20px) scale(0.95);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
这样浏览器能将动画作为一个整体优化。
避免频繁触发重排或强制同步布局
JavaScript 中读取 offsetTop、getBoundingClientRect() 等布局属性可能强制浏览器提前完成动画渲染，破坏流畅性。
- 使用
requestAnimationFrame对齐渲染周期 - 避免在动画过程中读写交替的“强制回流”操作
基本上就这些。只要正确使用 transform、开启图层提升、统一动画曲线，opacity 与 transform 的组合动画完全可以做到丝般顺滑。
