試一試
animation-fill-mode: none;
animation-delay: 1s;
animation-fill-mode: forwards;
animation-delay: 1s;
animation-fill-mode: backwards;
animation-delay: 1s;
animation-fill-mode: both;
animation-delay: 1s;
<section class="flex-column" id="default-example">
<div>Animation <span id="play-status"></span></div>
<div id="example-element">Select a mode 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: slide 1s ease-in 1;
}
@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-fill-mode: none;
animation-fill-mode: forwards;
animation-fill-mode: backwards;
animation-fill-mode: both;
/* Multiple animations */
animation-fill-mode: none, backwards;
animation-fill-mode: both, forwards, none;
/* Global values */
animation-fill-mode: inherit;
animation-fill-mode: initial;
animation-fill-mode: revert;
animation-fill-mode: revert-layer;
animation-fill-mode: unset;
值
none-
動畫在未執行時不會對目標應用任何樣式。元素將根據應用於它的其他 CSS 規則進行顯示。這是預設值。
forwards-
目標將保留執行期間遇到的最後一個 關鍵幀 所設定的計算值。最後一個關鍵幀取決於
animation-direction和animation-iteration-count的值。animation-directionanimation-iteration-count遇到的最後一個關鍵幀 normal偶數或奇數 100%或to反向偶數或奇數 0%或from交替even 0%或from交替odd 100%或to交替反向even 100%或to交替反向odd 0%或from動畫屬性的行為如同包含在一組
will-change屬性值中。如果動畫期間建立了新的堆疊上下文，目標元素在動畫結束後會保留該堆疊上下文。 backwards-
動畫將根據第一個相關 關鍵幀 中定義的值進行應用，並在
animation-delay期間保持這些值。第一個相關關鍵幀取決於animation-direction的值。animation-direction第一個相關關鍵幀 normal或alternate0%或fromreverse或alternate-reverse100%或to both-
動畫將同時遵循 forwards 和 backwards 的規則，從而在兩個方向上擴充套件動畫屬性。
備註： 當你在一個 animation-* 屬性上指定多個逗號分隔的值時，它們會按照 animation-name 出現的順序應用於動畫。對於動畫數量和 animation-* 屬性值不匹配的情況，請參見設定多個動畫屬性值。
注意： animation-fill-mode 在建立 CSS 滾動驅動動畫 時與常規基於時間的動畫具有相同的效果。
正式定義
正式語法
animation-fill-mode =
<single-animation-fill-mode>#
<single-animation-fill-mode> =
none |
forwards |
backwards |
both
示例
設定填充模式
您可以在以下示例中看到 animation-fill-mode 的效果。它演示瞭如何使動畫保持在最終狀態，而不是恢復到原始狀態（這是預設行為）。
HTML
html
<p>Move your mouse over the gray box!</p>
<div class="demo">
<div class="grows-and-stays">This grows and stays big.</div>
<div class="grows">This just grows.</div>
</div>
CSS
css
.demo {
border-top: 100px solid #cccccc;
height: 300px;
}
@keyframes grow {
0% {
font-size: 0;
}
100% {
font-size: 40px;
}
}
.demo:hover .grows {
animation-name: grow;
animation-duration: 3s;
}
.demo:hover .grows-and-stays {
animation-name: grow;
animation-duration: 3s;
animation-fill-mode: forwards;
}
結果
有關更多示例，請參閱 CSS 動畫。
規範
| 規範 |
|---|
| CSS 動畫級別 1 # animation-fill-mode |
瀏覽器相容性
載入中…