🍦
[CSS]アニメーション終了時点でのスタイルをそのまま保持する
小ネタです。
CSS で、最初は非表示になっていた要素を出現させるアニメーションをやったとき、アニメーション終了時に本来のスタイル、すなわち非表示に戻ってしまうことがありました。
調べてみると、下記の CSS を一行足すだけで、終了時点でのスタイルを保持してくれました。
animation-fill-mode: forwards;
終了時点というのは、厳密には keyframe にて 100%と指定されているスタイルです。
一応、MDNによれば、animation-direction と animation-iteration-count の値によって若干挙動が異なるようなので、頭の片隅にでも置いておきます。
Discussion