CSS列表逐项动画实现方法

常见错误是把 animation-delay 写在父容器（比如

）上，结果所有子项同步动；或者用 :nth-child(n) 但没写对索引，导致第 1 项延迟 0s 反而卡住。
• 每项独立加动画：给
• 单独设 animation 和 animation-delay
• 延迟值建议用 calc() 或预设变量：比如 animation-delay: calc(var(--i, 0) * 0.2s);（需配合 JS 注入 --i），否则就得手写 :nth-child(1) { animation-delay: 0s; }、:nth-child(2) { animation-delay: 0.2s; }……
• 动画必须定义 opacity 或 transform 等可过渡属性，只靠 display: none → block 不会触发 CSS 动画

为什么不能只靠 transition + visibility 实现逐个淡入

transition 对 visibility 无效，对 display 完全无效——这是最容易踩的坑。想用过渡效果，必须用 opacity + transform 模拟“显示/隐藏”，再配合 animation-delay 控制节奏。

• visibility: hidden 可以过渡，但视觉上仍是占位的，不符合“出场”预期
• display: none 一设就消失，没有中间状态，transition 根本不触发
• 真正可用的组合是：opacity: 0 → 1 + transform: translateY(10px) → translateY(0)，再配 animation-fill-mode: forwards 锁定最终态

animation-delay 在不同浏览器中的兼容性表现

所有现代浏览器都支持 animation-delay，包括 Safari 12.1+ 和 Edge 79+，但老版本 Safari（≤12）对小数秒延迟（如 0.15s）可能四舍五入成 0.2s，造成节奏跳变。

• 避免用 0.15s、0.25s 这类非整数倍延迟，统一用 0.2s、0.4s 更稳
• 如果列表项动态增删，纯 CSS 方案会失效——此时得切到 JS 控制 style.animationDelay，别硬撑
• 移动端 iOS Safari 对大量连续 @keyframes 的渲染压力略高，超过 20 项建议分批触发或加节流

一个能直接抄的最小可行示例

下面这段代码复制粘贴就能跑，注意

• 必须有 class 才能命中选择器：

  ul li {
    opacity: 0;
    transform: translateY(8px);
    animation: fadeInUp 0.4s ease forwards;
  }
  ul li:nth-child(1) { animation-delay: 0s; }
  ul li:nth-child(2) { animation-delay: 0.2s; }
  ul li:nth-child(3) { animation-delay: 0.4s; }
  @keyframes fadeInUp {
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  如果项数不确定，就别死磕 :nth-child，改用 JS 绑定更实际——CSS 不是万能的，尤其当延迟逻辑变复杂时。

  理论要掌握，实操不能落！以上关于《CSS列表逐项动画实现方法》的详细介绍，大家都掌握了吧！如果想要继续提升自己的能力，那么就来关注golang学习网公众号吧！

  您即将跳转至第三方网站，请注意保护好个人信息和财产安全！

  继续访问