最稳妥写法是用 :nth-child(n) 配合 transition-delay，但需确保父容器仅含目标元素；混入无关节点会导致错位，动态列表须改用 CSS 变量+JS；opacity、transform、visibility 三者过渡须同时声明且初始状态显式定义。
transition-delay 配合 :nth-child 怎么写才不偏移
直接用 :nth-child(n) 给列表项设递增延迟最稳妥，但必须确认父容器里只有目标元素。只要混一个文本节点、注释或无关标签，:nth-of-type 就会错位——比如第 3 个 <div> 实际是父容器的第 5 个子节点，延迟就套到错的元素上。
<p>常见错误：用 <code>:nth-of-type 替代 :nth-child，以为“同类型”更安全；结果 JS 插入一个 <span class="hint"></span> 后，所有延迟全乱。
- 写法示例：
.card:nth-child(1) { transition-delay: 0s; }、.card:nth-child(2) { transition-delay: 0.15s; }、.card:nth-child(3) { transition-delay: 0.3s; } - 延迟值建议用小数（如
0.15s），避免0.2s这种整百毫秒导致节奏生硬 - 如果列表项数量不固定（比如由 JS 动态渲染），纯 CSS 方案失效，得改用 CSS 自定义属性 + JS 注入
--delay变量
transition-delay 和 opacity / transform / visibility 怎么配才不闪不卡
只靠 opacity 过渡容易在 Safari 闪边、只靠 transform 又没法真正“隐藏”，漏掉 visibility 会导致悬停结束时元素还占位、挡住下方内容。
典型错误：给容器加 transition: all 0.3s，结果 display: none 切换完全不触发过渡；或者只写 transition: opacity 0.3s，忘了 transform 也得单独声明过渡。
立即学习“前端免费学习笔记（深入）”；
- 初始状态必须显式写：
opacity: 0; transform: translateY(10px); visibility: hidden; - hover 或 active 状态写：
opacity: 1; transform: translateY(0); visibility: visible; - transition 必须列出全部属性：
transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s; -
visibility本身不可动画，但加上它能让浏览器提前知道“这个元素当前不可交互”，避免布局抖动
transition-delay 和 animation-delay 能不能混用
不能。两者触发机制完全不同：transition-delay 等状态变化（比如加 class、hover）之后才开始倒计时；animation-delay 是页面加载即启动，和 DOM 渲染时机强绑定。
常见误用：同一个元素上既写 transition-delay: 0.2s，又写 animation-delay: 0.2s，结果行为不可预测——有时过渡生效、动画被跳过，有时反过来。
- 做「悬停联动」（比如 hover 时背景色+文字颜色错开动）：用
transition-delay+:hover - 做「页面加载后自动交错入场」（比如首页卡片逐个浮现）：用
animation-delay+@keyframes，且必须配animation-fill-mode: backwards和显式初始样式 - 同一动效逻辑里只选一种，别混搭
移动端怎么让 transition-delay 交错动画可靠触发
移动端没有 hover，直接套 PC 写法会失效。也不能依赖 display: none 切换——transition 不认它。
常见错误：用 click 事件加 class，但没处理多次点击导致动画重复触发；或者用 Intersection Observer，但没设 threshold 导致首屏元素进视口时延迟太高。
- 推荐方案：用
click触发 class 切换，配合pointer-events: none防重复点 - 更稳方案：用 Intersection Observer 监听元素进入视口，触发时加 class，且
threshold: 0.1（10% 进入即触发） - 关键点：移动端动画节奏要稍慢（比如延迟步长用
0.2s而非0.1s），避免手指滑动太快导致视觉断档
opacity: 0，也不能指望 @keyframes 或 :hover 里定义的值自动回退。浏览器不会帮你补默认值，缺了它，transition-delay 就只是个摆设。
