可将多个 transition 属性合并为一条声明，用逗号分隔各组过渡定义，每组格式为 property duration timing-function delay，需指定时长，推荐显式控制而非滥用 all，并可用 CSS 自定义属性简化维护。
可以将多个 transition 属性合并为一条统一声明，用逗号分隔各组过渡定义，既简洁又可控。
用逗号分隔多组 transition 值
CSS 的 transition 是一个简写属性，支持同时定义多个过渡效果，每组用逗号隔开，格式为：property duration timing-function delay。
transition: background-color 0.3s ease, transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.15s linear;- 每组独立生效，互不影响；例如 hover 时只改
transform，就只触发对应那组过渡 - 注意：不能省略某一项的时长（
duration），否则整组失效
避免重复写相同参数的技巧
如果多个属性想共用相同的持续时间、缓动函数和延迟，可先写通用值，再单独覆盖特殊项：
- 通用过渡：
transition: all 0.25s ease; - 但更推荐显式控制：
transition: color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease; - 不建议滥用
all，容易引发意外过渡（比如 unintentionally animatingheight或font-size）
用 CSS 自定义属性简化维护
在 :root 中定义常用过渡变量，便于全局调整：
立即学习“前端免费学习笔记（深入）”；
:root { --trans-fast: 0.15s ease; --trans-normal: 0.25s ease-out; }button { transition: background-color var(--trans-normal), transform var(--trans-fast); }- 修改一处变量，所有引用位置自动更新，适合设计系统或主题切换
过渡失效的常见排查点
合并后没效果？检查这几个关键细节：
- 确保触发变化的属性确实在 transition 列表中（比如写了
transform却去改margin） - 初始状态和结束状态的值必须可计算（如
opacity: 0 → 1可行，display: none → block不可行） - 不要在同一个选择器里混用简写和单个 transition 属性（如同时写
transition和transition-property，后者可能被覆盖）
