答案：通过同时使用 opacity 和 transform 属性并结合 transition，可实现元素透明度与位置的流畅复合动画。具体描述：opacity 控制透明度变化，transform 实现位移等形变，二者均属于合成层属性，由 GPU 加速，避免重排重绘；将两者统一写入 transition（如 transition: opacity 0.3s ease, transform 0.3s ease），可在悬停或类名切换时同步触发动画；相比 top/left，transform 不影响布局且性能更高；常用于按钮悬停、卡片淡入上滑等场景，推荐明确列出过渡属性以提升可控性。
要实现CSS过渡中元素的透明度与位置同时变化，关键在于正确使用 opacity 和 transform 属性，并通过 transition 统一控制它们的动画效果。这种组合既流畅又高效，因为这两个属性都属于浏览器优化过的“合成层”属性，不会触发重排或重绘。
1. 基本语法：opacity 与 transform 同时过渡
将 opacity（控制透明度）和 transform（控制位移、缩放等）放在同一个 transition 中，即可实现两者同步动画：
.element {
opacity: 1;
transform: translateY(0);
transition: opacity 0.3s ease, transform 0.3s ease;
}
.element:hover {
opacity: 0.5;
transform: translateY(-10px);
}
这样在鼠标悬停时，元素会同时向上移动并变半透明，离开时平滑恢复。
2. 使用 transform 结合 translate 和 opacity 的优势
相比使用 top/left 进行位移，transform 更适合动画，原因如下：
立即学习“前端免费学习笔记（深入）”；
- 性能更高：transform 和 opacity 可由 GPU 加速，动画更流畅
- 不脱离文档流：transform 不影响布局，避免页面抖动
- 支持复合动画：可在 transform 中叠加平移、旋转、缩放
3. 统一 transition 写法简化代码
如果多个属性使用相同过渡时间与曲线，可简写为：
.element {
opacity: 1;
transform: translateY(0);
transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}
但建议明确列出属性，避免不必要的动画意外触发。
4. 实际应用场景示例
常用于按钮悬停、卡片浮现、菜单淡入滑出等交互效果：
.card {
opacity: 0;
transform: translateY(20px);
transition: opacity 0.3s, transform 0.3s;
}
.card.visible {
opacity: 1;
transform: translateY(0);
}
通过 JS 添加 .visible 类，实现元素“淡入+上滑”的入场动画。
基本上就这些。只要把 opacity 和 transform 放在 transition 里一起控制，就能实现自然的复合过渡效果，性能好且兼容性强。
