details-animation Demo
Since your environment is prefers-reduced-motion: reduce, no animation will take place.
<details class="js-details-animation">
<summary>Caption Text</summary>
<p>Contents text text ...</p>
</details>Contents text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
open attribute<details class="js-details-animation" open="">
<summary>Caption Text</summary>
<p>Contents text text ...</p>
</details>Contents text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
data-duration, data-easing attribute<details class="js-details-animation" data-duration="2000" data-easing="linear">
<summary>Caption Text</summary>
<p>Contents text text ...</p>
</details>Contents text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
writing-mode: vertical-rlテキストテキストテキストテキストテキスト
writing-mode: sideways-lrテキストテキストテキストテキストテキスト