Wie kann ich CSS-Animationen mit benutzerdefinierten CSS-Eigenschaften abspielen und anhalten?-CSS-Tutorial-php.cn

Wie kann ich CSS-Animationen mit benutzerdefinierten CSS-Eigenschaften abspielen und anhalten?

王林

Freigeben： 2023-09-19 08:29:07

nach vorne

1512 Leute haben es durchsucht

如何使用 CSS 自定义属性播放和暂停 CSS 动画？

In SS sind Animationen eine effektive Möglichkeit, Ihrer Website visuelle Effekte hinzuzufügen. Manchmal möchten wir jedoch mehr Kontrolle darüber haben, wann und wie diese Animationen abgespielt werden. Hier erfahren Sie, wie Sie benutzerdefinierte CSS-Eigenschaften verwenden, um CSS-Animationen abzuspielen und anzuhalten.

Bevor wir fortfahren, sollten wir wissen, dass CSS-Animationen mithilfe von Keyframes oder durch den Übergang zwischen zwei oder mehr Zuständen erstellt werden können.

Grammatik

@keyframes animation-name {
   /* define the animation steps */
}

Nach dem Login kopieren

Wir definieren die Animation, indem wir ihr einen Namen geben und das Schlüsselwort @keyframes verwenden. Innerhalb der geschweiften Klammern definieren wir die Schritte der Animation mithilfe von Prozentsätzen oder Schlüsselwortwerten.

Animation in CSS abspielen und anhalten

In CSS bezieht sich das Abspielen und Anhalten von Animationen auf die Möglichkeit, animierte Elemente zu steuern. Dies ist eine Möglichkeit, Ihrer Website Bewegung und visuelles Interesse zu verleihen.

Mit Animationen abspielen und anhalten können wir steuern, wann und wie diese Animationen abgespielt werden. Dies ist nützlich, wenn wir möchten, dass der Benutzer die Animation anhalten kann, wenn er sich konzentrieren muss.

In CSS können wir die Eigenschaft „animation-play-state“ verwenden, um zu steuern, ob die Animation ausgeführt oder angehalten wird. Standardmäßig ist die Eigenschaft animation-play-state auf running eingestellt, was bedeutet, dass die Animation automatisch abgespielt wird, wenn die Seite geladen wird. Wir können jedoch CSS verwenden, um den Wert dieser Eigenschaft zu ändern, um die Animation jederzeit zu starten oder zu stoppen.

Um Wiedergabe- und Pause-Animationseffekte mit CSS zu erstellen, können Sie diese Schritte befolgen -

Schritt 1: Animation definieren

Im ersten Schritt müssen wir die Animation definieren, die wir steuern möchten. Mithilfe von Keyframes können wir eine einfache Animation erstellen.

Schritt 2: Erstellen Sie Wiedergabe- und Pauseneffekte

Nachdem wir die Animation definiert haben, müssen wir das Element erstellen, das die Animation steuert. Wir können jedes HTML-Element wie Schaltflächen, Kontrollkästchen und Hover-Effekte verwenden.

Schritt 3: Definieren Sie benutzerdefinierte CSS-Eigenschaften

Jetzt müssen wir die benutzerdefinierte CSS-Eigenschaft definieren, die den Animationsstatus enthält. Wir können einen beliebigen Namen für die benutzerdefinierte Eigenschaft verwenden, in diesem Beispiel verwenden wir jedoch --animation-play-state und --animation-timingfunction.

Wir werden die oben genannten Konzepte anhand von Beispielen verstehen.

Beispiel 1

Hier ist ein Beispiel für die Erstellung einer einfachen Diashow-Animation.

<!DOCTYPE html>
<html>
<head>
   <style>
      body { text-align: center;}
      .box {
         display: flex;
         height: 80px;
         width: 80px;
         border-radius: 10%;
         color: white;
         background-color: green;
         position: relative;
         animation: my-animation 6s infinite;
      }
      .box:hover { animation-play-state: paused;}
      @keyframes my-animation {
         from {left: 0px;}
         to {left: 400px;}
      }
   </style>
</head>
   <body>
      <h2>A simple animation of a slide</h2>
      <div class="box">Mouse Hove to give me a break.</div>
   </body>
</html>

Nach dem Login kopieren

Beispiel 2

Dies ist ein weiteres Beispiel für das Abspielen und Anhalten von CSS-Animationen mithilfe benutzerdefinierter CSS-Eigenschaften.

<!DOCTYPE html>
<html>
<head>
   <style>
      body { text-align: center; }
      .box {
         align-items: center;
         background-color: green;
         display: flex;
         height: 80px;
         width: 80px;
         margin-top: 10px;
         border-radius: 10%;
      }
      .my-slide {--animdur: 5s; --animn: slide; }
      [my-animation] {
         animation: var(--animn, none) var(--animdur, 0s) var(--animtf,
         linear) var(--animic, infinite) var(--animdir, alternate) var(--animps,
         running);
      }
      [my-animation-pause]:checked~[my-animation] {
         --animps: paused;
      }
      @keyframes slide {
         from { margin-left: 0%;}
         to {margin-left: calc(100% - 80px);}
      }
   </style>
</head>
   <body>
      <input type="checkbox" my-animation-pause id="move" class="#" />
      <label for="move" class="#">Check Me to play/paus</label>
      <div class="box my-slide" my-animation="stop"></div>
   </body>
</html>

Nach dem Login kopieren

Fazit

Die Verwendung benutzerdefinierter CSS-Eigenschaften zum Abspielen und Anhalten von CSS-Animationen bietet eine einfache und effektive Möglichkeit, Animationen auf Webseiten zu steuern. Im ersten Beispiel verwenden wir eine Keyframe-Animation, um die Animation zu definieren, und die Eigenschaft „animation-play-state“, um ihren Zustand zu steuern. Im zweiten Beispiel verwenden wir eine Übergangsanimation und ändern den Wert einer benutzerdefinierten Eigenschaft, um den Status der Animation zu steuern. Beide Techniken bieten eine Möglichkeit, dynamische Animationen zu erstellen, die einfach per CSS gesteuert werden können.

Das obige ist der detaillierte Inhalt vonWie kann ich CSS-Animationen mit benutzerdefinierten CSS-Eigenschaften abspielen und anhalten?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!