Animating <details> Element with Only CSS

Can you animate the opening and closing of the HTML <details> element using only CSS? Yes. Here’s the code: details::details-content { block-size: 0; overflow: hidden; transition-property: block-size, content-visibility; transition-duration: var(--transition-duration, 0.2s); transition-behavior: allow-discrete; } details[open]::details-content { block-size: auto; block-size: calc-size(auto, size); } It took an annoyingly long time to find a good answer to what felt like a basic question. Too many solutions relied on hacky approaches with obvious flaws, used unnecessary JavaScript, or only accomplished part of the solution (not animating the close). I finally found what I was looking for in a video, and since I prefer blog posts that are easy to scan, find what one needs (especially when the author puts the answer at the top of the page!), and copy/pasted from, I decided to write this and share it for posterity. Hope you found it useful. Please share. Explanation If you want a deeper…