animation-fill-mode
CSS の animation-fill-mode
プロパティは、 CSS アニメーションの実行の前後にどう対象にスタイルを適用するかを設定します。
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 https://github.com/mdn/interactive-examples をクローンしてプルリクエストを送信してください。
アニメーションのプロパティすべてを一度に設定するには、一括指定プロパティである 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;
値
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
プロパティで指定したアニメーションに割り当てられますが、いくつあるかによって異なる方法で割り当てられます。詳しくは、複数のアニメーションプロパティ値の設定 を参照してください。
形式文法
<single-animation-fill-mode>#ここで
<single-animation-fill-mode> = none | forwards | backwards | both
例
以下の例で 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 アニメーションを参照してください。
仕様書
仕様書 | 状態 | 備考 |
---|---|---|
CSS Animations Level 1 animation-fill-mode の定義 |
草案 | 初回定義 |
初期値 | none |
---|---|
適用対象 | すべての要素、::before / ::after 擬似要素 |
継承 | なし |
計算値 | 指定通り |
アニメーションの種類 | 離散値 |
ブラウザーの対応
BCD tables only load in the browser
関連情報
- CSS アニメーションの使用
- JavaScript
AnimationEvent
API