マウスオーバーやクリック時など、何らかの処理をしたタイミングで、 display: none;されている要素にアニメーション(フェードインなど)をつけたいことが多いのでメモ。 ※-moz-や-webkit-は省略しているので、適宜つけてください。 @keyframes fadeIn { 0% { display: none; opacity: 0; } 1% { display: block; opacity: 0; } 100% { display: block; opacity: 1; } } .element { display: none; opacity: 0; } .element.-visible { display: block; opacity: 1; animation: fadeIn 0.3s ease-in 0s forwards; } あとは、Javascript
![CSSのみでdisplay:noneの要素をフェードイン/フェードアウトさせる方法|ブログ|ウェブスタジオTANI](https://cdn-ak-scissors.b.st-hatena.com/image/square/f2668ae49c2eaa71bb7f93374fdfac7ea656aba4/height=288;version=1;width=512/https%3A%2F%2Ftnyk.jp%2Fwp-content%2Fuploads%2F2021%2F02%2Fdefault-thumb.jpg)