如何设置CSS transition多个属性不同速度

作者：袖梨 2026-08-30

transition: all 0.3s ease会强制所有属性共用ease曲线，无法差异化控制；真正实现各属性独立timing-function需用逗号分隔的完整声明，如transform 0.25s ease-out, background-color 0.4s linear 0.1s, opacity 0.3s ease-in。

transition多个属性共用同一timing-function时的覆盖行为

当你写 transition: all 0.3s ease;，所有过渡属性（比如 transform、opacity、background-color）都会强制使用 ease。这不是“分别控制”，而是统一覆盖——哪怕你只想让缩放柔和、颜色线性，它也做不到。

用逗号分隔实现每个属性独立timing-function

真正能给不同属性配不同速度曲线的方式，是把 transition 拆成多个声明，用逗号分隔，且顺序必须严格对应：transition-property、transition-duration、transition-timing-function、transition-delay 四组值一一匹配。

例如：

button {transition-property: transform, background-color, opacity;transition-duration: 0.25s, 0.4s, 0.3s;transition-timing-function: ease-out, linear, ease-in;transition-delay: 0s, 0.1s, 0s;}

这表示：

transform 动画 0.25s，ease-out 结尾减速
background-color 动画 0.4s，linear 匀速
opacity 动画 0.3s，ease-in 开头缓慢

注意：如果某组值数量不一致（比如 property 有 3 个但 timing-function 只写了 2 个），浏览器会循环复用或截断，行为不可靠。

transition简写中混用多个属性+不同timing-function的写法

简写形式也能做到，但必须每组“属性+时长+曲线+延迟”完整写出，再用逗号拼接：

button {transition: transform 0.25s ease-out,background-color 0.4s linear 0.1s,opacity 0.3s ease-in;}

关键点：

每段必须包含至少属性名和时长，timing-function 和 delay 可省略（取默认值）
省略 timing-function 时，该段自动用 ease，不是继承前一段
不要写成 transition: transform 0.25s ease-out, background-color 0.4s; —— 后者缺 curve，会回退到 ease，容易误判

cubic-bezier()在多属性过渡中的实际调试难点

预设关键词（ease、linear等）掩盖了真实曲线差异；一旦你用 cubic-bezier() 给某个属性调手感，比如 transform 0.2s cubic-bezier(0.17, 0.67, 0.83, 0.67)，就很难凭直觉预判它和 background-color 0.3s ease-in 的节奏是否协调。

实操建议：