So spielen und pausieren Sie CSS -Animationen mit CSS -benutzerdefinierten Eigenschaften

Spielen und Pause von CSS -Animationen: Verwenden Sie die benutzerdefinierten CSS -Eigenschaften, um die Kontrolle zu kontrollieren

In diesem Artikel werden CSS @keyframes -Animation erörtert und sich darauf konzentriert, wie die Animation innehalten und kontrolliert werden. Obwohl animation-play-state verwendet werden kann, um mit JavaScript zur Kontrolle zusammenzuarbeiten, gibt es viele Details. Wir werden eine flexiblere Setup -Methode einführen, bei der CSS -benutzerdefinierte Eigenschaften verwendet werden, um eine feine Steuerung von Animationen zu ermöglichen.

Die Wichtigkeit der Pause von Animationen

Bei der Entwicklung einer CSS-gesteuerten Folie bemerkte ich ein interessantes Phänomen: Animationen, die nicht im Fenster enthalten sind, werden noch ausgeführt! Dies lässt mich denken: Verbrauchen diese laufenden Animationen immer noch die CPU/GPU -Ressourcen und beeinflussen so die Seitenleistung?

Obwohl das Performance-Panel der Devtools den Animationsverbrauch von "Off-Screen" -Rahmen nicht direkt anzeigen kann, pausiert die Animation beim Scrollen von der Folie und der Rückkehr jedoch nicht zum nächsten Bildschirm.

Daher ist es entscheidend zu untersuchen, wie Animationen in der Pause sind, was mit:

1. Leistung: Vermeiden Sie unnötigen Ressourcenverbrauch.
2. Steuerung: Bietet Benutzersteuerung über Animation.
3. Barrierefreiheit: Bedenken Sie, dass einige Benutzer möglicherweise an Animationen sensibel sind.

Grundlegende Möglichkeiten zur Pause Animation

In CSS besteht die einzige Möglichkeit, die Animation zu pausieren, darin animation-play-state zu verwenden und ihren Wert auf paused festzulegen:

 .pause {
  Animationsspielstaat: Pause;
}

In JavaScript ist diese Eigenschaft animationPlayState , und die Einstellungsmethode lautet wie folgt:

 Element.Style.AnimationPlayState = 'Pause';

Wir können einen Spiel-/Pause erstellen, indem wir den aktuellen Wert von animationPlayState lesen:

 const running = element.style.AnimationPlayState === 'running';
Element.Style.AnimationPlayState = Running? 'Pause': 'Running';

Eine andere Möglichkeit, die Animation zu pausieren, besteht darin, animation-duration auf 0s festzulegen. Die Animation läuft tatsächlich noch, aber da die Dauer Null ist, wird keine Aktion gesehen. Dies ist jedoch keine echte Pause.

Direkte Entfernung der Animation ( animation: none !important; ) ist auch keine echte Pause.

Benutzerdefinierte Eigenschaften mit Datenattributen und CSS

Wir verwenden Datenattribute (z. data-animation ) als CSS-Selektor und verwenden CSS-benutzerdefinierte Attribute als Wert des Animationsattributs:

<div data-animation=""></div>

 [Datenanimation] {
  Animation:
    var (-Animn, keine)
    var (-Animdur, 1s)
    var (-dimtf, linear)
    var (-Animdel, 0s)
    var (-Animik, unendlich)
    var (-AnimDir, Alternative)
    var (-Animfm, keine)
    var (-Animps, laufend);
}

Durch benutzerdefinierte Eigenschaften können wir alle Aspekte der Animation steuern. Der Vorteil der benutzerdefinierten CSS -Eigenschaften besteht darin, dass sie in CSS und JavaScript gelesen und festgelegt werden können und die Menge an CSS -Code reduzieren können.

Die Animation selbst verwendet einen Klassenwähler und aktualisiert die Variablen im Selektor [data-animation] :

 /* Animationsklasse*/
.a-pulse {
  --Animn: Puls;
}
.a-Slide {
  -animdur: 3s;
  --Animn: Slide;
}

/* Keyframe*/
@keyframes pulse {
  / * ... */
}
@keyframes Slide {
  / * ... */
}

Beispiel: Verwenden Sie den Checkbox Trick, um die Animation zu pausieren

Erstellen Sie ein Kontrollkästchen zur Steuerung der Pausen für alle Animationen:

<input type="checkbox" id="data-animation-pause">

 [Data-Animation-Pause]: Überprüft ~ [Datenanimation] {
  -Animps: Pause;
}

Klicken Sie auf das Kontrollkästchen, um alle Animationen ohne JavaScript zu pausieren/abzuspielen.

CSS-Nur-Diashow

Ich benutze<details></details> Tags erstellen eine Folie, die die Folien automatisch durch das Active Animation autoplay schaltet. Jede Folie hat eine eigene sekundäre Animation. Das Attribut --animps steuert den Wiedergabestatus der Animation --img-animps Attribut steuert den Wiedergabestatus der sekundären Animation.

Um eine GPU -Überladung zu verhindern, sollte die Hauptanimation im Idealfall alle sekundären Animationen innehalten. Chrome Browser (derzeit) kann CSS -benutzerdefinierte Eigenschaften von @keyframes Animation aktualisieren.

Aktualisieren Sie --img-animps in der Hauptanimation @keyframes :

 @keyframes autoplay {
  / * ... */
  51% {-Img-Animps: Pause} /* Stop! */
  / * ... */
}

Um mit anderen Browsern kompatibel zu sein, muss der Anfangswert auf running gesetzt werden.

Aktivieren Sie prefers-reduced-motion

Wir können Medienabfragen prefers-reduced-motion verwenden, um auf Benutzereinstellungen zu reagieren:

 @media (bevorzugt-reduzierte Bewegung) {
  [Data-Animation = "Alternate"] {
    -animdur: 4s;
    --Animn: Deckkraft;
  }
  / * ... */
}

Pause Animation mit JavaScript

Wir können JavaScript verwenden, um alle [data-animation] Elemente zu iterieren und das Attribut --animps zu wechseln:

 // ... JavaScript -Code ...

Verwendung von IntersectionObserver

Um Animationen automatisch abzuspielen und zu pausieren, können wir IntersectionObserver verwenden:

 // ... JavaScript -Code ...

Fügen Sie der Folie (Bonus) Audio hinzu

Fügen Sie ein Audio -Tag hinzu und kontrollieren Sie seine Wiedergabe und Pause in JavaScript:

<audio src="your-audio.mp3"></audio>

 // ... JavaScript -Code ...

Durch die oben genannten Methoden können wir die Wiedergabe und Pause von CSS -Animationen flexibel steuern und die Seitenleistung und -börse verbessern.

Das obige ist der detaillierte Inhalt vonSo spielen und pausieren Sie CSS -Animationen mit CSS -benutzerdefinierten Eigenschaften. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!