使用 CSS sibling-* 函数的错位动画

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.

CSS 函数 sibling-index() 和 sibling-count() 返回一个元素相对于其兄弟元素的位置和总兄弟元素的数量，包括它自己。这对于根据元素的位置进行样式设置非常有用。

<div class="parent"> <div class="child"></div> <div class="child"></div> <div class="child"></div> </div>Code language: HTML, XML (xml)

<div class="parent"> <div class="child"></div> <div class="child"></div> <div class="child"></div> </div>代码语言：HTML, XML (xml)

For instance, to create a pyramid chart, we could proportionally increase the widths of elements as they align.

例如，为了创建一个金字塔图表，我们可以按比例增加元素的宽度，使其对齐。

The integers returned by sibling-index() and sibling-count() can be easily computed with other data types like length, angle, and time. An incremental or decremental time sequence is the foundation of any staggered animation where elements animate consecutively. For example:

由 sibling-index() 和 sibling-count() 返回的整数可以与其他数据类型如长度、角度和时间轻松计算。增量或减量时间序列是任何错位动画的基础，其中元素依次动画。例如：

.el { animation-delay: calc(sibling-index() * 0.1s); }Code language: CSS (css)

.el { animation-delay: calc(sibling-index() * 0.1s); }代码语言：CSS (css)

This post covers a demo where selecting an item causes the preceding and succeeding items to disappear sequentially from the outside.

这篇文章介绍了一个演示，其中选择一个项目会导致前后的项目依次从外部消失。

<main class="cards-wrapper"> <div class="cards"><input type="checkbox" aria-label="movie, only yesterday"></div> <div class="cards"><input type="checkbox" aria-label="movie, the wind rises"></div> <div class="cards"><input type="checkbox" aria-label="movie, howl's moving castle"></div> <div class="cards"><input type="checkbox" aria-label="movie, ponyo"></div> <div class="cards"><input type="checkbox" aria-label="movie, the cat returns"></div> </main>Code language: HTML, XML (xml)

<main class="cards-wrapper"> <div class="cards"><input type="checkbox" aria-label="movie, only yesterday"></div> <div class="cards"><input type="ch...