試一試
animation-duration: 750ms;
animation-duration: 3s;
animation-duration: 0s;
<section class="flex-column" id="default-example">
<div class="animating" id="example-element"></div>
<button id="play-pause">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";
}
});
通常，為了圖方便，可以使用簡寫屬性 animation 一次性設定所有動畫屬性。
語法
css
/* 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;
值
auto-
對於基於時間的動畫，
auto等同於0s（見下文）。對於CSS 滾動驅動動畫，auto會用動畫填充整個時間線。 <time>-
動畫完成一個週期所需的時間。這可以以秒（
s）或毫秒（ms）為單位指定。值必須為正數或零，並且單位是必需的。如果未提供值，則使用預設值
0s，在這種情況下動畫仍然會執行（會觸發animationStart和animationEnd事件）。當持續時間為0s時，動畫是否可見將取決於animation-fill-mode的值，如下所述。- 如果
animation-fill-mode設定為backwards或both，則在animation-delay倒計時期間將顯示由animation-direction定義的動畫的第一幀。 - 如果
animation-fill-mode設定為forwards或both，則在animation-delay過期後，將顯示由animation-direction定義的動畫的最後一幀。 - 如果
animation-fill-mode設定為none，則動畫將沒有可見效果。
- 如果
注意：負值無效，會導致宣告被忽略。一些早期的、帶字首的實現可能會將它們視為與 0s 相同。
備註： 當你在一個 animation-* 屬性上指定多個逗號分隔的值時，它們會按照 animation-name 出現的順序應用於動畫。對於動畫數量和 animation-* 屬性值不匹配的情況，請參見設定多個動畫屬性值。
注意：在建立 CSS 滾動驅動動畫時，以秒或毫秒為單位指定 animation-duration 值並沒有真正意義。在測試中，它似乎對滾動進度時間線動畫沒有影響，而在檢視進度時間線動畫中，它似乎將動畫推到時間線的末尾附近發生。然而，Firefox 要求設定 animation-duration 才能成功應用動畫。因此建議將 animation-duration 設定為 1ms，以便動畫在 Firefox 中正常工作，但其效果不會被改變太多。
正式定義
正式語法
animation-duration =
[ auto | <time [0s,∞]> ]#
示例
設定動畫持續時間
此動畫的 animation-duration 為 0.7 秒。
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;
}
@keyframes rotate {
0% {
transform: rotate(0);
}
100% {
transform: rotate(360deg);
}
}
結果
將滑鼠懸停在矩形上以啟動動畫。
有關更多示例，請參閱 CSS 動畫。
規範
| 規範 |
|---|
| CSS 動畫級別 1 # animation-duration |
瀏覽器相容性
載入中…