CSS列表滑入动效nth-child延时技巧

实操建议：

• 检查 DOM 结构，用浏览器开发者工具确认目标
• 实际是第几个子节点
• 若列表前有非
• 元素，优先改用 li:nth-of-type(n)
• 避免依赖 nth-child(2n) 做偶数项样式，除非你确定所有子元素都是

transition-delay 需要为每个项单独计算，不能靠父容器统一设

滑入动效的本质是让每个

正确做法是用 :nth-child(n) 给每个项单独加延时：

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

更实用的写法是配合 CSS 自定义属性动态算：

ul {
  --delay-step: 0.1s;
}
li:nth-child(1) { --delay: calc(0 * var(--delay-step)); }
li:nth-child(2) { --delay: calc(1 * var(--delay-step)); }
li:nth-child(3) { --delay: calc(2 * var(--delay-step)); }
li { transition-delay: var(--delay); }

动画触发时机必须配合 visibility / opacity / transform 控制

只写 transition 不够，得让元素初始状态“不可见但占位”，否则布局会跳变。常见错误是用 display: none 开头——它无法触发 CSS 过渡，因为 display 属性本身不支持过渡。

推荐组合（兼顾可访问性与动效）：

• 初始状态：opacity: 0; transform: translateY(10px); visibility: hidden;
• 触发状态（如加类 .is-loaded）：opacity: 1; transform: translateY(0); visibility: visible;
• 必须给 li 设 transition: opacity 0.3s, transform 0.3s, visibility 0s 0.3s——visibility 的延迟是为了等 opacity/transform 动画结束再切换，避免闪一下

IE 和旧版 Safari 对 nth-child(n) 和自定义属性支持有限

nth-child 在 IE9+ 是可用的，但 CSS 变量（--delay）在 IE 完全不支持，旧版 Safari（

兼容性兜底建议：

• 用 PostCSS 插件（如 postcss-custom-properties）把 CSS 变量转成静态值
• 对 IE 用户降级：去掉延时，所有项同时滑入，或直接禁用动效
• 避免用 nth-child(an+b) 复杂公式（比如 nth-child(3n+2)），某些老 Android WebView 解析会出错

动效越简单，越容易被不同引擎一致执行；延时变量看着聪明，但一不小心就卡在某个安卓 WebView 里不动了。

到这里，我们也就讲完了《CSS列表滑入动效nth-child延时技巧》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于的知识点！