transition-delay 必须与 transition-property、transition-duration 同时使用才生效；单独设置无效。表格元素需用 :nth-child() 或 CSS 变量实现逐行/列延迟动画，避免负值及不支持过渡的属性。
transition-delay 单独写在表格元素上根本不会动
直接给 <table> 或 <td> 加 transition-delay: 0.5s 没用。浏览器根本不启动过渡流程——它连「要过渡哪个属性、花多久」都不知道。transition-delay 不是开关，而是过渡链里的一个环节，必须和 transition-property、transition-duration 同时存在才生效。
常见错误是：只改了 td 的 background-color，却忘了配 transition 全套。结果鼠标悬停后颜色瞬间切换，毫无延迟感。
- ✅ 正确写法（简写）：
td { transition: background-color 0.3s ease 0.5s; } - ✅ 正确写法（拆开）：
td { transition-property: background-color; transition-duration: 0.3s; transition-delay: 0.5s; } - ❌ 错误写法：
td { transition-delay: 0.5s; }（孤立声明，无 property、无 duration）
表格单元格逐行/逐列延迟动画怎么写
想让表格每一行 <tr> 或每个单元格 <td> 按顺序延迟入场？不能靠一个全局 transition-delay，得用 CSS 选择器 + 递增数值。关键是利用 :nth-child() 动态生成不同延迟值。
例如让第 1 行延迟 0.1s、第 2 行 0.2s、第 3 行 0.3s：
立即学习“前端免费学习笔记（深入）”；
table tr:nth-child(1) td {
transition: transform 0.2s ease 0.1s;
}
table tr:nth-child(2) td {
transition: transform 0.2s ease 0.2s;
}
table tr:nth-child(3) td {
transition: transform 0.2s ease 0.3s;
}更简洁的写法（CSS 自定义属性 + 计算）：
table tr {
--delay: calc((var(--i) - 1) * 0.1s);
}
table tr:nth-child(1) { --i: 1; }
table tr:nth-child(2) { --i: 2; }
table tr:nth-child(3) { --i: 3; }
table tr td {
transition: transform 0.2s ease var(--delay);
}- ⚠️ 注意：表格元素默认不支持
transform触发硬件加速，如果动画卡顿，可加transform: translateZ(0)强制 GPU 渲染 - ⚠️
width/height这类影响布局的属性过渡性能差，优先用transform或opacity
JS 动态控制表格行延迟时容易失效
用 JS 给 <tr> 设置 el.style.transitionDelay = '0.4s' 后立刻改 className 或 style.opacity，大概率没延迟效果——浏览器还在跑上一次的过渡状态，新 delay 被忽略。
安全做法是先清空过渡、强制重排、再设完整值：
row.style.transition = 'none'; row.offsetHeight; // 触发重排，清掉旧过渡 row.style.transition = 'opacity 0.2s ease 0.4s'; row.style.opacity = '0.8';
- ✅ 推荐方案：用 CSS 自定义属性统一控制延迟，JS 只改变量值，避免内联样式冲突
tr { transition: opacity 0.2s ease var(--row-delay, 0s); }row.style.setProperty('--row-delay', '0.6s'); - ❌ 避免在 hover 动画进行中反复调用
transitionDelay修改——浏览器可能跳过中间帧，只响应最后一次
transition-delay 为负值会直接跳过动画
写 transition-delay: -0.3s 不是“提前 0.3 秒开始”，而是让动画从第 0.3 秒的状态直接切入，且若 transition-duration 小于 0.3s，就根本看不到动画，变成瞬变。
表格里尤其容易踩这个坑：比如设置 transition: background-color 0.2s ease -0.1s，实际效果等同于没过渡——因为 0.1s 已超过总时长，浏览器直接应用终态。
- ✅ 延迟值必须 ≥ 0，单位只能是
s或ms（transition-delay: 300ms合法，300不合法） - ✅ 多个属性不同延迟，必须逗号分隔且数量一致：
transition: opacity 0.2s ease 0.1s, transform 0.3s ease 0.4s; - ⚠️ 真正容易被忽略的是：表格元素的
display: table-cell会限制某些属性（如margin）无法过渡，延迟再准也没用
