应分别设置 opacity 和 transform 的过渡。通过 transition: opacity 0.3s ease, transform 0.5s cubic-bezier(0.2, 0, 0.1, 1); 独立控制两者的时间和缓动，避免动画卡顿或不同步，提升流畅性与性能。
当使用 CSS 同时对元素的透明度（opacity）和位置（transform）做过渡时，如果只用一个 transition 属性统一设置，可能会出现动画不流畅、卡顿或不同步的问题。这是因为 opacity 和 transform 的变化节奏可能被相同的过渡时间函数影响，而它们实际需要不同的控制方式。
解决办法是：分别针对 opacity 和 transform 设置独立的过渡属性，即使用 transition-property 单独控制每个属性的过渡行为。
使用 transition-opacity 和 transition-transform 组合
CSS 并没有直接叫 transition-opacity 或 transition-transform 的属性，但你可以通过 transition 的子属性来实现类似效果：
.element {
opacity: 0;
transform: translateY(20px);
transition: opacity 0.3s ease, transform 0.5s cubic-bezier(0.2, 0, 0.1, 1);
}
.element:hover {
opacity: 1;
transform: translateY(0);
}
这样写的好处是：
立即学习“前端免费学习笔记（深入）”；
- 可以为 opacity 设置较快的淡入淡出（如 0.3s），视觉响应更灵敏
- 为 transform 设置稍慢且有弹性的缓动函数（如
cubic-bezier），让位移动画更自然 - 两个过渡独立运行，互不影响，避免“拖影”或“跳帧”感
提升动画性能的关键点
除了拆分过渡，还要注意以下几点来确保动画顺滑：
- 始终使用 transform 而不是
top/left来做位移，因为 transform 是 GPU 加速的 - 避免在过渡中修改触发重排的属性（如 width、height、margin）
- 给需要动画的元素添加
will-change: opacity, transform;可提前优化渲染层
.element {
opacity: 0;
transform: translateY(20px);
will-change: opacity, transform;
transition:
opacity 0.3s ease-out,
transform 0.5s cubic-bezier(0.2, 0, 0.1, 1);
}
.element:is(:hover, :focus) {
opacity: 1;
transform: translateY(0);
}
何时需要合并？何时要拆分？
如果你希望所有属性以相同速度和节奏变化，比如简单的 hover 显隐+位移，可以继续用单一 transition。但只要你想让不同属性有不同的过渡时间或缓动效果，就必须拆开写。
拆分写法不仅更灵活，也更符合现代 CSS 动画的最佳实践。
基本上就这些，不复杂但容易忽略。
