用 transition-duration 和 transition-delay 可实现纯 CSS 多元素错落入场：delay 控制起始时机，duration 决定动画时长，二者需共存且声明在初始状态中，单位不可省略，顺序须为 property duration timing-function delay。
直接用 transition-duration 和 transition-delay 配合，就能让多个元素按顺序、有层次地出现，不用 JS 也能做出自然的入场节奏。
核心逻辑：先等再动，各自独立
每个元素的动画分两步走：先静止等待 transition-delay 指定的时间，再用 transition-duration 规定的时长完成变化。两者相加就是从触发到结束的总耗时，但前半段是“空等”，后半段才是真动画。
- delay 是“起跑线”，控制谁先动、谁后动；duration 是“冲刺时间”，决定动得快还是慢
- 两个属性必须同时存在才有效——只写 delay 不写 duration，动画会瞬间完成；只写 duration 不写 delay，就立刻开始
- 移动端建议 delay 控制在 0.6s 内，避免用户误以为没响应
实现错落感的三种常用写法
关键在于让不同元素的 delay 值形成梯度，配合统一或差异化的 duration，制造呼吸感。
-
单类名 + nth-child 分配延迟：适合列表、图标组等结构规整的元素
例如：.item { opacity: 0; transform: translateY(10px); transition: all 0.4s ease; }<br>.item:nth-child(1) { transition-delay: 0.1s; }<br>.item:nth-child(2) { transition-delay: 0.25s; }<br>.item:nth-child(3) { transition-delay: 0.4s; } -
多属性分别设 delay 和 duration：适合一个元素内多个样式变化不同步
例如按钮悬停：button { transition: background-color 0.3s, color 0.3s 0.15s, transform 0.25s 0.2s; }——背景最先变，文字次之，位移最后启动 -
初始状态统一定义，hover 只改值：确保鼠标移出时也有平滑回退
错误写法：button:hover { transition-delay: 0.2s; }（无效）
正确写法：button { transition: opacity 0.3s ease 0.1s, transform 0.35s cubic-bezier(0.2,0.8,0.4,1) 0.1s; }<br>button:hover { opacity: 0.9; transform: scale(1.03); }
避坑要点：顺序、单位、生效位置
这三个细节一错，节奏就全乱了。
- 逗号分隔多组值时，顺序必须严格为：property duration timing-function delay，少一个或错位，后面全部失效
- 所有时间值都必须带单位：
0.2s或200ms，写0.2或200会被忽略 - transition 相关声明要写在**触发前的状态里**（比如默认样式），而不是 hover/focus 等伪类中——否则移出时没有过渡，直接跳回原样
进阶技巧：负 delay 与链式引导
少量负 delay 可以微调起始帧，配合 JS 类控制还能做更精细的流程引导。
- 比如模态框入场：背景遮罩
transition-delay: 0s，弹窗主体0.15s，关闭按钮0.3s，视觉焦点自然由外向内移动 - 负 delay 示例：
transition: opacity 0.8s ease -0.2s;表示跳过动画前 0.2 秒，从第 0.2 秒的画面开始播放，适合衔接上一环节的收尾帧 - 调试时打开 Chrome DevTools → Animations 面板，拖动时间轴实时观察各元素启动时刻和持续过程
