Pause & Loop CSS-Animationen mit WAIT! Animieren
Mit reiner CSS-Animation können Sie eine Menge tun, aber Das Anhalten und Wiederherstellen einer Animation ist nicht möglich mit der aktuellen W3-Spezifikation.
Aber mit einem kostenlosen Tool wie WARTEN! Animieren Das kannst du eigentlich Erstellen Sie Loop-Animationen von Grund auf mit benutzerdefinierte Verzögerungen zwischen jeder Schleife. Dies mag wie eine weltliche Aufgabe erscheinen, löst aber für viele Entwickler einen schmerzhaften Punkt.
Es ist zu beachten, dass eine CSS-Eigenschaft aufgerufen wird Animationsverzögerung welche verzögert die Start einer CSS-Animation. Wie auch immer, es wirkt sich nicht auf eine sich wiederholende Animation aus da es nur den Startpunkt verzögert.
WARTEN! Animieren berechnet automatisch Wie viele Pausen müssen in benutzerdefinierten Animations-Keyframes platziert werden Erstellen Sie die genaue Pausendauer Du brauchst zwischen den Schleifen. Dies könnte von Hand gemacht werden, aber es ist äußerst umständlich, ganz zu schweigen von ärgerlich.
Diese Web-App kann mit jeder CSS3-Animationsfunktion arbeiten, einschließlich Rotationen und Transformationen. Sie schreiben keine neuen CSS-Eigenschaften, sondern eher auf der Keyframes-Funktion aufbauen erschaffen Pausen basierend auf Prozentsätzen (von 0% bis 100%) in der Animation.
Schauen Sie sich die Homepage an, um zu sehen einige Beispiele in Aktion. Es ist ziemlich klar, was Sie tun können, und der Quellcode ist direkt zum Kopieren / Einfügen in Ihre eigene Arbeit verfügbar.
Bitte beachten Sie, dass dies ist keine vollwertige Bibliothek. Das ist ein Generator erstellt Ihren CSS-Code im Handumdrehen je nachdem, was Sie für die Animationsverzögerung benötigen.
Wenn Sie eine einfachere Lösung außerhalb des Standorts wünschen, können Sie dies tun Laden Sie das Sass-Mixin herunter. Dies ist ein bisschen schwieriger, weil es erfordert eine Sass-Karte, Sie müssen also wissen, wie Sie benutzerdefinierte Eigenschaften hinzufügen und Ihre Syntax richtig schreiben.
Hier ist ein Beispiel, wie du es tun würdest nenne das mixin:
@include waitAnimate ((animationName: animName, Keyframes: (0: (Transformation: Maßstab (1), Hintergrundfarbe: blau), 50: (Transformation: Maßstab (2), Hintergrundfarbe: Grün), 100: (Transformation.) : Skala (3), Hintergrundfarbe: Rot)), Dauer: 2, waitTime: 1, timingFunction: Leichtigkeit, IterationCount: Unendlich));
Professionelle Webentwickler sollten kein Problem damit haben, die Seile zu lernen und daraus ein wiederverwendbares Mixin zu machen. Anfänger können sich jedoch schwer tun, um sie zum Laufen zu bringen, daher die Web-App.
All das Quellcode ist kostenlos verfügbar auf GitHub wenn Sie eine Kopie lokal herunterladen möchten. Da dies jedoch ein merkwürdiges Feature ist, werden Sie dies wahrscheinlich in vielen Projekten nicht benötigen. Deshalb das WARTEN! Animate Web App sollte mehr als genug sein, um Ihnen zu helfen ein einmaliges Problem lösen von Verzögerte Animationen werden mit reinem CSS verzögert.
Es ist ein wirklich spaßiger Hack, der auch vom Design her ziemlich unklar ist. Aber es zeigt, wie viel mit CSS3 möglich ist und ein bisschen Einfallsreichtum.
