animation-fill-mode CSS プロパティとは
トピック：実行前と実行後にターゲットにCSSスタイルをアニメーションに適用する方法を指定する 事ができる
プロパティ アニメーション塗りつぶしモード
実例 コード 1
サンプル コードを試すトピック：- アニメーションのプロパティすべてを一度に設定するには、一括指定プロパティである
animation プロパティを使用すると便利 。
プロパティ 定義と使用法
| デフォルト値・初期値 : | none |
|---|
| 適用対象 : | 全要素、::before / ::after 疑似要素 |
|---|
| 継承 : | 不可 |
|---|
| メディア : | visual |
|---|
| 計算値 : | 指定値 |
|---|
CSS Version | CSS3 |
|---|
| アニメーションの種類 : | 個別 |
|---|
| JavaScript 構文 | object.style.animationFillMode="funWebref" |
|---|
| 正規順序 : | 形式文法で定義される一意のあいまいでない順序 |
|---|
| CSSの構文 | animation-fill-mode: none |forwards |backwards |both |initial |inherit; |
|---|
プロパティ値
| 値 | 説明 |
|---|
none | デフォルト値。アニメーションは、実行前または実行後に要素にスタイルを適用しません |
forwards | この要素は、最後のキーフレームによって設定されたスタイル値を保持します（アニメーション方向とアニメーション反復カウントに依存する ） |
backwards | この要素は、最初のキーフレームによって設定されたスタイル値を取得し（アニメーション方向に依存する ）、アニメーション遅延期間中これを保持します |
both | アニメーションは、前後両方のルールに従って、アニメーションのプロパティを両方向に拡張します |
initial | このプロパティをデフォルト値に設定する |
inherit | 親要素からこのプロパティを継承する |
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 |
：animation-fill-mode 関連記事 
CSS animation-fill-mode | CSS プロパティ 値| 意味 使い方 実例 – WebRef