`animation-duration` CSS property

Baseline

Weitgehend verfügbar

Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit September 2015 browserübergreifend verfügbar.

* Einige Teile dieser Funktion werden möglicherweise unterschiedlich gut unterstützt.

Vollständige Kompatibilität anzeigen
Mehr erfahren

Die CSS-Eigenschaft animation-duration legt die Zeitspanne fest, die eine Animation benötigt, um einen Zyklus abzuschließen.

Es ist oft praktisch, die Kurzform-Eigenschaft animation zu verwenden, um alle Animationseigenschaften auf einmal festzulegen.

Probieren Sie es aus

animation-duration: 750ms;

animation-duration: 3s;

animation-duration: 0s;

<section class="flex-column" id="default-example">
  <div class="animating" id="example-element"></div>
  <button id="play-pause">Play</button>
</section>

#example-element {
  animation-direction: alternate;
  animation-iteration-count: infinite;
  animation-name: slide;
  animation-play-state: paused;
  animation-timing-function: ease-in;
  background-color: #1766aa;
  border-radius: 50%;
  border: 5px solid #333333;
  color: white;
  height: 150px;
  margin: auto;
  margin-left: 0;
  width: 150px;
}

#example-element.running {
  animation-play-state: running;
}

#play-pause {
  font-size: 2rem;
}

@keyframes slide {
  from {
    background-color: orange;
    color: black;
    margin-left: 0;
  }
  to {
    background-color: orange;
    color: black;
    margin-left: 80%;
  }
}

const el = document.getElementById("example-element");
const button = document.getElementById("play-pause");

button.addEventListener("click", () => {
  if (el.classList.contains("running")) {
    el.classList.remove("running");
    button.textContent = "Play";
  } else {
    el.classList.add("running");
    button.textContent = "Pause";
  }
});

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

Diese Eigenschaft wird als durch Kommas getrennte Liste der folgenden Werte angegeben:

auto

Bei zeitbasierten Animationen entspricht auto einem Wert von 0s (siehe unten). Bei CSS-Scroll-gesteuerten Animationen füllt auto die gesamte Timeline mit der Animation.

<time>

Die Zeit, die eine Animation benötigt, um einen Zyklus abzuschließen. Sie 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 0s verwendet. In diesem Fall wird die Animation trotzdem ausgeführt (die Ereignisse animationStart und animationEnd werden ausgelöst). Ob die Animation bei einer Dauer von 0s sichtbar ist oder nicht, hängt vom Wert von animation-fill-mode ab, wie unten erläutert:

Wenn animation-fill-mode auf backwards oder both gesetzt ist, wird während des Countdowns von animation-delay das erste Frame der Animation angezeigt, wie durch animation-direction definiert.
Wenn animation-fill-mode auf forwards oder both gesetzt ist, wird nach Ablauf von animation-delay das letzte Frame der Animation angezeigt, wie durch animation-direction definiert.
Wenn animation-fill-mode auf none gesetzt ist, hat die Animation keinen sichtbaren Effekt.

Hinweis: Negative Werte sind ungültig, wodurch die Deklaration ignoriert wird. Einige frühe Implementierungen mit Präfix behandeln sie möglicherweise als identisch mit 0s.

Hinweis: Wenn Sie mehrere durch Kommas getrennte Werte für eine animation-*-Eigenschaft angeben, werden sie in der Reihenfolge auf die Animationen angewendet, in der die animation-names erscheinen. Informationen zu Situationen, in denen die Anzahl der Animationen und der Werte der animation-*-Eigenschaft nicht übereinstimmt, finden Sie unter Festlegen mehrerer Werte für Animationseigenschaften.

Hinweis: Beim Erstellen von CSS-Scroll-gesteuerten Animationen ergibt die Angabe eines animation-duration-Werts in Sekunden oder Millisekunden nicht wirklich Sinn. In Tests schien dies bei Scroll-Fortschritts-Timeline-Animationen keine Auswirkung zu haben, während es bei View-Fortschritts-Timeline-Animationen die Animation anscheinend näher an das Ende der Timeline verschob. Firefox erfordert jedoch, dass ein 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

Anfangswert	`0s`
Anwendbar auf	alle Elemente, `::before` und `::after` Pseudoelemente
Vererbt	Nein
Berechneter Wert	wie angegeben
Animationstyp	Not animatable

Formale Syntax

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

Beispiele

Animationsdauer 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);
  }
}