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
/* 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 von0s
(siehe unten). Bei CSS scrollgesteuerten Animationen fülltauto
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 EreignisseanimationStart
undanimationEnd
werden ausgelöst). Ob die Animation sichtbar ist, wenn die Dauer0s
beträgt, hängt vom Wert vonanimation-fill-mode
ab, wie unten erläutert:- Wenn
animation-fill-mode
aufbackwards
oderboth
eingestellt ist, wird der erste Frame der Animation gemäßanimation-direction
während desanimation-delay
Countdowns angezeigt. - Wenn
animation-fill-mode
aufforwards
oderboth
eingestellt ist, wird der letzte Frame der Animation gemäßanimation-direction
nach Ablauf deranimation-delay
angezeigt. - Wenn
animation-fill-mode
aufnone
eingestellt ist, hat die Animation keinen sichtbaren Effekt.
- Wenn
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-name
s 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
Initialer Wert | 0s |
---|---|
Anwendbar auf | alle Elemente, ::before und ::after Pseudoelemente |
Vererbt | Nein |
Berechneter Wert | wie angegeben |
Animationstyp | Not animatable |
Formale Syntax
animation-duration =
<time [0s,∞]>#
Beispiele
Animation-Dauer festlegen
Diese Animation hat eine animation-duration
von 0,7 Sekunden.
HTML
<div class="box"></div>
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
- CSS-Animationen verwenden
- JavaScript
AnimationEvent
API - Andere verwandte Animationseigenschaften:
animation
,animation-composition
,animation-delay
,animation-direction
,animation-fill-mode
,animation-iteration-count
,animation-name
,animation-play-state
,animation-timeline
,animation-timing-function