如何使用nth-child在CSS中实现多元素列表项的延迟滑入过渡效果？

本文共计852个文字，预计阅读时间需要4分钟。

直接给结论：

正确做法是手动展开或用 CSS 自定义属性 + JS 控制。纯 CSS 场景下，得老老实实写：

li:nth-child(1) { transition-delay: 0s; } li:nth-child(2) { transition-delay: 0.1s; } li:nth-child(3) { transition-delay: 0.2s; } li:nth-child(4) { transition-delay: 0.3s; }

• 超过 10 项就该考虑 JS 动态加 class，硬写 nth-child 易错且难维护
• transition-delay 值必须带单位（s 或 ms），写成 0.1 无效
• 动画触发前元素必须已有初始状态（比如 transform: translateY(20px)），否则延迟没意义

为什么 opacity + transform 比 display 或 visibility 更适合做滑入

display: none 一上来就脱离文档流，transition 根本不生效；visibility: hidden 虽保留占位，但 opacity 为 0 时仍无法触发动画起始帧。