CSSanimation -fill-modeプロパティ

アニメーションが終了したときに、<div>要素が最後のキーフレームのスタイル値を保持するようにします。

div {
animation-fill-mode: forwards;
}

以下の「自分で試してみてください」の例をもっと見てください。

定義と使用法

このanimation-fill-modeプロパティは、アニメーションが再生されていないとき（開始前、終了後、またはその両方）の要素のスタイルを指定します。

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

デフォルト値：	なし
遺伝性の：	いいえ
アニメート可能：	番号。アニメート可能について読む
バージョン：	CSS3
JavaScript構文：	object .style.animationFillMode = "forwards"

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

数字の後に-webkit-、-moz-、または-o-が続く場合は、プレフィックスを使用して機能した最初のバージョンを指定します。

Property
animation-fill-mode	43.0 4.0 -webkit-	10.0	16.0 5.0 -moz-	9.0 4.0 -webkit-	30.0 15.0 -webkit- 12.1 12.0 -o-

Value	Description
none	Default value. Animation will not apply any styles to the element before or after it is executing
forwards	The element will retain the style values that is set by the last keyframe (depends on animation-direction and animation-iteration-count)
backwards	The element will get the style values that is set by the first keyframe (depends on animation-direction), and retain this during the animation-delay period
both	The animation will follow the rules for both forwards and backwards, extending the animation properties in both directions
initial	Sets this property to its default value. Read about initial
inherit	Inherits this property from its parent element. Read about inherit

<div>要素に、アニメーションが開始する前（アニメーションの遅延期間中）に最初のキーフレームによって設定されたスタイル値を取得させます。

div {
animation-fill-mode: backwards;
}

<div>要素に、アニメーションが開始する前に最初のキーフレームによって設定されたスタイル値を取得させ、アニメーションが終了したときに最後のキーフレームからのスタイル値を保持させます。

div {
animation-fill-mode: both;
}