details要素を閉じる際にもCSSアニメーションを有効にする方法

概要 HTMLのdetails要素はネイティブに開閉可能な要素だが、開閉時にアニメーションをつける方法としては、JavaScriptを利用するケースがまだまだ一般的である。しかし、昨今ではCSSだけでも実装が可能になってきている。 例えば、以下のようなCSSで開閉のアニメーションが可能である。 :root { interpolate-size: allow-keywords; } details::details-content { height: 0; overflow: clip; opacity: 0; transition: height 0.4s ease; } details[open]::details-content { height: auto; opacity: 1; } しかし、この方法では「閉じる」際のアニメーションがうまく効かない。 opacityを付与することで