CSS-Eigenschaft animation-duration

Die CSS-Eigenschaft animation-duration Die CSS-Eigenschaft definiert die Zeitspanne (in Sekunden oder Millisekunden), die eine Animation benötigt, um einen Zyklus der Animation abzuschließen. Sehr oft wird die Shorthand-Eigenschaft animation verwendet, um alle Animationseigenschaften auf einmal festzulegen. Der Standardwert für die Eigenschaft animation-duration ist 0.

Anfangswert 0
Gilt für Alle Elemente, Pseudo-Elements ::before und ::after
Geerbt Nein
Animierbar Nein
Version CSS3
DOM Syntax object.style.animationDuration = "4s";

Syntax

animation-duration: time | initial | inherit;

Versuchen wir ein Beispiel, wo die Dauer der Animation 7 Sekunden beträgt.

Beispiel

<!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">Der Hintergrund dieses Textes wird mithilfe der CSS3-Eigenschaft animation animiert.</div>
  </body>
</html>

Sehen Sie ein weiteres Beispiel, wo die Animationsdauer auf 6 Sekunden eingestellt ist.

Beispiel

<!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>

Werte

Wert Beschreibung
time Es gibt die Zeitspanne, die eine Animation für den Zyklus benötigt, an. Das kann in Sekunden oder Millisekunden angegeben werden. Der Standardwert ist 0.
initial Es setzt die Eigenschaft auf den Standardwert.
inherit Es erbt die Eigenschaft von ihrem übergeordneten Element.

Browser-Support

chrome firefox safari opera
43.0+
4.0-42.0 -webkit-
16.0+
5.0-15.0 -moz-
9.0+
5.1-8.0 -webkit-
12.0+
15.0-29.0 -webkit-

Übe dein Wissen

Was tut die CSS-Eigenschaft 'animation-duration'?
Finden Sie das nützlich?