animation-fill-mode
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.
animation-fill-mode
は CSS のプロパティで、 CSS アニメーションの実行の前後にどう対象にスタイルを適用するかを設定します。
試してみましょう
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="playstatus"></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 #333;
width: 150px;
height: 150px;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
#playstatus {
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%;
}
}
"use strict";
window.addEventListener("load", () => {
const el = document.getElementById("example-element");
const status = document.getElementById("playstatus");
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
を使用すると便利です。
構文
/* 単一のアニメーション */
animation-fill-mode: none;
animation-fill-mode: forwards;
animation-fill-mode: backwards;
animation-fill-mode: both;
/* 複数のアニメーション */
animation-fill-mode: none, backwards;
animation-fill-mode: both, forwards, none;
/* グローバル値 */
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-direction
animation-iteration-count
最後のキーフレーム normal
偶数または奇数 100%
またはto
reverse
偶数または奇数 0%
またはfrom
alternate
偶数 0%
またはfrom
alternate
奇数 100%
またはto
alternate-reverse
偶数 100%
またはto
alternate-reverse
奇数 0%
またはfrom
backwards
-
アニメーションは最初の適切なキーフレームで定義された値を対象に適用されると同時に適用し、
animation-delay
の期間これを保持します。最初の適切なキーフレームは、animation-direction
の値によって変わります。animation-direction
最初の適切なキーフレーム normal
またはalternate
0%
またはfrom
reverse
またはalternate-reverse
100%
またはto
both
-
アニメーションは forwards と backwards の両方の既定に従います。よって、アニメーションの設定は実行前と実行後の両方に適用されます。
メモ: animation-*
プロパティにカンマ区切りで複数の値を指定した場合、 animation-name
に現れる順にアニメーションに適用されます。アニメーションの数と animation-*
プロパティの値が一致しない場合は、複数のアニメーションプロパティ値の設定 を参照してください。
メモ: animation-fill-mode
は CSS スクロール駆動アニメーションを作成するときに、通常の時間ベースのアニメーションと同じ効果があります。
公式定義
形式文法
例
fill モードの設定
以下の例で animation-fill-mode
の効果を見ることができます。これは無限に繰り返されるアニメーションが、元の状態に戻るのではなく最後の状態を維持するようにすることができます(既定の状態)。
HTML
<p>マウスを灰色のボックスの上に乗せてください!</p>
<div class="demo">
<div class="growsandstays">これは大きくなって大きいままになります。</div>
<div class="grows">これは大きくなるだけです。</div>
</div>
CSS
.demo {
border-top: 100px solid #ccc;
height: 300px;
}
@keyframes grow {
0% {
font-size: 0;
}
100% {
font-size: 40px;
}
}
.demo:hover .grows {
animation-name: grow;
animation-duration: 3s;
}
.demo:hover .growsandstays {
animation-name: grow;
animation-duration: 3s;
animation-fill-mode: forwards;
}
結果
これ以外の例は CSS アニメーションを参照してください。
仕様書
Specification |
---|
CSS Animations Level 1 # animation-fill-mode |
ブラウザーの互換性
BCD tables only load in the browser
関連情報
- CSS アニメーションの使用
- JavaScript の
AnimationEvent
API - その他のアニメーション関連プロパティ:
animation
,animation-composition
,animation-delay
,animation-direction
,animation-duration
,animation-iteration-count
,animation-name
,animation-play-state
,animation-timeline
,animation-timing-function