CSS-Tipps zur Steuerung der Wiedergabe und Pause von Animationen (sehr praktisch)

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:

1. Nachdem die Seite gerendert wurde, wird die Animation nicht ohne eine Aktion gestartet. Die Animation startet erst, wenn mit der Maus auf das Element click , wodurch der Pseudoklasseneffekt :active des Elements ausgelöst wird.
2. Wenn Sie während der Animation zu irgendeinem Zeitpunkt aufhören, mit der Maus zu klicken, wird die Animation gestoppt.
3. Klicken Sie erneut auf das Element, und die Animation wird dort fortgesetzt, wo das vorherige Frame endete.
4. Wenn die Animation beendet ist, wird sie durch erneutes Klicken nicht erneut abgespielt und der Animationsstatus bleibt beim letzten Frame der Animation.

Bedürfnisse lösen

Dies mag kompliziert erscheinen, ist aber eigentlich sehr einfach zu implementieren, hauptsächlich mithilfe der Pseudoklasse :active und des Animationswiedergabestatus animation-play-state .

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!