CSS3 animation-fill-mode プロパティ

例

オブジェクトをアニメーションで別の場所に移動し、その場所に留まらせます：

animation-fill-mode:forwards; -webkit-animation-fill-mode:forwards; /*Safari と Chrome*/

表内の数字は、そのプロパティをサポートする最初のブラウザバージョンを示します。

-webkit-、-ms-、または -moz- の前にある数字は、そのプレフィックス付きプロパティをサポートする最初のブラウザバージョンを示します。

プロパティ
animation-fill-mode	4.0 -webkit-	10.0	16.0 5.0 -moz-	4.0 -webkit-	15.0 -webkit- 12.1 12.0 -o-

animation-fill-mode プロパティは、アニメーションが再生されないとき（アニメーションが完了したとき、またはアニメーションに遅延があり再生が開始されていないとき）に要素に適用するスタイルを指定します。

デフォルトでは、CSS アニメーションは最初のキーフレームの再生が完了するまで要素に影響を与えず、最後のキーフレームの完了後に要素への影響を停止します。animation-fill-mode プロパティはこの動作を上書きできます。

デフォルト値：	none
継承：	否
アニメーション可能：	いいえ。参照：アニメーション可能（animatable）。
バージョン：	CSS3
JavaScript 構文：	object.style.animationFillMode="forwards" 試してみる

值	説明
none	デフォルト値。アニメーションは、アニメーションの実行前後にターゲット要素へスタイルを適用しません。
forwards	アニメーション終了後（animation-iteration-count で決定）、アニメーションはそのプロパティ値を適用します。
backwards	アニメーションは、animation-delay で定義された期間中にアニメーションを開始する最初のイテレーションのキーフレームで定義されたプロパティ値を適用します。これらは、animation-direction が "normal" または "alternate" の場合の from キーフレームの値、または animation-direction が "reverse" または "alternate-reverse" の場合の to キーフレームの値です。
both	アニメーションは forwards と backwards のルールに従います。つまり、アニメーションはアニメーションプロパティを両方向に拡張します。
initial	このプロパティをデフォルト値に設定します。参照：initial。
inherit	親要素からこのプロパティを継承します。参照：inherit。

その他の拡張