ある場所から別の場所に移動し、そこに留まるようにアニメーション化します:

div {
-webkit-animation-fill-mode: forwards; /* Chrome, Safari, Opera */
animation-fill-mode: forwards;
}

定義と用法

animation-fill-mode プロパティは、アニメーションが再生中でない(終了したか、待機中である）場合に、「再生開始直後の状態」または「再生終了直前の状態」の何れにするかを指定するものです。

デフォルトでは、CSSアニメーションは、最初のキーフレームが「再生される」まで、あよび最後のキーフレームが終了するまでは要素に影響を与えません。 animation-fill-mode プロパティは、この動作をオーバーライドすることができます。

ブラウザ・サポート

表中の数字は、完全にプロパティをサポートした最初のブラウザのバージョンです。

-webkit-、-moz-、-o- の後に続く数字は、接頭辞付きで動作した最初のバージョンです。

CSS 構文

プロパティの値

デフォルト値：	none
継承：	継承する
アニメーション可否：	不可。animatable を参照
バージョン：	CSS3
JavaScript 構文：	object.style.animationFillMode="forwards" Try it

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

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

CSS3 animation-fill-mode プロパティ

定義と用法