フェードイン・フェードアウトは、JQueryで実装されていますが、cssアニメーションを含めたクラスの付け替えのみで行う方法がありましたので、投稿いたします。 事前知識 display: none; → display: block この遷移をさせる要素に対して、transitionをかけることは、できません。 （transition: display 1s ease 0sの指定は動作しません。） 恐らく、レンダリングツリーからの削除が影響していると思われます。 （レンダリングにおいて、レンダリングツリーの生成・変更が先に行われてから、位置や色の調整が行われるため） モーダルの表示・非表示 検索すると、opacityを使用してアニメーションを行う方法をよく見かけると思いますが、
opacity: 0だけでは、クリックできてしまいます。そこで、pointer-events: noneを使用し