CSS анимация с задержкой для каждого дочернего элемента

Я пытаюсь создать каскадный эффект, применяя анимацию к каждому дочернему элементу. Мне было интересно, если есть лучший способ сделать это, чем это:

.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;
}

и так далее ... В общем, я бы хотел, чтобы анимация начиналась для каждого ребенка, но с задержкой. Спасибо за любой вклад!

Дополнение: Может быть, я не совсем правильно объяснил, что меня беспокоило: речь идет о том, как это сделать, независимо от того, сколько у меня детей. Как это сделать, не записывая свойства для каждого ребенка ... например, когда я не знаю, сколько будет детей.

Ответы на вопрос(6)

Ваш ответ на вопрос