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

71

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.

Seka
quelle
Was ist mit der Verwendung eines js-Element-Selektors (so etwas wie dojo.query oder jquery) und der Anwendung des Stils in der for-Schleife? das ist das einzige, was mir in den Sinn kommt ...
Gatekeeper
Ja, ich denke, das ist der einzige Weg, dies für jedes Kind zu tun, ohne für jedes eine Klasse aufschreiben zu müssen. Ich dachte, dass es einige neue CSS3-Eigenschaften geben könnte, die dies ermöglichen, aber ich denke, ich muss auf die Einführung von Variablen warten ... Danke!
Seka
4
Sie suchen also nach einer Art Inkrement-Eigenschaft für CSS-Animationen? So etwas wie -webkit-animation-increment? Das wäre auf jeden Fall von Nutzen, gute Frage.
CherryFlavourPez
@ Ed-M genau! Ich habe mir nur diese Counter-Inkrement-Eigenschaft angesehen und es wäre großartig, wenn eine solche Variable in jeder CSS-Eigenschaftsdefinition verwendet werden könnte und nicht nur in der 'Content'-Eigenschaft ...
Seka

Antworten:

63

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.

CherryFlavourPez
quelle
@dreamster: Die alte Geige verwendet das -webkitPräfix (das in Chrome weiterhin unterstützt wird). Sie sollten die Version ohne Präfix hinzufügen (oder etwas wie Autoprexfixer ( github.com/postcss/autoprefixer ) verwenden, wenn dies funktionieren soll.
CherryFlavourPez
59

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;
    }
}
Robshearing
quelle
1
Großartige Arbeit @robshearing Aber ich kann nicht bis zu 100 machen, es funktioniert nicht gut
Saravanan Nandhan
Könnten Sie helfen, nachdem 10 Datensatz $ {{i}} Wert von 0 (Null) beginnen sollte?
Saravanan Nandhan
21

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.

Steven Vachon
quelle
18
TBH Ich hatte erwartet, dass so etwas .myClass li:nth-child(n) { transition-delay: calc(n*0.2s); }sehr praktisch sein würde.
Felype
1
Ich wollte damit sagen, dass ich gehofft hatte, w3 könnte in einer zukünftigen n-ten Kind-Funktion mit Variablen implementiert werden, so dass wir zum Beispiel sagen könnten, transition-delaydass Kind (n) 0.5+(n*<somePrimeNumber> % 1.5)keine wunderbare Formel ist, sondern zufällig für die Anzahl der Li's aussehen würde, die Sie möglicherweise hinzufügen würden. Meine Beschwerde besteht darin, dass ich für jedes Listenelement mehrere CSS-Auswahlen erstellen und diese dann erweitern muss, wenn ich eine Liste erhalte, die größer ist als für mein CSS vorbereitet. Es gibt zufällige Funktionen für SCSS und WENIGER, die jedoch in Frage gestellt werden. Daher kann meiner Frustration mit einfachem CSS nicht geholfen werden.
Felype
Mein Punkt ist: CSS sollte alle visuellen Elemente abdecken, dafür ist es gedacht, aber manchmal können wir nicht anders, als JS zu verwenden, um das beabsichtigte grafische Ergebnis zu erzielen. Und ja, das sieht zufällig aus, aber nachdem Sie diese Animation mehrmals ausgeführt haben, werden Ihre Augen es vorhersagen und es wird nicht mehr zufällig aussehen.
Felype
Der Benutzer würde es wahrscheinlich nicht bemerken. Es ist wie bei Filmfehlern - nur sehr wenige bemerken sie. Die Pseudozufälligkeit ist jedoch zu spüren .
Steven Vachon
20

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 !

Adk96r
quelle
Ich denke, in Bezug auf die Leistung ist dies die beste Lösung auf dieser Seite, da die Animation selbst weiterhin vollständig über CSS ausgeführt werden kann. Außerdem wird das Aufblähen von Dateien und unnötige Unleserlichkeit verhindert.
elf59
9

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.

Neolo
quelle
4
Ich denke, diese Antwort widerspricht dem Geist dessen, was gefragt wurde, nämlich einer Möglichkeit, dies über CSS-Animation im Vergleich zu JavaScript / jQuery-Animation zu tun.
Sean Ouimet
3

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...]
peduarte
quelle
1
Hallo, danke für die Vereinfachung :) Ich war eigentlich mehr besorgt über die anhaltende Kaskade, 0,1 Sekunden Verzögerung hinzuzufügen und die Klassen selbst nicht zu vereinfachen. Aber das ist natürlich eine bessere Möglichkeit, es aufzuschreiben, danke!
Seka
Oh, ok, mein schlechtes. Nun, Sie könnten es mit Javascript machen und für jede Schleife eine machen. Aber ich würde es nicht empfehlen ...
peduarte