AI 摘要：本文介绍了 CSS 中新引入的 sibling-index() 和 sibling-count() 两个函数，它们让我们可以直接通过纯 CSS 计算元素在兄弟节点中的相对位置，实现无需 JavaScript 的 “错位动画（staggered animation）”。通过结合这些函数与 :has() 伪类、transition 延时变量等技巧，作者演示了如何在选中某个卡片时，让它左右的卡片以时间递增或递减的顺序逐个消失，完整地展示了纯 CSS 动画逻辑与可替代 JS 的思路。

1. 新函数简介与基础概念
• sibling-index() 返回元素在兄弟节点中的序号，从 1 开始计数；
• sibling-count() 返回兄弟节点的总数（包含自身）；
• 二者结合可实现基于结构位置的样式或动画计算，例如递增宽度或动画延时。

2. 示例布局与核心结构
• 使用 .cards-wrapper 包裹多张 .cards 卡片，通过 flexbox 横向排列；
• 每个 .cards 内部含有覆盖整个卡片的 input[type="checkbox"]，点击后触发交互。

3. 主要的选择器逻辑

• .cards:has(:checked)：选中状态的卡片，用于高亮；
• .cards-wrapper:has(:checked) .cards:not(&)：当有选中卡片时，让其他卡片消失；
• & ~ .cards 与 .cards:not(&) 分别控制右边与左边卡片的延迟方向（递减或递增）。

4. 样式声明解析
• 高亮选中卡片：添加虚线边框；
• 让未选卡片消失：透明度降为 0，宽度缩为 0，并在动画结束后设置 display: none；
• 过渡动画：transition-behavior: allow-discrete 保障 display 的离散变化；
• 时间递减／递增：
• 右侧卡片使用 --n: calc(sibling-count() - sibling-index() + 1)；
• 左侧卡片使用 --n: sibling-index()；
• 最终延时计算：transition-delay: calc(var(--n) * 0.2s)。

5. 动画示例与完整规则组合
• 当某张卡片被选中时，其它卡片依序向外逐个消失，形成错位延迟动画效果；
• 所有规则组合后实现纯 CSS 版本的交互过渡，无需额外脚本支持。

6. 兼容方案（Fallback）
• 对不支持 sibling-* 函数的浏览器，通过 JavaScript 动态计算 --n 值；
• JS 逻辑基于监听 change 事件手动设置左右两侧卡片的延时变量；
• 保持与 CSS 核心机制一致的动画行为。

7. 扩展示例与实践思路
• 使用 sibling-index() 实现类似手风琴（accordion）式开合动画；
• 即便不带延时，也可通过该函数控制显示隐藏的顺序与方向；
• 展示纯 原生 CSS 实现复杂交互效果的潜力。

Frontend Masters

Staggered Animation with CSS sibling-* Functions

The CSS functions sibling-index() and sibling-count() return an element’s position relative to its siblings and the total number of siblings, including itself. This is useful for styling elements based on their positions.