transition-property 和 transition-duration 必须一一对应，多属性过渡需用逗号分隔完整组（属性+时长+缓动+延迟），避免 all 覆盖、漏写时长或 delay 不一致导致失效。
transition-property 和 transition-duration 必须一一对应
当给多个 CSS 属性设置不同过渡时长，比如 transform 要 0.3s、opacity 要 0.1s，直接写 transition: transform 0.3s, opacity 0.1s 是无效的——浏览器会忽略整个声明，或只应用最后一个合法项（取决于解析逻辑）。真正生效的方式是让每个属性和它的时长、缓动、延迟严格配对。
- 用逗号分隔多组完整定义：
transition: transform 0.3s ease, opacity 0.1s linear - 顺序无关，但必须成组：每组含「属性名 + 时长 + 可选缓动 + 可选延迟」
- 漏掉时长会导致该组失效（例如
transform 0.3s, opacity中opacity那组无时长，不触发过渡）
避免用 all 或简写值覆盖单独控制
如果全局写了 transition: all 0.2s，后面再加 transition: transform 0.3s，后者会完全替换前者——opacity 等其他属性就失去过渡了。这不是叠加，而是声明覆盖。
- 不要混用
all和具体属性，尤其在组件复用场景下容易踩坑 - 优先用明确属性列表，哪怕写长一点：
transition: transform 0.3s, opacity 0.1s, background-color 0.2s - 若需动态切换，用 CSS 自定义属性 +
transition绑定更可控，例如：transition: transform var(--t-transform, 0.3s), opacity var(--t-opacity, 0.1s)
transition-delay 会影响同步感知，但不解决本质不同步
即使所有属性过渡时长相同，视觉上仍可能“不同步”，常见原因是 transition-delay 设置不一致，或初始状态未预设（比如 opacity 从 0 开始但没提前声明，导致首次进入时无过渡）。
- 检查是否无意设置了不同
transition-delay，例如transform 0.3s 0.1svsopacity 0.1s 0s - 确保起始状态显式存在：如果元素默认
opacity: 1，但 hover 时设为0，就要确认正常态已声明opacity，否则过渡可能从隐式 1→0 变成 0→0（无变化） - 用 DevTools 的动画检查器（Chrome 的 Rendering → Paint Flashing + Animations tab）可直观看到各属性实际触发时间和持续时间
/* 正确示例：三属性各自独立时长 */
.card {
opacity: 1;
transform: translateY(0);
background-color: #fff;
transition:
transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94),
opacity 0.12s linear,
background-color 0.2s ease-out;
}
.card:hover {
opacity: 0.8;
transform: translateY(-4px);
background-color: #f8f9fa;
}不同步问题多数不是浏览器 bug，而是 transition 声明没对齐属性粒度。最易被忽略的是：改了一个属性的时长，却忘了同步更新它所属的整组声明——尤其是多人协作时，有人动了 transform 时长，有人改了 color 缓动，最后拼在一起就只剩一半生效。
立即学习“前端免费学习笔记（深入）”；
