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 的节奏是否协调。
实操建议：
- 先统一用
ease或ease-out搭出基础节奏，再逐个替换为贝塞尔调试 - 避免对
width或height用复杂贝塞尔——它们触发重排，卡顿比曲线失配更致命 - 移动端尤其注意：旧版安卓 WebView 对
linear解析不稳定，直接写cubic-bezier(0, 0, 1, 1)更稳妥
不同属性的物理意义不同（位移 vs 颜色 vs 透明度），人眼对它们的“快慢感”敏感度也不同，硬套同一套贝塞尔参数反而破坏一致性。
