CSS3: animation-fill-mode プロパティ - アニメーションの実行前後のスタイルの適用の指定

■ 概要

項　　目説　　明
記述形式 セレクタ {animation-fill-mode: 値 }
値 の形式 none，forwards，backwards，both
初 期 値 none
対応ブラウザー C3+ / e?+ / N?+ / Fx?+ / Op?+ / Ch9+ / Sa5+
適用可能な要素 すべての要素，::before擬似要素，::after擬似要素
継　　承 しない

■ 解説

animation-fill-modeプロパティ は，要素に対してアニメーションで指定した スタイルをアニメーション実行前と実行後にどのように適用するのか を指定します。

指定できる値の形式は，以下のとおりです。

値説　　明
none アニメーションで指定されたスタイルは実行の前後には適用しません。
forwards アニメーションの最後のキーフレームのアットルール @keyframes の指定値を実行後も維持します。
backwards アニメーションの最初のキーフレームのアットルール @keyframes の指定値を実行前と animation-delay プロパティで指定した再生開始までの時間にも適用します。
both forwards と backwards の両方によるスタイルの適用を行います。

■ 使用例（ animation-fill-mode プロパティの利用）

現在準備中です。

■ 備考

【参考ページ】