新着！ 44ページの電子書籍「CSS in 44 minutes」をリリースしました！ 😃

今すぐ入手 →

#animation-fill-mode

アニメーションの開始前と終了後に何が起こるかを定義します。fill modeは、アニメーションのスタイルをアニメーションの外側にも適用するかどうかをブラウザに指示することを可能にします。

default animation-fill-mode: none;

アニメーションスタイルは、デフォルトスタイルに影響を与えません。要素はアニメーション開始前にデフォルト状態に設定され、アニメーション終了後にそのデフォルト状態に戻ります。

animation-fill-mode: forwards;

アニメーションの最後に適用されたスタイルは、その後も保持されます。

animation-fill-mode: backwards;

アニメーションのスタイルは、アニメーションが実際に開始される前にすでに適用されます。

animation-fill-mode: both;

スタイルは、アニメーションの再生前と後に適用されます。