如何将多个CSS过渡合并成一个统一的transition声明？

什么是 CSS 过渡？

CSS 过渡是一种让元素在状态变化时平滑过渡的效果。通过定义要过渡的属性、持续时间、缓动函数和延迟，能够在元素尺寸、颜色、位置等变化过程中呈现自然、流畅的视觉体验。说起来，

常见痛点的观点是。为什么要把多个 transition 合并成一条声明？

• 代码冗余：每个属性单独写一条 transition会导致样式表膨胀，维护成本上升。
• 易出错：忘记为新加的属性补全对应的时长或缓动函数，往往出现不一致的动画效果。
• 性能隐患：浏览器需要解析多条独立声明。会增加计算负担，影响渲染效率。
• 意外动画：使用 transition: all; 虽然省事，但会把不该动画的属性也带入。导致难以预料的页面闪烁或抖动。

合并多个过渡的标准写法

使用逗号分隔每个属性的完整定义，一条 transition 声明即可覆盖所有需要动画的属性。

transition: property1 duration1 timing-function1 delay1。property2 duration2 timing-function2 delay2,...;

说明：

• property：要进行过渡的 CSS 属性。
• duration：过渡所需时间。