Как выполнить в sass такие манипуляции?

Question

[Максим]

Имеем большое количество class="item0" до class="item400" или больше .
Каким образом в sass less или другом препроцессоре выполнить keyframes для всех этих class но с разной задержкой анимации ?

Цель : сокращение кода css - чтобы не писать для каждого class свой keyframes в css

Comments

[Сергей delphinpro]

выходной css код вряд ли сократится

[Сергей delphinpro]

Изменение задержки анимации по какому закону должна быть?

Answer 1

[Сергей delphinpro]

А зачем вообще кейфреймы множить, одного не достаточно?

$base-delay: 100ms;
@for $i from 0 through 400 {
  .item#{$i} {
    animation-delay: $base-delay + $i;
    animation-name: myanimation
  }
}
@keyframes myanimation { .... }

Comments

[Максим]

Если помнишь вчера был задан вопрос Как реализовать такой контур в After Effects? и как через after effects сделать понятия не имею хотя я повыпендривался но потом удалил свой ответ но продолжил попытки - сделал аналочную штуковину : https://codepen.io/topicstarter/pen/YBVWKx но проблема там в том что надо именно dasharray и dashoffset а в том слкчае получается что там куча ellipse так вот - мне показалось что удобнее будет если на css/sass/less скрыть их и показать в less/sass/ в цикле по одному но с задержкой - что скажешь по этому поводу ?

[Сергей delphinpro]

Максим Ленский, прикольно. попробуй.

[Сергей delphinpro]

Максим Ленский, потом еще саму свгшку скриптом собирать и вообще норм.

[Максим]

Сергей delphinpro, видишь как получилось ? https://codepen.io/topicstarter/pen/ZwyKzr ну правда ни без помощи toster

[Сергей delphinpro]

Максим Ленский, класс