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 显式声明。

Java Maven Common

Java Maven 项目审查工作流的通用输入处理。当 Java Maven 项目以 ZIP压缩包或 GitLab 仓库 URL 形式提供且需要...时使用。

下载

• 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 延迟可能和系统点击反馈冲突，需要更谨慎地权衡。