animation-delay
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-delay CSS-Eigenschaft gibt an, wie lange abgewartet wird, nachdem die Animation auf ein Element angewendet wurde, bevor mit der Ausführung der Animation begonnen wird. Die Animation kann später, sofort ab ihrem Anfang oder sofort und mitten in der Animation beginnen.
Es ist oft praktisch, die Kurzschreibweiseigenschaft animation zu verwenden, um alle Animationseigenschaften auf einmal festzulegen.
Probieren Sie es aus
animation-delay: 250ms;
animation-delay: 2s;
animation-delay: -2s;
<section class="flex-column" id="default-example">
<div>Animation <span id="play-status"></span></div>
<div id="example-element">Select a delay to start!</div>
</section>
#example-element {
background-color: #1766aa;
color: white;
margin: auto;
margin-left: 0;
border: 5px solid #333333;
width: 150px;
height: 150px;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
#play-status {
font-weight: bold;
}
.animating {
animation-name: slide;
animation-duration: 3s;
animation-timing-function: ease-in;
animation-iteration-count: 2;
animation-direction: alternate;
}
@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 status = document.getElementById("play-status");
function update() {
status.textContent = "delaying";
el.className = "";
window.requestAnimationFrame(() => {
window.requestAnimationFrame(() => {
el.className = "animating";
});
});
}
el.addEventListener("animationstart", () => {
status.textContent = "playing";
});
el.addEventListener("animationend", () => {
status.textContent = "finished";
});
const observer = new MutationObserver(() => {
update();
});
observer.observe(el, {
attributes: true,
attributeFilter: ["style"],
});
update();
Syntax
/* Single animation */
animation-delay: 3s;
animation-delay: 0s;
animation-delay: -1500ms;
/* Multiple animations */
animation-delay: 2.1s, 480ms;
/* Global values */
animation-delay: inherit;
animation-delay: initial;
animation-delay: revert;
animation-delay: revert-layer;
animation-delay: unset;
Werte
<time>-
Der Zeitversatz, ab dem Zeitpunkt, zu dem die Animation auf das Element angewendet wird, an dem die Animation beginnen soll. Dies kann in Sekunden (
s) oder Millisekunden (ms) angegeben werden. Die Einheit ist erforderlich.Ein positiver Wert gibt an, dass die Animation nach Ablauf der angegebenen Zeit beginnen soll. Ein Wert von
0s, der Standardwert, gibt an, dass die Animation beginnen soll, sobald sie angewendet wird.Ein negativer Wert bewirkt, dass die Animation sofort beginnt, jedoch mitten in ihrem Zyklus. Wenn Sie beispielsweise
-1sals Animationsverzögerungszeit angeben, beginnt die Animation sofort, jedoch 1 Sekunde nach Beginn der Animationssequenz. Wenn Sie einen negativen Wert für die Animationsverzögerung angeben, aber der Startwert implizit ist, wird der Startwert vom Moment an genommen, zu dem die Animation auf das Element angewendet wird.
Hinweis:
Wenn Sie mehrere durch Kommas getrennte Werte für eine animation-*-Eigenschaft angeben, werden sie in der Reihenfolge angewendet, in der die animation-names auftreten. Für Situationen, in denen die Anzahl der Animationen und animation-*-Eigenschaftswerte nicht übereinstimmen, siehe Festlegen mehrerer Animationswerte.
Hinweis:
animation-delay hat keine Auswirkung auf CSS-scrollgesteuerte Animationen.
Formale Definition
| Anfangswert | 0s |
|---|---|
| Anwendbar auf | alle Elemente, ::before und ::after Pseudoelemente |
| Vererbt | Nein |
| Berechneter Wert | wie angegeben |
| Animationstyp | Not animatable |
Formale Syntax
animation-delay =
<time>#
Beispiele
Einstellen einer Animationsverzögerung
Diese Animation hat eine Verzögerung von 2 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;
animation-delay: 2s;
}
@keyframes rotate {
0% {
transform: rotate(0);
}
100% {
transform: rotate(360deg);
}
}
Ergebnis
Bewegen Sie den Mauszeiger über das Rechteck, um die Animation zu starten.
Siehe CSS-Animationen für Beispiele.
Spezifikationen
| Specification |
|---|
| CSS Animations Level 1 # animation-delay |
Browser-Kompatibilität
Siehe auch
- Verwendung von CSS-Animationen
- JavaScript-API
AnimationEvent - Andere verwandte Animationseigenschaften:
animation,animation-composition,animation-direction,animation-duration,animation-fill-mode,animation-iteration-count,animation-name,animation-play-state,animation-timeline,animation-timing-function