details要素の開閉時をフェードで切り替える

以前にdetails要素の開閉アニメーションをJavaScriptを併用して実装する記事を投稿しましたが、今回はCSSのみでフェードの切り替えを対応する方法を検討してみます。

サンプルコード

今回は以下のHTMLで実装を試していきます。

<details class="accordion">
  <summary class="accordion__title">リゼ・ヘルエスタ</summary>
  <div class="accordion__content">
    <p>ヘルエスタ王国の第二皇女。<br>
    文武両道学園主席、真面目で誰にでも優しくかなりの人望がある。<br>
    王位継承の資格者として日々鍛錬や人とのコミュニケーションを大事にしている。</p>
    <p>ファンアート：<a href="https://twitter.com/hashtag/%E3%83%98%E3%83%AB%E7%B5%B5%E3%82%B9%E3%82%BF">#ヘル絵スタ</a></p>
  </div>
</details>

まずはkeyframesを使用する方法です。
CSSは必要な箇所のみの抜粋になりますので、全体のコードはデモページをご確認ください。

.accordion[open] .accordion__content {
	animation: fadeIn 400ms ease;
}
@keyframes fadeIn {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

open属性が付与された際にkeyframesでフェードインのアニメーションを行っています。
keyframesを使用するデモページ
この実装の場合、フェードアウトのアニメーションはできません。

次に以前投稿した@starting-styleの記事でも試した、@starting-styleを使用する方法を試してみます。

.accordion__content {
	opacity: 0;
	transition:
		opacity 400ms,
		display 400ms allow-discrete;
}
.accordion[open] .accordion__content {
	opacity: 1;
	@starting-style {
		opacity: 0;
	}
}

この場合も先ほどと同様に、フェードインのアニメーションは再現できましたが、フェードアウトのアニメーションができないようでした。
@starting-styleを使用するデモページ

::details-content

最後に試す方法が::details-content疑似要素です。
::details-content疑似要素は、details要素の折りたたみ可能な要素(details要素内のsummary要素以外)を表します。
detail要素はShadow DOMを使って実装されていて、::details-content疑似要素は折りたたみ要素をラップするslotを対象とするようです。

::details-content疑似要素を使って設定を試してみます。
その際、content-visibilityプロパティとallow-discreteキーワードをあわせてtransitionに設定する必要があります。

.accordion::details-content {
	opacity: 0;
	transition:
		content-visibility 400ms allow-discrete,
		opacity 400ms;
}
.accordion[open]::details-content {
	opacity: 1;
}

この場合はフェードイン、フェードアウト共にアニメーションさせることができました。
::details-contentを使用するデモページ

対応ブラウザ

::details-content疑似要素は主要ブラウザで対応しています。
ただ、chromeはバージョン131(2024年11月)、Safariは18.4(2025年3月)、Firefoxは143(2025年9月)と比較的最近サポートされているので、対応範囲によってはkeyframesを使った方法にするなどの検討が必要そうです。