Ich versuche eine Animation zu erstellen, die alle 3 Sekunden ohne JavaScript ausgeführt wird. Die Dauer meiner Animation beträgt 1 Sekunde.
Ich kann nur 3 Sekunden auf das erste Ereignis warten, dann ist es eine Schleife von 1s Animation.
Mein bisheriger Code: Ссылка
%Vor%Ich weiß, wie man es mit javascript macht: Ссылка
Ich habe diese Antwort ohne Erfolg versucht: Cycling CSS3-Animation mit einer Pause?
Können Sie mir bitte helfen?
BEARBEITEN Dank super Antworten kann ich auch dieses Szenario machen: Warte 2 Sekunden, lasse 1s Flip laufen, warte 2 Sekunden, starte 1s back_flip, warte 2 Sekunden.
%Vor% Es scheint, als wäre die einzige Möglichkeit, dies zu erreichen, die Animation so zu verlängern, dass sie 4s statt 1s dauert. Dann könnten Sie die Animation verzögern, indem Sie von 75% auf 100% (statt 0% bis 100% ) animieren.
Dabei kommt es in der Animation selbst zu einer künstlichen Verzögerung. Sie müssen nur rechnen, wie lange diese Verzögerung in Korrelation mit der Gesamtlänge der Animation selbst ist.
%Vor%Ich konnte dies, wie @Josh erwähnte, tun, indem ich die Animation erweitere. Wenn Sie beispielsweise möchten, dass Ihre Animation 0,5 Sekunden mit einer Pause von 3 Sekunden dauert, erstellen Sie die gesamte Animation 3,5 Sekunden und verwenden dann Prozentwerte, um sie zu verlängern. (0,5 Sekunden sind etwa 14% von 3,5 Sekunden.)
Im folgenden Code habe ich ein DIV mit transparentem Verlauf erstellt, der die gleiche Breite wie das übergeordnete Element hat, und anschließend von links nach rechts animiert, um einen Schimmereffekt zu erzielen.
%Vor%Von 14% bis 100% bewegt sich der DIV nicht, aber die Animation wird für zusätzliche Zeit fortgesetzt, was den Effekt einer Pause ergibt.