例
animationFillModeプロパティ変更<div>要素を：
document.getElementById("myDIV").style.animationFillMode = "forwards";
»それを自分で試してみてください 定義と使用法
animationFillModeプロパティは、アニメーションが再生されていないときのスタイルが要素に適用されるかを指定します(when it is finished, or when it has a "delay") 。
デフォルトでは、CSSアニメーションは、最初のキーフレームがされるまで、あなたがアニメーション化されている要素には影響しません"played" 、そして最後のキーフレームが完了した後、それに影響を与える停止します。 animationFillModeプロパティは、この動作をオーバーライドすることができます。
ブラウザのサポート
表中の数字は完全にプロパティをサポートする最初のブラウザのバージョンを指定します。
MOZに続く数字は、接頭辞で働いていた最初のバージョンを指定します。
| プロパティ | |||||
|---|---|---|---|---|---|
| animationFillMode | 43.0 | サポートされていません | 16.0 5.0 MOZ | サポートされていません | 30.0 |
構文
animationFillModeプロパティを返します：
object .style.animationFillMode animationFillModeプロパティを設定します。
object .style.animationFillMode="none|forwards|backwards|both|initial|inherit"
プロパティ値
| 値 | 説明 |
|---|---|
| none | デフォルト値。 それが実行される前または後にアニメーションがターゲットに任意のスタイルを適用しません |
| forwards | アニメーションが終了した後(determined by animation-iteration-count) 、アニメーションはアニメーションの終了時刻のプロパティ値を適用します |
| backwards | アニメーションは、アニメーションの遅延によって定義された期間の間、アニメーションの最初の反復を開始するキーフレームで定義されたプロパティ値を適用します。 これらは、キーフレームからの値のいずれかである(when animation-direction is "normal" or "alternate")またはキーフレームにのもの(when animationDirection is "reverse" or "alternate-reverse") |
| both | アニメーションは、前後の両方のための規則に従います。 つまり、それは両方向のアニメーションプロパティを拡張します |
| initial | このプロパティがデフォルト値に設定します。 最初の記事を読みます |
| inherit | その親要素からこのプロパティを継承します。 継承についての記事を読みます |
技術的な詳細
| デフォルト値： | なし |
|---|---|
| 戻り値： | 要素のアニメーションフィルモードプロパティを表す文字列、 |
| CSSのバージョン | CSS3 |
関連ページ
CSSリファレンス： animation-fill-mode property
<スタイルオブジェクト