CSS animation-duration-Eigenschaft

Die animation-duration-Eigenschaft definiert die Zeitdauer (in Sekunden oder Millisekunden), die eine Animation benötigt, um einen vollständigen Zyklus abzuschließen. Sehr häufig wird die animation-Kurzschreibweise verwendet, um alle Animationseigenschaften auf einmal festzulegen. Der Standardwert für die animation-duration-Eigenschaft ist 0s, was bedeutet, dass die Animation sofort abgeschlossen wird und die Keyframes keine sichtbare Wirkung entfalten. Negative Werte sind ungültig und führen dazu, dass die Eigenschaft ignoriert wird. Einige frühere Implementierungen können sie jedoch als gleich 0s behandeln.

Wenn für eine beliebige Animationseigenschaft mehrere durch Kommas getrennte Werte angegeben werden, werden sie in der Reihenfolge auf die entsprechenden Animationen angewendet, die in animation-name definiert sind. Wenn es mehr Werte als Animationsnamen gibt, werden die Werte vom Anfang an wiederholt.

Die animation-duration-Eigenschaft ist eine der CSS3-Eigenschaften.

Anfangswert	0s
Anwendbar auf	Alle Elemente, ::before und ::after Pseudo-Elemente.
Vererbbar	Nein.
Animierbar	Nein.
Version	CSS3
DOM-Syntax	object.style.animationDuration = "4s";

Syntax

Syntax der CSS animation-duration-Eigenschaft

css

animation-duration: time | initial | inherit;

Beispiel zur animation-duration-Eigenschaft:

Beispiel für die CSS animation-duration-Eigenschaft mit Sekunden

html

<!DOCTYPE html>
<html>
  <head>
    <style>
      .element {
        padding: 50px;
        animation: pulse 7s infinite;
      }
      @keyframes pulse {
        0% {
          background-color: #8ebf42;
        }
        50% {
          background-color: #1c87c9;
        }
        100% {
          background-color: #eee
        }
      }
    </style>
  </head>
  <body>
    <div class="element">Background of this text is animated using CSS3 animation property</div>
  </body>
</html>

Try it Yourself »

Beispiel zur animation-duration-Eigenschaft mit einer Dauer von 6 Sekunden:

Beispiel für die CSS animation-duration-Eigenschaft mit 6 Sekunden

html

<!DOCTYPE html>
<html>
  <head>
    <style>
      html,
      body {
        height: 100%;
        margin: 0;
      }
      body {
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .element {
        height: 200px;
        width: 200px;
        background-color: #1c87c9;
        animation: nudge 6s ease infinite alternate, nudge 6s linear infinite alternate;
      }
      @keyframes nudge {
        0%,
        100% {
          transform: translate(0, 0);
        }
        60% {
          transform: translate(150px, 0);
        }
        80% {
          transform: translate(-150px, 0);
        }
      }
    </style>
  </head>
  <body>
    <div class="element"></div>
  </body>
</html>

Try it Yourself »

Werte

Wert	Beschreibung	Abspielen
time	Gibt die Zeitdauer an, die eine Animation für einen vollständigen Zyklus benötigt. Werte können in Sekunden (`s`) oder Millisekunden (`ms`) angegeben werden. Beachten Sie, dass der Standardwert der Eigenschaft selbst `0s` und nicht das Schlüsselwort `time` ist.	Abspielen »
initial	Legt fest, dass die Eigenschaft ihren Standardwert verwendet.
inherit	Erbt die Eigenschaft von ihrem übergeordneten Element.

Praxis

Welche Rolle spielt die CSS animation-duration-Eigenschaft und wie wird sie angegeben?

Die CSS animation-duration-Eigenschaft wird verwendet, um die Anzahl der Sekunden oder Millisekunden zu definieren, die eine Animation für einen vollständigen Zyklus benötigt.Die CSS animation-duration-Eigenschaft wird verwendet, um die Animationsfarbe in CSS festzulegen.Die CSS animation-duration-Eigenschaft wird in Prozent angegeben.Die CSS animation-duration-Eigenschaft wird in Sekunden (s) oder Millisekunden (ms) angegeben.Die CSS animation-duration-Eigenschaft ist dafür verantwortlich, die Richtung der Animation in CSS zu definieren.

CSS animation-duration-Eigenschaft ​

Syntax ​

Beispiel zur animation-duration-Eigenschaft: ​

Beispiel zur animation-duration-Eigenschaft mit einer Dauer von 6 Sekunden: ​