Smooth height auto animations without JavaScript
Animating to height: auto required JS to measure scrollHeight, set a fixed pixel height, then snap back to auto. interpolate-size: allow-keywords lets CSS transition directly to and from intrinsic sizes.
2.accordion {
3 height: 0; overflow: hidden;
4 transition: height .3s ease;
5}
6.accordion.open { height: auto; }
2// JS: measure, set px height, then snap to auto
3function open(el) {
4 el.style.height = el.scrollHeight + 'px';
5 el.addEventListener('transitionend', () => {
6 el.style.height = 'auto';
7 }, { once: true });
8}
Interpolate size Browser Support
Since 2024 this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.
Works in all modern browsers. May need a fallback for older browsers.
Your first month is free
Managed WordPress hosting for faster sites.
No JS needed
No scrollHeight measurement, no transitionend listener, no pixel-to-auto snap.
Works with any keyword
Transitions to and from auto, min-content, max-content, and fit-content all work with one declaration.
Set it once
Declaring interpolate-size on :root unlocks keyword size transitions everywhere on the page.
How it works
height: auto isn't animatable because the browser can't interpolate between a fixed length and a keyword. The workaround was JavaScript: read scrollHeight to get the actual pixel height, set it as a fixed value, trigger the transition, then snap back to auto on transitionend.
interpolate-size: allow-keywords opts the browser into animating keyword sizes. Set it on :root once and transitions to height: auto, width: fit-content, and other intrinsic sizes work everywhere on the page. No JavaScript, no scrollHeight, no transitionend.