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

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

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

55
задан Seka 28 November 2011 в 10:53
поделиться