.overlayに対して
opacity:0;
pointer-events:none;にするのかがわからず、
display:none;を指定してためしたところ

transitionが動かず、だからpointer-events:none;にするのかなと納得した半面
display:none;でも動かせないか、と気になり調べています。
animation内でtransitionを指定するいくつかの記事に出会いました。
https://nansystem.com/opacity-0-vs-visibility-hidden-vs-display-none/

ただ、なぜ動くのか
なぜ動かないのか、という理由が調べてもよくわかりません・・・

display:none;だとDOM上からも消えて
opacity:0;は透明になっているだけでDOM上にはある
自分なりに理屈を考えてみたのですがよくわかっておりません。
animationプロパティについてよく理解できていないようです。