animation-duration

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.

Die animation-duration CSS Eigenschaft legt fest, wie lange eine Animation braucht, um einen Zyklus zu vollenden.

Probieren Sie es aus

Es ist oft praktisch, die Kurzschreibweise animation zu verwenden, um alle Animationseigenschaften gleichzeitig festzulegen.

Syntax

css
/* Single animation */
animation-duration: auto; /* Default */
animation-duration: 6s;
animation-duration: 120ms;

/* Multiple animations */
animation-duration: 1.64s, 15.22s;
animation-duration: 10s, 35s, 230ms;

/* Global values */
animation-duration: inherit;
animation-duration: initial;
animation-duration: revert;
animation-duration: revert-layer;
animation-duration: unset;

Werte

auto

Bei zeitbasierten Animationen ist auto gleichbedeutend mit einem Wert von 0s (siehe unten). Bei CSS scrollgesteuerten Animationen füllt auto die gesamte Zeitleiste mit der Animation.

<time>

Die Zeit, die eine Animation benötigt, um einen Zyklus zu vollenden. Diese kann entweder in Sekunden (s) oder Millisekunden (ms) angegeben werden. Der Wert muss positiv oder null sein, und die Einheit ist erforderlich.

Wenn kein Wert angegeben wird, wird der Standardwert von 0s verwendet. In diesem Fall wird die Animation dennoch ausgeführt (die Ereignisse animationStart und animationEnd werden ausgelöst). Ob die Animation sichtbar ist, wenn die Dauer 0s beträgt, hängt vom Wert von animation-fill-mode ab, wie unten erläutert:

  • Wenn animation-fill-mode auf backwards oder both eingestellt ist, wird der erste Frame der Animation gemäß animation-direction während des animation-delay Countdowns angezeigt.
  • Wenn animation-fill-mode auf forwards oder both eingestellt ist, wird der letzte Frame der Animation gemäß animation-direction nach Ablauf der animation-delay angezeigt.
  • Wenn animation-fill-mode auf none eingestellt ist, hat die Animation keinen sichtbaren Effekt.

Hinweis: Negative Werte sind ungültig, was dazu führt, dass die Deklaration ignoriert wird. Einige frühe, mit Präfixen versehene Implementierungen könnten sie als identisch mit 0s betrachten.

Hinweis: Wenn Sie mehrere durch Kommas getrennte Werte bei einer animation-* Eigenschaft angeben, werden sie in der Reihenfolge angewendet, in der die animation-names erscheinen. Für Situationen, in denen die Anzahl der Animationen und animation-* Eigenschaftswerte nicht übereinstimmen, siehe Festlegen mehrerer Animations-Eigenschaftswerte.

Hinweis: Beim Erstellen von CSS scrollgesteuerten Animationen macht es keinen wirklichen Sinn, einen animation-duration Wert in Sekunden oder Millisekunden anzugeben. In Tests schien es keinen Einfluss auf Scrollfortschritts-Zeitleistenanimationen zu haben, während es bei Sichten-Fortschritts-Zeitleistenanimationen die Animation näher zum Ende der Zeitleiste zu treiben schien. Firefox erfordert jedoch, dass animation-duration gesetzt ist, damit die Animation erfolgreich angewendet wird. Es wird daher empfohlen, animation-duration auf 1ms zu setzen, damit Animationen in Firefox funktionieren, ohne dass der Effekt dadurch zu stark verändert wird.

Formale Definition

Anfangswert0s
Anwendbar aufalle Elemente, ::before und ::after Pseudoelemente
VererbtNein
Berechneter Wertwie angegeben
AnimationstypNot animatable

Formale Syntax

animation-duration = 
  <time [0s,∞]>#

Beispiele

Animation-Dauer festlegen

Diese Animation hat eine animation-duration von 0,7 Sekunden.

HTML

html
<div class="box"></div>

CSS

css
.box {
  background-color: rebeccapurple;
  border-radius: 10px;
  width: 100px;
  height: 100px;
}

.box:hover {
  animation-name: rotate;
  animation-duration: 0.7s;
}

@keyframes rotate {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}

Ergebnis

Fahren Sie mit der Maus über das Rechteck, um die Animation zu starten.

Sehen Sie CSS-Animationen für weitere Beispiele.

Spezifikationen

Specification
CSS Animations Level 1
# animation-duration

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch