transition-delay 为什么设了没反应
最常见的原因是 transition-delay 只对「触发过渡的属性变化」生效，不是给整个动画加延迟——比如你 hover 时改了 color，但只给 background 设了 transition-delay，那 background 不会动，color 也不会等；必须确保延迟的属性本身也在 transition 列表里。
实操建议：
立即学习“前端免费学习笔记（深入）”；
-
transition要写全：比如transition: background 0.3s ease 0.2s, color 0.3s ease;，其中0.2s是background的延迟，color没写延迟就立即开始 - 不能只写
transition-delay: 0.2s而不配transition-property和transition-duration，否则无效 - 动态 JS 修改样式时，如果先改属性再加 class，浏览器可能合并渲染，导致 delay 失效；稳妥做法是用
setTimeout或getComputedStyle强制重排
transition-delay 在 hover 和 JS 触发时表现不同
hover 是伪类切换，浏览器能明确捕捉到“状态进入”时机；JS 改 class 或 style 是同步操作，容易因渲染队列问题让 delay “跳过”。尤其在快速连续触发时（比如鼠标划过菜单项），delay 可能被忽略或累积。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- hover 场景下，直接写
a:hover { transition-delay: 0.15s; }是安全的 - JS 场景下，避免直接
el.style.opacity = '0'后立刻加 class；推荐用el.classList.add('fade-out')，并在 CSS 里定义.fade-out { opacity: 0; transition: opacity 0.4s ease 0.1s; } - 如果要精确控制多个元素错峰入场，别只靠 delay，配合
animation-delay+@keyframes更可靠
transition-delay 的负值怎么用
负值不是“倒放”，而是让过渡「从中间某一帧开始」。比如 transition-delay: -0.5s 表示：当状态改变时，直接跳到 0.5 秒后该有的样子，再继续完成剩下 0.5 秒的动画（假设总 duration 是 1s）。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 适合做“无缝续播”：前一个动画结束瞬间，用负 delay 接上后一个，视觉更连贯
- 慎用于
opacity等非线性敏感属性，负 delay 可能导致闪现（比如从 1 瞬间跳到 0.5） - 和
transition-timing-function强相关：ease-in 类函数在开头慢，负 delay 会跳过缓慢起步段，显得更突兀
兼容性和性能要注意什么
transition-delay 在所有现代浏览器都支持，包括 IE10+，但 iOS Safari 8–9.2 对负值有渲染 bug，可能完全不触发过渡；另外，它只作用于可过渡的属性（如 transform、opacity），对 display、height（未设具体值时）这类无效。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 避免对
height或width用 delay 做展开动画——改用max-height+ overflow + delay 更稳 - 大量元素同时启用带 delay 的 transition（比如列表项逐个浮现），可能触发频繁重排，用
transform替代top/left位移更省资源 - 服务端渲染（SSR）页面中，初始状态若含 transition 属性，首屏可能意外触发“从无到有”的过渡，需要加
body:not(.js-ready) * { transition: none !important; }控制
事情说清了就结束
