Последовательная задержка анимации на Sass для дочерних элементов?

Question

[make_dev]

Всем привет! Как с помощью sass создать из этого более изящное решение для последовательной анимации дочерних элементов?

.myClass img:nth-child(1){
    -webkit-animation: myAnimation 0.9s linear forwards;
}
.myClass img:nth-child(2){
    -webkit-animation: myAnimation 0.9s linear 0.1s forwards;
}
.myClass img:nth-child(3){
    -webkit-animation: myAnimation 0.9s linear 0.2s forwards;
}
.myClass img:nth-child(4){
    -webkit-animation: myAnimation 0.9s linear 0.3s forwards;
}
.myClass img:nth-child(5){
    -webkit-animation: myAnimation 0.9s linear 0.4s forwards;
}

Вот, чтобы как в примере ZOE - последовательно показывались иконки соц.сетей.
Пример ZOE

Answer 1

[Froggyweb]

Лучше управлять задержкой (delay) чем длительностью анимации. В сасс можно сделать миксин с циклом

Посему в коде только вебкит firefox и ие ничего не анимирует

Comments

[make_dev]

Ок, как сделать миксин для последовательной задержки? Чтоб у каждого дочернего элемента последовательно увеличивалась задержка?
Код взяла для примера из гугла.

[make_dev]

Ну и в примере у меня изменяется же именно задержка(delay), а не длительность.

[Froggyweb]

make_dev, thesassway.com/intermediate/if-for-each-while
На телефоне код писать не очень. Цикл for вполне подойдет