Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten.Erfahre mehr über dieses Experiment.
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.
* Some parts of this feature may have varying levels of support.
Dieanimation-durationCSS Eigenschaft legt die Länge der Zeit fest, die eine Animation benötigt, um einen Zyklus zu vollenden.
Es ist oft praktisch, die Kurzschrift-Eigenschaftanimation zu verwenden, um alle Animations-Eigenschaften auf einmal festzulegen.
Probieren Sie es aus
animation-duration: 750ms;animation-duration: 3s;animation-duration: 0s;<section> <div></div> <button>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
/* 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
autoBei zeitbasierten Animationen entspricht
autoeinem Wert von0s(siehe unten). BeiCSS scroll-gesteuerten Animationen fülltautodie gesamte Timeline mit der Animation.<time>Die Zeit, die eine Animation benötigt, um einen Zyklus abzuschließen. 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
0sverwendet, in welchem Fall die Animation dennoch ausgeführt wird (dieanimationStartundanimationEndEreignisse werden ausgelöst). Ob die Animation sichtbar ist, wenn die Dauer0sbeträgt, hängt vom Wert vonanimation-fill-modeab, wie unten erklärt:- Wenn
animation-fill-modeaufbackwardsoderbothgesetzt ist, wird der erste Frame der Animation wie inanimation-directiondefiniert während desanimation-delayCountdown angezeigt. - Wenn
animation-fill-modeaufforwardsoderbothgesetzt ist, wird der letzte Frame der Animation, wie inanimation-directiondefiniert, nach Ablauf desanimation-delayangezeigt. - Wenn
animation-fill-modeaufnonegesetzt ist, hat die Animation keine sichtbare Wirkung.
- Wenn
Hinweis:Negative Werte sind ungültig und führen dazu, dass die Deklaration ignoriert wird. Einige frühe, mit Präfix versehene Implementierungen könnten sie als identisch mit0s behandeln.
Hinweis:Wenn Sie mehrere kommagetrennte Werte in eineranimation-* Eigenschaft angeben, werden sie in der Reihenfolge angewendet, in der dieanimation-names erscheinen. Für Fälle, in denen die Anzahl der Animationen undanimation-* Eigenschaftswerte nicht übereinstimmen, sieheFestlegen mehrerer Animations-Eigenschaftswerte.
Hinweis:Beim Erstellen vonCSS scroll-gesteuerten Animationen macht es wenig Sinn, einenanimation-duration Wert in Sekunden oder Millisekunden anzugeben. In Tests schien es keinen Einfluss auf Scroll-Fortschritt-Timeline-Animationen zu haben, während es bei Darstellungs-Fortschritt-Timeline-Animationen die Animation ans Ende der Timeline verschob. Firefox erfordert jedoch, dass eineanimation-duration gesetzt ist, damit die Animation erfolgreich angewendet wird. Daher wird empfohlen,animation-duration auf1ms zu setzen, damit Animationen in Firefox funktionieren, aber der Effekt nicht zu stark verändert wird.
Formale Definition
| Anfangswert | 0s |
|---|---|
| Anwendbar auf | alle Elemente,::before und::afterPseudoelemente |
| Vererbt | Nein |
| Berechneter Wert | wie angegeben |
| Animationstyp | Not animatable |
Formale Syntax
animation-duration =
[auto|<time [0s,∞]>]#
Beispiele
Animationsdauer festlegen
Diese Animation hat eine Animationsdauer von 0,7 Sekunden.
HTML
<div></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.
SieheCSS-Animationen verwenden für weitere Beispiele.
Spezifikationen
| Specification |
|---|
| CSS Animations Level 1 # animation-duration |
Browser-Kompatibilität
Siehe auch
- CSS-Animationen verwenden
- JavaScript
AnimationEventAPI - Andere verwandte Animations-Eigenschaften:
animation,animation-composition,animation-delay,animation-direction,animation-fill-mode,animation-iteration-count,animation-name,animation-play-state,animation-timeline,animation-timing-function