例
ある場所から別の場所に移動する何かをアニメーション化し、それはそこに滞在しています：
div {
-webkit-animation-fill-mode: forwards; /* Chrome, Safari, Opera */
animation-fill-mode: forwards;
} »それを自分で試してみてください 定義と使用法
アニメーションが再生されていないときにアニメーションフィルモードプロパティは、要素のスタイルを指定します(when it is finished, or when it has a delay) 。
デフォルトでは、CSSアニメーションは、最初のキーフレームがされるまでの要素に影響を与えない"played"してから、最後のキーフレームが完了すると停止します。 アニメーション・フィル・モードのプロパティは、この動作をオーバーライドすることができます。
| デフォルト値： | none |
|---|---|
| 継承されました： | no |
| アニメーション： | no. Read about animatable |
| バージョン： | CSS3 |
| JavaScriptシンタックス： | object .style.animationFillMode="forwards" Try it |
ブラウザのサポート
表中の数字は完全にプロパティをサポートする最初のブラウザのバージョンを指定します。
-webkit-続い番号、-moz-、または接頭辞で働いていた最初のバージョンを指定して-O-です。
| プロパティ | |||||
|---|---|---|---|---|---|
| animation-fill-mode | 4.0 -webkit- | 10.0 | 16.0 5.0 -moz- | 4.0 -webkit- | 15.0 -webkit- 12.1 12.0 -O- |
CSSの構文
animation-fill-mode: none|forwards|backwards|both|initial|inherit;プロパティ値
| 値 | 説明 |
|---|---|
| none | デフォルト値。 それが実行される前または後にアニメーションがターゲット要素に任意のスタイルを適用しません |
| forwards | アニメーションが終了した後(determined by animation-iteration-count) 、アニメーションは、アニメーションが終了した時刻のプロパティ値を適用します |
| backwards | アニメーションは、アニメーションの遅延によって定義された期間中に、アニメーションの最初の反復を開始しますキーフレームで定義されたプロパティ値を適用します。 これらは、キーフレームからの値のいずれかである(when animation-direction is "normal" or "alternate")またはキーフレームにのもの(when animation-direction is "reverse" or "alternate-reverse") |
| both | アニメーションは、前後の両方のための規則に従います。 つまり、両方向のアニメーションプロパティを拡張します |
| initial | このプロパティがデフォルト値に設定します。 初期についての記事を読みます |
| inherit | その親要素からこのプロパティを継承します。 継承についての記事を読みます |
関連ページ
CSS3のチュートリアル： CSS3アニメーション
HTML DOMリファレンス： animationFillMode property