transition-delay 用于设置过渡动画开始前的等待时间，单位必须显式写出，只影响开始时机，不影响持续时间或缓动函数；多个属性可分别设置延迟，需与 transition-duration 配合使用，且不能依赖缓动函数实现延迟效果。
transition-delay 控制过渡何时开始
过渡延迟不是靠“delay属性”实现的，而是通过 transition-delay 这个 CSS 属性设置。它定义的是从触发状态变化（比如 hover、focus）到过渡动画真正开始之间等待的时间。
-
transition-delay的值可以是0s（默认，立即开始）、200ms、1.5s等，单位必须显式写出，不能只写数字 - 它只影响“开始时机”，不影响过渡持续时长或缓动函数；要控制持续时间得用
transition-duration - 多个过渡属性可分别设置延迟，例如：
transition: background-color 0.3s 0.1s, transform 0.4s 0.2s;—— 背景变色在 100ms 后启动，位移在 200ms 后启动 - 如果过渡被快速反复触发（如鼠标快速进出），未完成的延迟可能被中断或重置，行为取决于浏览器实现，不要依赖精确排队
transition-delay 和 transition-timing-function 的配合误区
有人误以为把 ease-in 或 cubic-bezier(0.2, 0, 0.8, 0) 当成“延迟效果”，其实那是缓动曲线，控制的是动画过程中的速度分布，不是等待时间。真正的延迟必须由 transition-delay 显式声明。
-
transition-timing-function再慢，动画也是立刻开始的；而transition-delay: 300ms是实打实等满 300 毫秒才动第一帧 - 若同时设了
transition-delay: 0.5s和transition-timing-function: ease-out，效果是：停顿 500ms → 然后以先快后慢的方式完成整个过渡 - 在动画链中（比如 hover → active → focus），各状态的
transition-delay是独立计算的，不会叠加
JavaScript 动态修改 transition-delay 容易踩的坑
用 JS 改 element.style.transitionDelay = '0.4s' 时，常见问题不是语法错，而是时机和层叠失效。
- 直接改 style 不会覆盖 CSS 中用
!important声明的transition-delay，需检查计算样式是否真被应用 - 如果元素当前没有
transition基础声明（比如只写了transition-property但漏了duration），单设delay无效 - 想让 JS 触发的 class 切换带延迟？确保新 class 的
transition声明完整，且旧状态已脱离伪类（如移出 hover 区域后再加 class） - 调试建议：在 DevTools 的 Styles 面板里，勾选 “Show inherited” 并查看 computed 的
transition-delay是否为预期值，而不是只看 rules
transition-delay 的一致性，以及和 JS 交互节奏的对齐。尤其在移动端 touch 事件中，300ms 延迟可能和系统点击反馈冲突，需要更谨慎地权衡。 
