🍦

[CSS]アニメーション終了時点でのスタイルをそのまま保持する

2020/10/14に公開

小ネタです。

CSS で、最初は非表示になっていた要素を出現させるアニメーションをやったとき、アニメーション終了時に本来のスタイル、すなわち非表示に戻ってしまうことがありました。

調べてみると、下記の CSS を一行足すだけで、終了時点でのスタイルを保持してくれました。

animation-fill-mode: forwards;

終了時点というのは、厳密には keyframe にて 100%と指定されているスタイルです。

一応、MDNによれば、animation-direction と animation-iteration-count の値によって若干挙動が異なるようなので、頭の片隅にでも置いておきます。

Discussion