CSSのみでdisplay:noneの要素をフェードイン/フェードアウトさせる方法
マウスオーバーやクリック時など、何らかの処理をしたタイミングで、
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で対応したほうが動きもスムーズなのでオススメです。