通过设置 transition 属性可同时为 opacity 和 transform 添加过渡效果，推荐明确列出属性以确保性能与可控性；2. 初始状态应使用如 translateX(0) 或 scale(1) 等可计算值，避免从 none 开始导致过渡失效；3. 可借助 transition-delay 实现错峰动画，增强视觉层次；4. 虽可用 all 简化定义，但易引发意外动画，建议仅在简单场景使用。合理配置可实现自然平滑的交互动效。
要通过 CSS transition 实现 opacity 与 transform 的组合动画效果，关键是正确设置过渡属性和触发状态变化（通常是 :hover 或类切换）。这种组合常用于按钮、卡片等元素的平滑出现、位移或缩放效果。
设置 transition 属性支持多个 CSS 属性
你可以为 opacity 和 transform 同时定义过渡效果。推荐使用简写形式，提升性能并保持简洁。
.box {
opacity: 1;
transform: translateY(0);
transition: opacity 0.3s ease, transform 0.3s ease;
}
.box:hover {
opacity: 0.8;
transform: translateY(-10px);
}
这样鼠标悬停时，透明度和位置会同时平滑变化。
使用 all 简化过渡定义（可选）
如果希望多个属性都具备相同过渡行为，可以使用 all，但需注意可能影响其他无意动画的属性。
立即学习“前端免费学习笔记（深入）”；
示例：.card {
opacity: 0.5;
transform: scale(1);
transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.card:hover {
opacity: 1;
transform: scale(1.05);
}
此方式适合简单交互，但建议明确列出属性以避免意外动画。
确保 transform 基础值可过渡
transform 动画依赖起始和结束状态均为可计算的值。避免从 none 到具体函数的突变（虽然现代浏览器通常能处理），最好始终设置初始状态。
- 初始状态写成
transform: translateX(0);而非none - 使用
scale(1)、rotate(0deg)等明确值
这能保证过渡更稳定，尤其在复杂布局中。
结合 transition-delay 实现错峰动画
若想让 opacity 和 transform 不同时开始，可用 transition-delay 制造层次感。
.item {
opacity: 1;
transform: rotate(0);
transition: opacity 0.3s 0.1s ease, transform 0.3s ease;
}
.item:hover {
opacity: 0.6;
transform: rotate(10deg);
}
这里旋转立即开始，透明度延迟 0.1 秒，形成视觉节奏。
基本上就这些。合理组合 opacity 与 transform 的 transition，能让界面动效更自然。关键点是明确声明属性、设置可过渡的初始值，并根据需要调整时间和延迟。不复杂但容易忽略细节。
