Ich versuche, Elemente in vollen css3-Animationen sequenziell zu animieren. Scheint die sehr direkte Antwort ist Animation Verzögerung verwenden. Aber ich wollte das in Schleife, irgendwelche Ideen, wie man die Animationsschleife unendlich macht?
Ich fand diese Geige auf eine ähnliche Frage. Im Grunde ist das die gleiche Logik, aber ich wollte nur, dass es geloopt wird.
Dies war die ähnliche [Frage] ( Ссылка )
Benutzte dies:
%Vor%Nur um klar zu sein, ich möchte die Animation in einer sequentiellen Art und Weise, sagen wir, nachdem die erste animiert hat, animiert sie den 2. Gegenstand, dann 3. .. und so weiter. Ich denke darüber nach, etwa 10 bis 12 Elemente zu animieren. Also werden sie nacheinander animiert.
Also @Sonu Joshi's Antwort ist falsch.
Sie müssen die Animation lang genug machen, damit alle Elemente animiert werden können, bevor der Zyklus erneut beginnt.
In diesem Beispiel beginnt Ihr viertes Element erst nach 2 Sekunden zu animieren. Der Übergang selbst wird noch eine Sekunde dauern, und dann möchten Sie vielleicht eine Pause machen, sagen Sie noch eine Sekunde, bevor Sie das erste Element reanimieren. Das sind insgesamt 4 Sekunden.
Sie möchten vielleicht so etwas: -webkit-animation: Fadein 4s infinite linear .
Aber Sie müssen auch die Keyframe-Prozentsätze anpassen, indem Sie sie jeweils durch 4 dividieren, da Sie immer noch möchten, dass der Übergang selbst nur 1 Sekunde dauert.
%Vor% Ziemlich einfach. Verwende -webkit-animation: FadeIn 1s infinite linear;
Tags und Links css3 css-transitions delay sequential