Animating Height Auto

What This Is?

There’s new experimental browser support for animating height via keywords like height: auto;. Here’s the W3C Working Draft

How this works

First we need to opt in:

html {
	interpolate-size: allow-keywords;
}

Then we can write our animation:

.container {
	height: 0;
	transition: height 0.2s;
}

.container.is-open {
	height: auto; /* We can now animate the height with the 'auto' keyword! */
}

Browser Support

Browser support is getting there but still not available in Safari or Firefox… go figure.