display:none;の要素にCSSでフェードを設定する

少し前から主要ブラウザで「@starting-style」がサポートされたので、CSSでフェードの設定をする方法を改めて確認してみます。

サンプルコード

以下のようなHTMLを用意して、.pulldownにホバーすると.pulldown_bodyがフェードインで表示されるという例を試してみます。

<div class="pulldown">
  <div class="pulldown_head">ホバーで表示</div>
  <div class="pulldown_body">コンテンツ内容</div>
</div>

まずはうまくいかない例で、transitionを使った実装をしてみます。

.pulldown_body {
  display: none;
  opacity: 0;
  transition: opacity 500ms;
}
.pulldown:hover .pulldown_body {
  display: block;
  opacity: 1;
}

transitionでopacityのアニメーションの設定をしていますが、この場合はフェードになりません。
うまくいかない場合のデモページ

transitionではなく@keyframesを使った形にすると、フェードのアニメーションにできます。

.pulldown_body {
  display: none;
}
.pulldown:hover .pulldown_body {
  display: block;
  animation: fadein 500ms 1;
}
@keyframes fadein {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframesで実装するデモページ

@starting-style

最後が@starting-styleを使用する方法で、chromeはバージョン117(2023年9月)、Safariはバージョン17.5(2024年5月)、Firefoxはバージョン129(2024年8月)からのサポートと主要なブラウザではサポートされています。
ただ注意点として、記事作成時点ではForefoxでdisplay: none;からのアニメーションには対応していないとなっているものの、Firefoxのバージョン133で試している限りだとアニメーションされている？ようなので、そのあたりの確認などは必要そうです。

@starting-styleを使って設定を行ってみます。

.pulldown_body {
  display: none;
  opacity: 0;
  transition: opacity 500ms;
}
.pulldown:hover .pulldown_body {
  display: block;
  opacity: 1;

  @starting-style {
    opacity: 0;
  }
}

@starting-styleはtransitionの対象要素の開始時のスタイルを設定できます。
上記の場合、開始時のスタイルをopacity: 0;としているため、フェードのアニメーションが行われるようになります。
@starting-styleで実装するデモページ