CSS-Eigenschaft animation-duration

❮ Vorige Nächste ❯

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>

Versuch es selber!

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>

Versuch es selber!

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.