Style animationFillMode 属性
- 前のページ animationDuration
- 次のページ animationIterationCount
- 上一階層に戻る HTML DOM Style オブジェクト
定義と使用法
animationFillMode 属性は、アニメーションが再生されない場合（アニメーションが終了した場合、または「遅延」がある場合）に要素に適用されるスタイルを指定します。
デフォルトでは、CSSアニメーションは最初のキーフレームが「再生」される前に、アニメーション中の要素に影響を与えず、最後のキーフレームが完了した後に影響を停止します。animationFillMode 属性がこの動作をオーバーライドすることがあります。
例
<div>要素のanimationFillMode属性を変更する：
document.getElementById("myDIV").style.animationFillMode = "forwards";
文法
animationFillMode 属性を返す：
object.style.animationFillMode
animationFillMode 属性を設定する：
object.style.animationFillMode = "none|forwards|backwards|both|initial|inherit"
属性値
| 値 | 説明 |
|---|---|
| none | デフォルト値。アニメーションが実行される前にまたは後に、ターゲットにどんなスタイルも適用しません。 |
| forwards | アニメーションが終了した後（animation-iteration-count で決定されます）、アニメーションが終了時のこの属性値を適用します。 |
| backwards |
animation-delay で定義された時間内に、アニメーションはアニメーションの最初の反復を開始するキーフレームで定義された属性値を適用します。 これらはキーフレームの値（アニメーション方向が "normal" または "alternate" の場合）またはキーフレームへの値（アニメーション方向が "reverse" または "alternate-reverse" の場合）です。 |
| both | アニメーションは前に向かってと後ろに向かってのルールに従います。つまり、アニメーション属性は両方向に拡張されます。 |
| initial | この属性をデフォルト値に設定します。参照してください initial。 |
| inherit | この属性は親要素からこの属性を継承します。参照してください inherit。 |
技術的詳細
| デフォルト値： | none |
|---|---|
| 返り値： | 文字列で、要素の animation-fill-mode 属性。 |
| CSS バージョン： | CSS3 |
ブラウザサポート
animationFillMode CSS3 (1999) の機能です。
すべてのブラウザが完全にサポートしています：
| Chrome | Edge | Firefox | Safari | Opera | IE |
|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera | IE |
| サポート | サポート | サポート | サポート | サポート | 11 |
関連ページ
CSS リファレンスマニュアル：animation-fill-mode 属性
- 前のページ animationDuration
- 次のページ animationIterationCount
- 上一階層に戻る HTML DOM Style オブジェクト
