フェードイン・アウトをCSSだけで作る

2025/06/262025/06/27

要素を徐々に表示・非表示する

フェードイン・フェードアウトは、ページ遷移やコンテンツ表示時に柔らかい印象を与える演出です。
CSSだけで滑らかな出現・消失を表現できます。


<div class="fade-in">この要素はフェードインします</div>

<div class="fade-in">この要素はフェードインします</div>


.fade-in {
  opacity: 0;
  animation: fadeIn 1s forwards;
}

@keyframes fadeIn {
  to {
    opacity: 1;
  }
}

.fade-in {

opacity: 0;

animation: fadeIn 1s forwards;

}

@keyframes fadeIn {

to {

opacity: 1;

}

マウスを乗せたときだけフェードインしたい場合は、hover と transition を使って実現できます。


.fade-hover {
  opacity: 0.5;
  transition: opacity 0.3s;
}
.fade-hover:hover {
  opacity: 1;
}

.fade-hover {

opacity: 0.5;

transition: opacity 0.3s;

}

.fade-hover:hover {

opacity: 1;

}

opacityの切り替えと一緒にvisibilityやpointer-eventsを制御すると、表示非表示の制御も可能です。
animationよりtransitionの方がイベント対応に便利な場面もあります。

よかったらシェアしてね！