Tutorial zur Verwendung von CSS zur Implementierung der Pause- und Wiedergabefunktionen von CSS-Animationen

CSS ist eine Sprache, die Stilstrukturen wie Schriftarten, Farben, Positionen usw. definiert. Sie wird verwendet, um die Art und Weise zu beschreiben, wie Informationen auf Webseiten formatiert und angezeigt werden. CSS-Stile können direkt in HTML-Webseiten oder in separaten Stylesheet-Dateien gespeichert werden. In jedem Fall enthält ein Stylesheet Regeln zum Anwenden von Stilen auf Elemente eines bestimmten Typs. In diesem Abschnitt stellen wir Ihnen ein Tutorial zur Verwendung von CSS zur Implementierung der Pausen- und Wiedergabefunktionen von CSS-Animationen vor.

Wir wissen, dass es in CSS3-Animationen eine solche Eigenschaft gibt, die Animationen anhalten und abspielen kann:

{ 
   animation-play-state: paused | running; 
 }

animation-play-state: Die Eigenschaft definiert, ob eine Animation ausgeführt oder angehalten wird . Sie können es abfragen, um festzustellen, ob die Animation ausgeführt wird. Darüber hinaus kann der Wert so eingestellt werden, dass die Wiedergabe der Animation angehalten und fortgesetzt wird.

Mit Hilfe von Javascript können wir die Ausführung und Wiedergabe von CSS-Animationen steuern. Nachfolgend sind einige Schlüsselcodes aufgeführt:

<div class="btn">stop</div>  <div class="animation"></div> 
 <style>  .animation {      animation: move 2s linear infinite alternate;  } 
  @keyframes move {      0% {          transform: translate(-100px, 0);      }  
      100% {          transform: translate(100px, 0);      }  }
        </style> document.querySelector(&#39;.btn&#39;).addEventListener(&#39;click&#39;, function() 
        {      let btn = document.querySelector(&#39;.btn&#39;);      let elem = document.querySelector(&#39;.animation&#39;);  
            let state = elem.style[&#39;animationPlayState&#39;];            if(state === &#39;paused&#39;)
             {          elem.style[&#39;animationPlayState&#39;] = &#39;running&#39;;          btn.innerText = &#39;stop&#39;;      }
              else {          elem.style[&#39;animationPlayState&#39;] = &#39;paused&#39;;          btn.innerText = &#39;play&#39;;      }        }); 
Demo — pause CSS Animation(https://codepen.io/Chokcoco/pen/GWYBdM)

Reine CSS-Implementierung

Lass uns diskutieren Wie unten dargestellt, kann dies mit reinem CSS erreicht werden.

Implementierung der Hover-Pseudoklasse

Verwenden Sie die Hover-Pseudoklasse, um die Pause des Animationsstils zu steuern, wenn sich die Maus über der Schaltfläche befindet.

Der Schlüsselcode lautet wie folgt:

<div class="btn stop">stop</div> 
 
<div class="animation"></div> 
 
<style> 
 .stop:hover ~ .animation { 
 
    animation-play-state: paused; 
 
} 
 
</style>

Demo – reine CSS-Methode zur Realisierung der Pause und Wiedergabe von CSS-Animationen (Hover): (https://codepen.io/Chokcoco /pen/PpxKBX)

Natürlich ist diese Methode nicht intelligent genug. Wenn Sie die Freiheit der Maus loslassen, klicken Sie einmal, um anzuhalten, und klicken Sie dann erneut, um abzuspielen. Gibt es eine andere Methode?

Überprüfte Pseudoklassenimplementierung

Im vorherigen Artikel „Interessantes CSS-Thema (8): Reine CSS-Navigationsleisten-Tab-Wechsellösung“ wurde auch über die Verwendung des Radio-Tags gesprochen überprüfte Pseudoklasse sowie die Implementierung von reinem CSS zur Erfassung von Klickereignissen.

Und Sie können einige CSS-Stile mithilfe des angeklickten Elements steuern. Die Implementierung ist wie folgt:

<input id="stop" type="radio" name="playAnimation" /> 
 
<input id="play" type="radio" name="playAnimation" /> 
 
<div class="box"> 
 
    <label for="stop"> 
 
        <div class="btn">stop</div> 
 
    </label> 
 
    <label for="play"> 
 
        <div class="btn">play</div> 
 
    </label> 
 
</div> 
 
<div class="animation"></div>

Teil des wichtigsten CSS-Codes:

.animation { 
 
    animation: move 2s linear infinite alternate; 
 
} 
 
  
 #stop:checked ~ .animation { 
 
    animation-play-state: paused; 
 
} 
 
  
 #play:checked ~ .animation { 
 
    animation-play-state: running; 
 
}

Wir hoffen, dass die Animation abgespielt wird, wenn auf die beiden Radios #stop und #play geklickt wird jeweils dem .animation-Element zugewiesen werden. Da nur einer der beiden wirksam werden kann, muss den beiden Radio-Tags das gleiche Namensattribut zugewiesen werden.

DEMO – Implementieren der Pause und Wiedergabe von CSS-Animationen mit reinem CSS: (https://codepen.io/Chokcoco/pen/QpJwBW)

In der obigen Beispiel-Demo ist reines CSS implementierte Methode zum Anhalten und Abspielen der CSS-Animation.

Natürlich gibt es auch andere Methoden, z. B. das Ersetzen von Radio durch ein Kontrollkästchen oder die Verwendung des :target-Pseudoklassenselektors, um den gleichen Effekt wie oben zu erzielen. Wenn Sie interessiert sind, können Sie es ausprobieren.

Das Obige ist ein Tutorial zur Implementierung der Pause- und Wiedergabefunktion von CSS-Animationen mit CSS. Ich hoffe, es kann Ihnen helfen.

Verwandte Empfehlungen:

So erstellen Sie QQ Penguin mit HTML und CSS

CSS, um ein bewegliches Katzengesicht zu realisieren

CSS3 einfaches Tutorial zum grafischen Zeichnen

Das obige ist der detaillierte Inhalt vonTutorial zur Verwendung von CSS zur Implementierung der Pause- und Wiedergabefunktionen von CSS-Animationen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!