当前位置：首页 > 文章列表 > 文章 > 前端 > CSS sibling-index() 怎样按兄弟位置设置列表动画延迟

CSS sibling-index() 怎样按兄弟位置设置列表动画延迟

来源：17golang原创 2026-11-02 15:19:11 0浏览收藏

先明确 sibling-index() 读取的是什么

sibling-index() 读取的是当前元素相对于同一父元素其他兄弟元素的 DOM 位置，返回整数，而且从 1 开始计数。它不是数组下标，也不会从 0 开始；如果一个列表有五个直接子项，对应位置就是 1、2、3、4、5。

这个语义和 :nth-child() 的起点相似，但使用方式不同：:nth-child() 用来匹配某个位置的元素，sibling-index() 返回一个可以参与 CSS 数学计算的整数。正因为它能进入 calc()，所以更适合把“位置”变成延迟、宽度、角度或其他数值。

第一条通知
  第二条通知
  第三条通知
  第四条通知

这里不要为了动画而给每个 li 加 data-index，也不要把顺序写进行内样式。只要这些元素仍然是同一个 ul 的直接子项，CSS 就能在样式层得到它们的位置。

用 calc() 把兄弟位置变成动画延迟

最直接的公式是“位置乘以一个时间步长”。例如把步长定为 80ms，第一个元素得到 80ms，第二个得到 160ms。如果希望第一个元素立即出现，可以减去一个步长，或者把公式改成 calc((sibling-index() - 1) * 80ms)；不过正式使用前要确认目标浏览器对该表达式的解析情况。

.notice-list {
  display: grid;
  gap: 0.75rem;
  padding: 0;
  list-style: none;
}

.notice-item {
  /* 位置乘以时间步长，自动生成 80ms、160ms、240ms 等延迟 */
  animation: notice-in 420ms ease-out both;
  animation-delay: calc(sibling-index() * 80ms);
  padding: 0.9rem 1rem;
  border: 1px solid #cbd5e1;
  border-radius: 0.75rem;
  background: #f8fafc;
}

@keyframes notice-in {
  /* 只改变进入时的透明度和位移，避免影响列表的布局占位 */
  from {
    opacity: 0;
    transform: translateY(0.5rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

父级列表中的五个兄弟节点从一开始编号并计算递增动画延迟的静态说明图 — 图1：兄弟节点位置与 animation-delay 计算的静态关系；这是 CSS 结构说明图，不是浏览器截图或运行证据。

这段规则的维护点只有一个：时间步长。设计想让节奏更快时改成 50ms，想让卡片之间更有呼吸感时改成 120ms，不用新增选择器。动画本身仍然由 @keyframes 定义，sibling-index() 只负责把列表位置转换为输入参数。

把内容顺序交给 HTML，把效果交给 CSS

自动计算的前提是 DOM 顺序有意义。列表项如果在 HTML 中已经按阅读顺序排列，CSS 只负责视觉表现，新增或删除一项时，后续元素的索引会自动变化。相反，如果内容本身需要依赖一组手工编号，或者设计稿通过大量绝对定位改变了阅读顺序，单独引入 sibling-index() 并不能修复结构问题。

.feature-list {
  --step: 70ms;
  display: grid;
  gap: 1rem;
}

.feature-card {
  /* 把步长集中成自定义属性，便于主题或媒体查询调整节奏 */
  animation: feature-in 480ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
  animation-delay: calc(sibling-index() * var(--step));
}

@media (prefers-reduced-motion: reduce) {
  .feature-card {
    /* 用户要求减少动态效果时，保留内容但关闭延迟动画 */
    animation: none;
  }
}

@keyframes feature-in {
  /* 卡片始终占据布局位置，动画只负责渐显和轻微位移 */
  from { opacity: 0; transform: translateY(0.75rem); }
  to { opacity: 1; transform: translateY(0); }
}

我实际整理列表动画时会同时保留 prefers-reduced-motion 分支。它和兄弟索引是两件事：前者决定用户是否适合看到动态效果，后者决定多个元素之间如何错开。把两层职责分开，后续排查会比给每一项写不同的动画类名更容易。

不支持 sibling-index() 时先保留基础样式

新函数的兼容性不能只看自己的开发浏览器。建议先让列表在没有动画时仍然完整可读，再用 @supports 给支持的环境增加位置延迟。如果浏览器不支持 sibling-index()，它至少会看到已经排好序、可操作的静态卡片，而不是因为整个选择器失效而消失。

.notice-item {
  /* 基础样式不依赖新函数，旧环境仍能阅读列表内容 */
  opacity: 1;
  transform: none;
}

@supports (animation-delay: calc(sibling-index() * 1ms)) {
  .notice-item {
    /* 仅在支持该表达式的环境启用逐项延迟 */
    animation: notice-in 420ms ease-out both;
    animation-delay: calc(sibling-index() * 80ms);
  }
}

@media (prefers-reduced-motion: reduce) {
  .notice-item {
    /* 无论浏览器是否支持 sibling-index()，都尊重减少动态效果设置 */
    animation: none;
  }
}

@supports 里的条件故意和真正使用的声明保持同一类表达式。这样做的目的不是伪造一个兼容性结论，而是把增强规则限制在浏览器能够解析它的范围内。实际项目还应按自己的支持矩阵做功能回归，不要把新函数当成所有环境的必需条件。

列表很短时如何用 nth-child() 做有限降级

如果项目必须在不支持新函数的浏览器中保留“前几项错开”的效果，可以为固定数量的列表项写少量 :nth-child() 规则。它适合展示位固定、最多只有三到五项的组件；对无限滚动、后端分页或动态插入的列表，就不值得维护这份映射。

@supports not (animation-delay: calc(sibling-index() * 1ms)) {
  .notice-item:nth-child(1) {
    /* 固定列表的第一项使用最短延迟 */
    animation-delay: 80ms;
  }

  .notice-item:nth-child(2) {
    /* 第二项显式写出降级值，避免依赖新函数 */
    animation-delay: 160ms;
  }

  .notice-item:nth-child(3) {
    /* 只覆盖设计明确要求的有限数量，不扩展成几十条规则 */
    animation-delay: 240ms;
  }
}

如果列表长度会变化，我更倾向于把降级方案收窄为“所有项同时出现”。这比在内容增加后出现不一致的半套动画更可靠，也更容易向产品说明支持边界。