animation-delay
animation-delay CSS 屬性指定了動畫開始執行前，從將動畫應用於元素之時起等待的時間量。動畫可以稍後開始，從其開始時立即開始，或者立即開始並進行到動畫的中間。
試一試
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();
通常，為了圖方便，可以使用簡寫屬性 animation 一次性設定所有動畫屬性。
語法
css
/* 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;
值
<time>-
從動畫應用於元素的那一刻起，動畫應該開始的時間偏移。這可以以秒 (
s) 或毫秒 (ms) 為單位指定。單位是必需的。正值表示動畫應在指定的持續時間過去後開始。預設值
0s表示動畫應在應用於元素後立即開始。負值會導致動畫立即開始，但會從其週期的中間部分開始。例如，如果將
-1s指定為動畫延遲時間，則動畫將立即開始，但會從動畫序列的第 1 秒開始。如果為動畫延遲指定負值，但起始值是隱式的，則起始值取自動畫應用於元素的那一刻。
備註： 當你在一個 animation-* 屬性上指定多個逗號分隔的值時，它們會按照 animation-name 出現的順序應用於動畫。對於動畫數量和 animation-* 屬性值不匹配的情況，請參見設定多個動畫屬性值。
注意：animation-delay 對CSS 滾動驅動動畫沒有影響。
正式定義
正式語法
animation-delay =
<time>#
示例
設定動畫延遲
此動畫有 2 秒的延遲。
HTML
html
<div class="box"></div>
CSS
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);
}
}
結果
將滑鼠懸停在矩形上以啟動動畫。
有關示例，請參閱 CSS 動畫。
規範
| 規範 |
|---|
| CSS 動畫級別 1 # animation-delay |
瀏覽器相容性
載入中…