CSS animation-duration Eigenschaft
Die animation-duration-Eigenschaft legt fest, wie lange eine Animation für einen Zyklus benötigt. Beispiele und Live-Demo.
Die Eigenschaft animation-duration legt die Zeitdauer (in Sekunden oder Millisekunden) fest, die eine Animation für einen Zyklus benötigt. Ein Zyklus ist ein einzelner Durchlauf vom 0%-Keyframe bis zum 100%-Keyframe. Wenn die Animation wiederholt wird, gilt diese Dauer für jede Wiederholung, nicht für die Gesamtlaufzeit. Sehr häufig wird die Kurzschreibweise animation verwendet, um alle Animationseigenschaften auf einmal festzulegen. Das separate Setzen von animation-duration ist jedoch nützlich, wenn man nur das Timing überschreiben möchte, während der Rest der Kurzschreibweise erhalten bleibt.
Der Standardwert ist 0s, was bedeutet, dass die Animation sofort abgeschlossen wird und die Keyframes keine sichtbare Wirkung haben. Dies ist der häufigste Grund, warum eine Animation „nicht funktioniert": Die @keyframes-Regel und animation-name sind korrekt, aber es wurde keine Dauer festgelegt. Eine Animation benötigt immer eine Dauer ungleich null, um sichtbar zu sein.
Negative Werte sind ungültig und führen dazu, dass die Eigenschaft ignoriert wird (einige ältere Implementierungen behandeln sie stattdessen als 0s). Wenn ein verzögerter Start gewünscht ist, sollte animation-delay verwendet werden — ein negativer Delay ist dort gültig und startet die Animation mitten im Ablauf.
Zusammenspiel der Dauer mit anderen Animationseigenschaften
Die Dauer ist nur ein Teil einer Animation. Sie wirkt zusammen mit:
- animation-name — welche
@keyframes-Regel ausgeführt wird (erforderlich, damit überhaupt etwas passiert). - animation-timing-function — die Geschwindigkeitskurve innerhalb der Dauer (
ease,linearusw.). - animation-iteration-count — wie oft die Dauer wiederholt wird (
infinitefür Endlosschleifen). - animation-delay — wie lange gewartet wird, bevor der erste Zyklus beginnt.
Zum Beispiel führt animation: pulse 2s ease-in-out 3 die pulse-Keyframes dreimal aus, wobei jeder Zyklus 2 Sekunden dauert, für insgesamt 6 Sekunden Bewegung.
Wenn für eine Animationseigenschaft mehrere durch Komma getrennte Werte angegeben werden, werden sie der Reihe nach den entsprechenden Animationen zugewiesen, die in animation-name definiert sind. Wenn mehr Dauerwerte als Namen vorhanden sind, werden die überschüssigen Werte ignoriert; sind es weniger, wiederholt sich die Liste von vorne. Zum Beispiel: Bei zwei Animationsnamen und animation-duration: 1s, 2s, 3s wird der dritte Wert verworfen; bei animation-duration: 1s verwenden beide Animationen 1s.
Sekunden vs. Millisekunden
1s und 1000ms sind gleichwertig — es sollte verwendet werden, was lesbarer ist. Millisekunden eignen sich für kurze UI-Übergänge (250ms), Sekunden für längere Schleifenbewegungen (6s). Die Einheit ist erforderlich: animation-duration: 2 (ohne Einheit) ist ungültig und die Deklaration wird verworfen.
Die Eigenschaft animation-duration ist eine der CSS3-Eigenschaften.
| Anfangswert | 0s |
|---|---|
| Gilt für | Alle Elemente, ::before- und ::after-Pseudo-Elemente. |
| Vererbbar | Nein. |
| Animierbar | Nein. |
| Version | CSS3 |
| DOM-Syntax | object.style.animationDuration = "4s"; |
Syntax
Syntax der CSS animation-duration Eigenschaft
animation-duration: time | initial | inherit;Beispiel der animation-duration-Eigenschaft:
Beispiel der CSS animation-duration Eigenschaft mit Sekunden
<!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">Background of this text is animated using CSS3 animation property</div>
</body>
</html>Beispiel der animation-duration-Eigenschaft mit einer Dauer von 6 Sekunden:
Beispiel der CSS animation-duration Eigenschaft mit 6 Sekunden
<!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;
}
@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>Werte
| Wert | Beschreibung | Ausprobieren |
|---|---|---|
| time | Legt die Zeitdauer fest, die eine Animation für einen vollständigen Zyklus benötigt. Werte können in Sekunden (s) oder Millisekunden (ms) angegeben werden. Der Standardwert der Eigenschaft selbst ist 0s, nicht das Schlüsselwort time. | Ausprobieren » |
| initial | Setzt die Eigenschaft auf ihren Standardwert (0s). | |
| inherit | Erbt die Eigenschaft vom übergeordneten Element. |
Browser-Unterstützung
animation-duration wird von allen modernen Browsern unterstützt. Sie ist nicht vererbbar und selbst nicht animierbar — das Ändern der Dauer während einer Animation startet das Timing neu, anstatt es zu interpolieren.
Verwandte Eigenschaften
- animation — die Kurzschreibweise, die die Dauer zusammen mit Name, Timing, Delay und mehr festlegt.
- animation-name — benennt die auszuführende
@keyframes-Regel. - animation-delay — verzögert den Start der Animation.
- animation-iteration-count — wiederholt die Dauer eine bestimmte Anzahl von Malen.
- animation-timing-function — gestaltet die Geschwindigkeitskurve innerhalb der Dauer.
- animation-fill-mode — steuert Stile vor und nach der Animation.