transition-property 与 transition-delay 需按顺序一一配对，多值写法中 delay 仅作用于前一属性；多个 transition 规则叠加时后声明的 property 会完全覆盖前者；伪类中 delay 失效主因是状态过早结束；transform 与 opacity 宜分层控制以避免合成层冲突。
transition-property 和 transition-delay 怎么配对生效
CSS 的 transition 不是整体延迟后统一执行，而是每个属性独立走自己的时序。关键在于：只有显式声明了 transition-property 的属性，才会触发过渡；而 transition-delay 只对它前面紧邻的属性起作用——前提是用空格分隔的多值写法。
常见错误是写成：transition: all 0.3s ease 0.1s;，以为所有属性都延后 0.1s。实际上这个 0.1s 是全局 delay，但 all 会把所有可动画属性都卷进来（比如 color、opacity、transform），其中部分属性可能根本没变，或浏览器优化跳过，导致节奏不可控。
更稳妥的做法是拆开写：
transition-property: background-color, transform; transition-duration: 0.3s, 0.4s; transition-timing-function: ease, cubic-bezier(0.2, 0.8, 0.4, 1); transition-delay: 0s, 0.15s;
这样 background-color 立即开始，transform 延迟 0.15s 启动，互不干扰。
立即学习“前端免费学习笔记（深入）”；
多个 transition 规则叠加时谁生效
当多个 CSS 规则都定义了 transition，浏览器按层叠顺序（cascade）取最后生效的那个完整声明。但注意：transition-property 不会合并，后声明的会完全覆盖前声明的——哪怕只写了一个属性。
例如：
.box { transition: opacity 0.2s; }
.box:hover { transition: transform 0.3s 0.1s; }
结果是：hover 时只有 transform 动，opacity 过渡被彻底丢弃。这不是“追加”，是“替换”。
如果想保留多个属性过渡，必须在 hover 规则里显式重写全部需要的属性：
.box:hover {
transition: opacity 0.2s, transform 0.3s 0.1s;
}
否则就只能靠 JS 手动控制 class 切换节奏，或改用 @keyframes。
transition-delay 在伪类中失效的典型场景
最常踩的坑是：给 :hover 加了 transition-delay，但鼠标快速进出时动画不触发，或者延迟没效果。根本原因是——transition-delay 只在状态变化「开始时」计时，如果状态在 delay 结束前就结束了（比如鼠标移出），整个过渡就被中断清空。
这会导致两种现象：
- 快速划过元素，什么动画都没看到
-
transition-delay: 0.5s写了，但 hover 时间不到 0.5s，就永远等不到动画启动
解决思路不是加更长 delay，而是：
- 用
transition-behavior: allow-discrete;（实验性，兼容性差，不推荐） - 改用
@keyframes+animation，它支持animation-fill-mode: forwards和更可控的触发逻辑 - 或 JS 监听
mouseenter后setTimeout添加 class，确保 delay 由脚本掌控
transform 和 opacity 组合动画为什么不能共用一个 transition 声明
表面上看，transition: transform 0.3s, opacity 0.3s; 没问题。但实际中，transform 和 opacity 的硬件加速行为不同：现代浏览器会对 transform 和 opacity 单独创建合成层（compositing layer），但如果它们在同一个元素上被同时触发，且 timing-function 或 duration 不一致，就容易出现帧率抖动或首帧卡顿。
更关键的是：某些旧版 Safari（≤15.4）和 Android WebView 对多属性 transition 的解析有 bug，会把第二个属性的 duration 错误地套用到第一个属性上。
稳妥做法是分开控制：
.element {
transition-property: transform;
transition-duration: 0.3s;
}
.element.fade {
transition-property: opacity;
transition-duration: 0.25s;
opacity: 0.7;
}
用 class 切换来分阶段触发动画，比堆在一个 transition 声明里更可靠。
真正难控的不是语法，而是浏览器如何调度图层合成与主线程重排——这些细节不会报错，但会让动画看起来“不对劲”。
