Нак увеличить анимацию каждого следующего элемента?

Question

[bgood]

привет
есть блок ".animation" с сотней вложенных блоков ".blok1".
нужно увеличить задержку анимации каждого следующиего элемента внутри данного блока на 0.2 сек

.animation{
    width: 400px;
    height: 600px;
    display: flex;
}
.blok1{
    width: 14px;
    height: 14px;
    background-color: white;
    margin: 2;
    animation: emblem 2s linear infinite
}
.blok1:nth-child(2n){
    animation: emblem 2s linear infinite 0.2s;
}
@keyframes emblem{
    0%{
        scale: 0.5;  
    }
    50%{
        scale: 0.8;
        background-color: gray;	
    }
    100%{
        scale: 0.5;  
    }
}

Answer 1

[Ольга]

Пройтись в цикле по элементам и при помощи setTimeout накидывать класс для старта анимации. Либо то же самое, но через рекурсию.
Стилями: писать ручками или воспользоваться препроцессорами , типа такого gearmobile.github.io/css/cycle-for-sass

Answer 2

[ForSureN1]

array.forEach((item, index) => {
item.style.animationDelay = `0.2 * ${index}s`
})