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;
}
и так далее ... В общем, я бы хотел, чтобы анимация начиналась для каждого ребенка, но с задержкой. Спасибо за любой вклад!
Дополнение: Может быть, я не совсем правильно объяснил, что меня беспокоило: речь идет о том, как это сделать, независимо от того, сколько у меня детей. Как это сделать, не записывая свойства для каждого ребенка ... например, когда я не знаю, сколько будет детей.