CSSのみでdisplay:noneの要素をフェードイン/フェードアウトさせる方法
![](https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_850,h_425/https://tnyk.jp/wp-content/uploads/2021/02/default-thumb-850x425.jpg)
マウスオーバーやクリック時など、何らかの処理をしたタイミングで、
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などで、「-visible」というクラスを追加すれば動きます。
IE9以下は、animationプロパティ非対応ですが、ここ最近のブラウザなら無問題です。
アニメーション部分は、JS、jQueryで処理せずに、CSSで対応したほうが動きもスムーズなのでオススメです。