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 die Wartezeit an, die vom Anwenden der Animation auf ein Element bis zum Beginn der Animation verstreicht. Die Animation kann später, sofort ab ihrem Anfang oder sofort und teilweise während der Animation beginnen.
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%;
}
}
"use strict";
window.addEventListener("load", () => {
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();
});
Es ist oft praktisch, die abgekürzte Eigenschaft animation zu verwenden, um alle Animations-Eigenschaften auf einmal festzulegen.
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, vom Zeitpunkt an dem die Animation auf das Element angewendet wird, zu dem die Animation beginnen soll. Dies kann entweder in Sekunden (
s) oder Millisekunden (ms) angegeben werden. Die Einheit ist erforderlich.Ein positiver Wert gibt an, dass die Animation beginnen soll, nachdem die angegebene Zeit verstrichen ist. Ein Wert von
0s, was der Standardwert ist, gibt an, dass die Animation beginnen soll, sobald sie angewendet wird.Ein negativer Wert führt dazu, dass die Animation sofort beginnt, jedoch teilweise während ihres Zyklus. Zum Beispiel, wenn Sie
-1sals Animationsverzögerung angeben, beginnt die Animation sofort, aber sie startet 1 Sekunde in der Animationssequenz. Wenn Sie einen negativen Wert für die Animationsverzögerung angeben, aber der Startwert implizit ist, wird der Startwert ab dem Moment genommen, in dem die Animation auf das Element angewendet wird.
Hinweis:
Wenn Sie mehrere durch Kommata getrennte Werte für eine animation-* Eigenschaft angeben, werden sie auf die Animationen in der Reihenfolge angewendet, in der die animation-names erscheinen. Für Situationen, in denen die Anzahl der Animationen und animation-* Eigenschaftswerte nicht übereinstimmen, siehe Festlegen mehrerer Animations-Eigenschaftswerte.
Hinweis:
animation-delay hat keinen Einfluss auf CSS scroll-gesteuerte 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
Fahren Sie mit der Maus ü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
Loading…
Siehe auch
- Verwendung von CSS-Animationen
- JavaScript
AnimationEventAPI - Andere verwandte Animations-Eigenschaften:
animation,animation-composition,animation-direction,animation-duration,animation-fill-mode,animation-iteration-count,animation-name,animation-play-state,animation-timeline,animation-timing-function