Heute stelle ich einen sehr einfachen Trick vor, um die Wiedergabe und Pause von Animationen mit CSS zu steuern. Bei richtiger Anwendung kann es in vielen praktischen Szenarien eingesetzt werden. Schauen wir uns ein Beispiel an. Dieses Beispiel habe ich beim Durchsuchen von Codepen gesehen. Es ist sehr interessant: Dieses Beispiel, CodePen: https://codepen.io/mikegolus/pen/jJzRwJ Der gesamte oben genannte Vorgang wird durch CSS abgeschlossen. Lassen wir einmal beiseite, wie man mit CSS einige der oben genannten UI-Effekte erzielt. In diesem Artikel geht es hauptsächlich darum, wie Sie den Fortschritt, die Pause und den Start einer Animation nur mit CSS steuern können. Dekonstruktions- und Analyseanforderungen Der durch die obige Animationssteuerung zu erzielende Effekt ist:
Bedürfnisse lösen Dies mag kompliziert erscheinen, ist aber eigentlich sehr einfach zu implementieren, hauptsächlich mithilfe der Pseudoklasse Nehmen wir als Beispiel einen sich bewegenden Ball. Der Ball bewegt sich von links nach rechts. <div></div> div { Rand: 50px automatisch; Breite: 100px; Höhe: 100px; Hintergrund: #000; Animation: 1 s lineare Bewegung; Animationsfüllmodus: vorwärts; } @keyframes verschieben { 100 % { transformieren: verschieben(200px, 0) drehen(180 Grad); } } Als nächstes führen wir eine einfache Transformation durch. Der Standardzustand der Animation ist angehalten: div { Rand: 50px automatisch; Breite: 100px; Höhe: 100px; Hintergrund: #000; Animation: 1 s lineare Bewegung; Animationsfüllmodus: vorwärts; + Animation-Wiedergabestatus: angehalten; } Die Animation wird nur ausgeführt, wenn darauf geklickt wird: body:aktives div { Animations-Wiedergabestatus: läuft; } Schaut euch den Effekt an. Um den Klickvorgang besser erkennbar zu machen, habe ich zusätzlich die Hintergrundfarbe während des Klickvorgangs geändert (die Hintergrundfarbänderungen zeigen an, dass die Maus aktuell gedrückt ist): CodePen-Demo: https://codepen.io/Chokcoco/pen/XGvwjL Um zusammenzufassen Eigentlich ist der gesamte Vorgang ganz einfach. Wenn Sie diese Methode verstanden haben, können Sie sie zu jeder gewünschten Animation hinzufügen. Hier ist eine ähnliche Demo: CodePen-Demo: https://codepen.io/Chokcoco/pen/ZPgxwy Ein sehr nützlicher kleiner Trick. Holen Sie ihn sich jetzt. Damit ist dieser Artikel mit Tipps zur Steuerung der Wiedergabe und Pause von Animationen mit CSS abgeschlossen (sehr praktisch). Weitere relevante Inhalte zur Steuerung der Wiedergabe und Pause von Animationen mit CSS finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen! |
<<: Details zur Reihenfolge, in der MySQL my.cnf liest
>>: Der gesamte Prozess der IDEA-Integration von Docker zur Bereitstellung eines Springboot-Projekts
1. Einleitung In letzter Zeit erlebe ich es oft, ...
Wie unten dargestellt: Ersetzen Sie es einfach, w...
1. Postgres-Datenbanksicherung in Docker Befehl: ...
1. Grundkenntnisse: HTTP-Header-Benutzeragent Use...
Dieser Artikel veranschaulicht anhand von Beispie...
Umsetzungsideen: Zunächst müssen die Alarminforma...
Der Server meldet einen Fehler 502 beim Synchroni...
Inhaltsverzeichnis Warum Docker verwenden? Docker...
Kürzlich hat Microsoft das Serversystem 2019 verö...
Beispielsweise gibt es ein Eingabefeld <el-Ein...
1. Versuchsbeschreibung Installieren Sie in der v...
Inhaltsverzeichnis Bedingte Kompilierung Seitenla...
1. Legen Sie den CORS-Antwortheader fest, um domä...
Warum ist die Geschwindigkeit beim Öffnen des lok...
In diesem Artikelbeispiel wird der spezifische Ja...