sibling-index() — герой анимаций завтрашнего дня

11.12.2025 • css

Типичные анимации

Даже 10 лет назад типичные демки, которые можно было найти на просторах интернета со всевозможными анимациями и эффектами, в 50% случаев состояли из большого числа элементов, циклов SASS или просто использовали :nth-child(). Они использовались для задания уникальной позиции для каждого элемента, поворота, задержки анимации. Да и в своей практике я встречал подобное не один раз.

В современном CSS всё ещё нет циклов из SASS, а простыни :nth-child() писать не очень хочется:

.particle {
    left: calc(var(--index) * 20px);
}
 
.particle:nth-child(1) {
    --index: 1;
}
.particle:nth-child(2) {
    --index: 2;
}
...

Если посмотреть на фичи из SASS, которые как-либо закрыты в CSS, то от SASS почти ничего не останется. Единственная жирная фича, которой мне до сих пор не хватало — именно циклы! Я думаю, многие авторы демок до сих пор могут использовать SASS именно из-за циклов.

sibling-index() выходит на сцену

И в 2025м году появляется новое предложение в спеке — sibling-index() и sibling-count().

.particle {
    left: calc(sibling-index() * 20px);
}

Вот так просто. Это, конечно, не полноценная замена циклам, но на большую часть случаев этого хватит. И конструкция получается максимально простая!

Особенности

sibling-index() возвращает integer. Это разительно отличается от counter(), который можно было бы использовать для подобной цели, но он возвращает string и не заработает в таком выражении.

Сейчас есть предложение в спеку для добавления функций конвертации типов в CSS, но даже с ними sibling-index() выглядит куда нагляднее и короче.

А нумерация начинается с 1, не с 0.

Что по браузерам?

Сейчас sibling-index() и sibling-count() есть в стабильном хроме, начиная с 138й версии.

Также реализация подъехала в будущий Safari 26.2.

Остаётся дело только за Файерфоксом. Очень ждём. И ждём достаточно свежие браузеры у пользователей, конечно же)