animieren von Elementen nacheinander in reinem css3 auf Schleife

Ich versuche zu animieren, in die Elemente nacheinander in voller css3-Animationen. Scheint die sehr straight-forward beantworten ist mit animation-delay. Allerdings wollte ich diese in der Schleife, irgendwelche Ideen, wie man die animation in eine Endlosschleife?

Fand ich diese fiddle auf eine ähnliche Frage. Im Grunde der gleichen Logik, aber ich wollte einfach nur geloopt.

Dieser war ähnlich [Frage] (https://stackoverflow.com/a/8294491/340888)

War mit diesem:

@-webkit-keyframes FadeIn { 
0% { opacity:0; -webkit-transform:scale(.1);}
85% {opacity:1; -webkit-transform:scale(1.05);}
100% { -webkit-transform:scale(1); }
}

.myClass img { float: left; margin: 20px; 
    -webkit-animation: FadeIn 1s linear; -webkit-animation-fill-mode:both; }
.myClass img:nth-child(1){ -webkit-animation-delay: .5s }
.myClass img:nth-child(2){ -webkit-animation-delay: 1s }
.myClass img:nth-child(3){ -webkit-animation-delay: 1.5s }
.myClass img:nth-child(4){ -webkit-animation-delay: 2s }

Bearbeiten

Nur um klar sein, ich will die animation in einer sequenziellen Weise, zu sagen, nachdem die erste animiert, animiert der Punkt 2, dann 3.. und so weiter. Ich denke über das animieren von rund 10 bis 12 Elemente. So werden Sie animieren, eine nach der anderen.

Also @Sonu Joshi Antwort ist falsch.

  • irgendwelche Abnehmer? 😀 die Antwort von @sonu-joshi ist falsch
InformationsquelleAutor chriz | 2013-04-26
  1. 6

    Sie brauchen, um die animation lange genug, so dass alle Elemente, die eine chance haben, zu animieren, bevor der Zyklus startet erneut.

    In diesem Beispiel, der 4. element nur startet die Animation nach 2 Sekunden. Der übergang selbst wird noch eine weitere Sekunde, und dann möchten Sie vielleicht ein bisschen eine pause, sagen wir eine Sekunde, bevor Sie reanimieren das erste element. So, die 4 Sekunden insgesamt.

    So möchten Sie vielleicht so etwas wie dieses: -webkit-animation: Fadein 4s infinite linear.

    Aber du wirst auch anpassen müssen, um die keyframe-Prozentsätze, Teilung jeder von Ihnen durch 4, da Sie immer noch wollen, den übergang selbst zu nehmen nur 1 Sekunde.

    @-webkit-keyframes FadeIn { 
  0% { opacity:0; -webkit-transform:scale(.1);}
  21.25% {opacity:1; -webkit-transform:scale(1.05);}
  25% { -webkit-transform:scale(1); }
}

    Fiddle-Beispiel

    • dies tatsächlich funktioniert, können Sie erklären, die Mathematik dahinter, wenn der übergang selbst ist 1 Sekunde, warum ist die Verzögerung an .5second Intervall?
    • Diese Zeiten sind auf der Grundlage der zahlen, die Sie verwendet. Der zweite block beginnt animieren 0,5 s nach dem ersten block (die ist noch damit beschäftigt, zu animieren). Der Dritte block beginnt zu animieren, weitere 0,5 s später - 1s nach dem ersten block also nur, wie es endet.
    • Ich habe versucht, diese Methode immer noch die animation führt nur einmal. Bitte helfen Sie mir stackoverflow.com/questions/51854155/...
    InformationsquelleAutor James Holderness
  2. -2

    Ziemlich einfach. Verwenden -webkit-animation: FadeIn 1s infinite linear;

    Demo

    • ja, aber ich will es zu animieren, nacheinander, wie einer nach dem anderen, jetzt sofort, es ist nur animiert, wie es schert sich nicht um die anderen Elemente.
    InformationsquelleAutor Rajender Joshi
Schreibe einen Kommentar