Animating height with only CSS
I love ditching JavaScript for HTML and CSS whenever I can. It’s a core part of the Lean Web Club ethos.
In particular, one of my favorite sets of HTML elements are <details> and <summary>, which can be used to create a disclosure or expand-and-collapse component with absolutely no JS.
<details>
<summary>Show or Hide</summary>
<p>This content is hidden by default, and visible when the summary is clicked, tapped, or interacted with using a keyboard.</p>
</details>But one of the biggest complaints I’ve seen about this over the years is that unlike a JavaScript disclosure, there’s no way to animate the expanding of the content with CSS using height: auto.
We’ve always had to use absolute heights, which resulted in some weird side-effects, so most folks steered away from it.
So, I was delighted when Bramus from the Chrome Dev Rel team posted about a way to finally do this!
The tl;dr version: add this to your stylesheet…
:root {
interpolate-size: allow-keywords;
}Then, you can animate the height attribute to auto like we’ve all wanted to for years!
details {
height: 1.5rem;
transition: height 500ms ease;
}
details[open] {
height: auto;
overflow: clip;
}It’s Chromium-only for now (in my testing, it works in Chrome and Edge work, but not Vivaldi), but a nice bit of progressive enhancement where supported.