少し前から主要ブラウザで「@starting-style」がサポートされたので、CSSでフェードの設定をする方法を改めて確認してみます。
サンプルコード
以下のようなHTMLを用意して、.pulldownにホバーすると.pulldown_bodyがフェードインで表示されるという例を試してみます。
1 2 3 4 | <div class="pulldown"> <div class="pulldown_head">ホバーで表示</div> <div class="pulldown_body">コンテンツ内容</div></div> |
まずはうまくいかない例で、transitionを使った実装をしてみます。
1 2 3 4 5 6 7 8 9 | .pulldown_body { display: none; opacity: 0; transition: opacity 500ms;}.pulldown:hover .pulldown_body { display: block; opacity: 1;} |
transitionでopacityのアニメーションの設定をしていますが、この場合はフェードになりません。
うまくいかない場合のデモページ
transitionではなく@keyframesを使った形にすると、フェードのアニメーションにできます。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | .pulldown_body { display: none;}.pulldown:hover .pulldown_body { display: block; animation: fadein 500ms 1;}@keyframes fadein { 0% { opacity: 0; } 100% { opacity: 1; }} |
@starting-style
最後が@starting-styleを使用する方法で、chromeはバージョン117(2023年9月)、Safariはバージョン17.5(2024年5月)、Firefoxはバージョン129(2024年8月)からのサポートと主要なブラウザではサポートされています。
ただ注意点として、記事作成時点ではForefoxでdisplay: none;からのアニメーションには対応していないとなっているものの、Firefoxのバージョン133で試している限りだとアニメーションされている？ようなので、そのあたりの確認などは必要そうです。
@starting-styleを使って設定を行ってみます。
1 2 3 4 5 6 7 8 9 10 11 12 13 | .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で実装するデモページ
コメントが承認されるまで時間がかかります。