CSS-Animationen mit Verzögerung für jedes untergeordnete Element

Ich versuche, einen Kaskadeneffekt zu erzeugen, indem ich auf jedes untergeordnete Element eine Animation anwende. Ich habe mich gefragt, ob es einen besseren Weg gibt als diesen:

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

und so weiter ... Im Grunde möchte ich eine Animation für jedes Kind haben, aber mit einer Verzögerung. Vielen Dank für jede Eingabe!

Ergänzung: Vielleicht habe ich nicht richtig erklärt, was mein Anliegen war: Es geht darum, wie man das macht, egal wie viele Kinder ich habe. Wie man das macht, ohne die Eigenschaften für jedes Kind aufschreiben zu müssen ... zum Beispiel, wenn ich nicht weiß, wie viele Kinder es geben wird.

Was Sie wollen, ist die Eigenschaft Animation Delay .

@keyframes FadeIn { 
  0% {
    opacity: 0;
    transform: scale(.1);
  }

  85% {
    opacity: 1;
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}

.myClass img {
  float: left;
  margin: 20px;
  animation: FadeIn 1s linear;
  animation-fill-mode: both;
}

.myClass img:nth-child(1) { animation-delay: .5s }
.myClass img:nth-child(2) { animation-delay: 1s }
.myClass img:nth-child(3) { animation-delay: 1.5s }
.myClass img:nth-child(4) { animation-delay: 2s }

<div class="myClass">
    <img src="http://placehold.it/200x150" />
    <img src="http://placehold.it/200x150" />
    <img src="http://placehold.it/200x150" />
    <img src="http://placehold.it/200x150" />
</div>

Ein CSS-Präprozessor wie Less.js oder Sass kann die Anzahl der Wiederholungen verringern. Wenn Sie jedoch mit einer unbekannten Anzahl untergeordneter Elemente arbeiten oder eine große Anzahl animieren müssen, ist JavaScript die beste Option.

Hier ist eine scss-Methode, um dies mit einer for-Schleife zu tun.

@for $i from 1 through 10 {
    .myClass img:nth-child(#{$i}n) {
        animation-delay: #{$i * 0.5}s;
    }
}

In der [hoffentlich in der Nähe] Zukunft , wenn attrund calcwerden voll unterstützt, werden wir in der Lage sein , dies ohne JavaScript zu erreichen.

HTML:

<ul class="something">
    <li data-animation-offset="1.0">asdf</li>
    <li data-animation-offset="1.3">asdf</li>
    <li data-animation-offset="1.1">asdf</li>
    <li data-animation-offset="1.2">asdf</li>
</ul>

CSS:

.something > li
{
    animation: myAnimation 1s ease calc(0.5s * attr(data-animation-offset number 1));
}

Dies würde einen Effekt erzeugen, bei dem jedes Listenelement in einer scheinbar zufälligen Reihenfolge animiert wird.

Sie können auch die Eigenschaft für die Übergangsverzögerung in CSS verwenden und JS oder JQuery verwenden, um jedem untergeordneten Element eine andere Verzögerung zuzuweisen. (Angenommen, s ist die Startverzögerung in Sekunden)

$(".myClass img").each(function(index){
     $(this).css({
          'transition-delay' : s*(1+index) + 's'
     });
 });

So haben die Kinder die Übergangsverzögerungen wie 1 * s, 2 * s, 3 * s ..... und so weiter. Um den eigentlichen Animationseffekt zu erstellen, stellen Sie einfach den gewünschten Übergang ein und die Kinder werden in einer Sequenz animiert. Klappt wunderbar !

Wenn Sie viele Elemente haben (zum Beispiel: Ich habe eine Tabelle mit> 1000 Elementen paginiert und möchte, dass jede Zeile beim Laden der Seite mit Verzögerung animiert wird), können Sie jQuery verwenden, um dies zu lösen und eine Vergrößerung der CSS-Datei zu vermeiden. Die Animationsverzögerung nimmt dynamisch zu.

$.each($('.myClass'), function(i, el){
    $(el).css({'opacity':0});
    setTimeout(function(){
       $(el).animate({
        'opacity':1.0
       }, 450);
    },500 + ( i * 500 ));

});​

BEARBEITEN: Hier ist derselbe Code, den ich für die Verwendung mit animate.css angepasst habe (installieren Sie ein zusätzliches Plugin, bevor Sie https://gist.github.com/1438179 verwenden ).

$.each($(".myClass"), function(i, el){
    $(el).css("opacity","0");
    setTimeout(function(){
       $(el).animateCSS("fadeIn","400");
    },500 + ( i * 500 ));

});

Wenn "fadeIn" der Animationstyp ist, "400" - Ausführungszeit der Animation, 500 - Verzögerung für jedes zu animierende Element auf der Seite.

So was:

.myClass img {
    -webkit-animation: myAnimation 0.9s linear forwards;
}

.myClass img:nth-child(1){
    -webkit-animation-delay: 0.1s;
}

.myClass img:nth-child(2){
    -webkit-animation-delay: 0.2s;
}

[...etc...]