CSS Interpolate-Size Property

The Problem with CSS Animations

CSS has long had a limitation that made animating element sizes frustrating: you could only transition between explicit numeric values like 100px and 200px, but not between a numeric value and an intrinsic size keyword like auto, min-content, or max-content. The interpolate-size property solves this fundamental constraint.

When building accordions, dropdown menus, collapsible sections, or any UI component that needs to reveal content on demand, developers traditionally wanted a CSS-only approach. The challenge was that CSS transitions require both start and end values to be calculable at animation time, but intrinsic sizing keywords like auto depend on the element's content, making them unknowable until the browser renders the layout.

This limitation led to various workarounds that each introduced their own problems. The infamous max-height hack involved setting an arbitrarily large value like 1000px for the transition end state, which produced jerky animations if actual content exceeded that value or excessive empty space if content was shorter. JavaScript-based height calculation required reading the scrollHeight property after rendering, adding DOM measurement logic that complicated stylesheets and introduced potential flash-of-unstyled-content issues. Some teams simply accepted that size animations weren't possible, accepting abrupt state changes that diminished user experience. The interpolate-size property addresses this gap directly in CSS, providing a standards-based solution that works with the browser's layout engine without requiring JavaScript or arbitrary values.

The property was added to the CSS Values and Units Module Level 5 specification, which is currently in Working Draft status, and has been implemented in Chromium-based browsers including Chrome and Edge.

For development teams implementing modern UI patterns, understanding how to leverage CSS capabilities like interpolate-size is essential for building exceptional user experiences without relying on JavaScript workarounds. Our /services/web-development/ expertise helps teams adopt these techniques effectively.

How Interpolate-Size Works

The interpolate-size property allows browsers to calculate intermediate values when transitioning between a numeric size and an intrinsic sizing keyword. When enabled, the browser determines the actual computed size of the intrinsic keyword at animation time, enabling smooth interpolation.

Core Values

• numeric-only (default): Maintains traditional CSS behavior--no animation occurs between numeric and keyword values. The browser simply jumps from the starting state to the ending state without any intermediate frames.
• allow-keywords: Enables interpolation between numeric values and intrinsic sizing keywords. When a transition or animation changes an element's size to or from a keyword value, the browser calculates and animates through all intermediate sizes.

Inheritance Behavior

One powerful aspect of interpolate-size is that it's an inherited property. Setting interpolate-size: allow-keywords on the :root element applies the behavior to all descendants throughout the document. This inheritance pattern makes it simple to adopt the feature globally without needing to add declarations to individual elements throughout a stylesheet. You can override the setting on specific elements if needed, allowing targeted control while maintaining the global default.

As demonstrated by practical tutorials, this inheritance means a single declaration on the HTML element enables keyword transitions for accordions, expandable cards, and other interactive components anywhere on the page.

Supported Keywords

Not all sizing keywords can be interpolated--only those representing actual computed sizes rather than sizing algorithms. The supported keywords include:

Practical Examples

Each keyword serves specific design patterns. Use auto when building accordion sections or dropdown menus where the browser should calculate the exact content height. Apply min-content in card layouts where items should never be smaller than their content, such as price tags or status badges. Choose max-content for text-heavy sections like expanded article previews where you want all content visible. The fit-content keyword shines in responsive layouts that need to adapt gracefully across different viewport sizes.

According to MDN Web Docs, these keywords represent computed sizes the browser can calculate at animation time, which is why they work with interpolate-size while other sizing functions do not.

Progressive Enhancement Strategy

The interpolate-size property demonstrates excellent progressive enhancement principles in modern CSS. Browser support is currently limited to Chromium-based browsers (Chrome and Edge), with Firefox and Safari not yet implementing the feature. Rather than avoiding the property entirely, developers can use it to enhance experiences for supported browsers while maintaining functional interfaces for all users.

Feature Detection

Developers can use @supports queries to detect browser support and adjust styles accordingly. This approach allows for targeted enhancement where the animation is only applied when the browser can render it properly:

@supports (interpolate-size: allow-keywords) {
 .accordion-content {
 transition: height 300ms ease;
 height: 0;
 overflow: hidden;
 }
 
 .accordion-content[open] {
 height: auto;
 }
}

/* Fallback for browsers without support */
@supports not (interpolate-size: allow-keywords) {
 .accordion-content[open] {
 display: block;
 }
 
 .accordion-content:not([open]) {
 display: none;
 }
}

The progressive enhancement approach defines base styles that work everywhere, then adds transitions that take effect only when the browser supports interpolate-size. Users on supporting browsers get smooth animations, while users on other browsers get a functional but instantly-changing interface. This pattern ensures no user is left with a broken experience, while those with modern browsers enjoy an enhanced visual experience.

For teams building modern web applications, this approach aligns with best practices for maintaining broad accessibility while leveraging new capabilities. Our /services/web-development/ services help organizations implement these patterns effectively.

Implementation Best Practices

1. Start Global: Set interpolate-size: allow-keywords on :root for automatic inheritance throughout your document. This single declaration enables the feature everywhere without needing to add it to individual components.

2. Combine with Overflow: Always use overflow: hidden when animating height to prevent content from overflowing during transitions. This ensures a clean visual experience throughout the animation.

3. Test Content Sizes: Verify animations feel natural across the range of possible content lengths. Very long content might animate for extended periods, so consider setting maximum durations or using timing controls for lengthy content.

4. Use Appropriate Timing Functions: The default ease timing works well for most cases, but consider ease-out for reveal animations that should feel snappy at the start.

Complete Accordion Example

Here's a complete accordion implementation that demonstrates best practices:

<details class="accordion">
 <summary class="accordion-header">
 What is interpolate-size?
 <span class="icon"></span>
 </summary>
 <div class="accordion-content">
 <p>The interpolate-size property enables smooth animations between numeric sizes and intrinsic sizing keywords.</p>
 </div>
</details>

:root {
 interpolate-size: allow-keywords;
}

.accordion {
 border: 1px solid #e0e0e0;
 border-radius: 8px;
 overflow: hidden;
}

.accordion-header {
 padding: 16px;
 background: #f8f9fa;
 cursor: pointer;
 display: flex;
 justify-content: space-between;
 align-items: center;
}

.accordion-content {
 height: 0;
 overflow: hidden;
 transition: height 300ms ease-out;
}

.accordion[open] .accordion-content {
 height: auto;
}

This pattern works seamlessly with the native <details> element, providing progressive enhancement where supported browsers get smooth animations and all browsers get functional accordion behavior.

Future of CSS Sizing Animations

The interpolate-size property addresses a long-standing gap in CSS animation capabilities that developers have struggled with for nearly two decades. As documented in the CSS Values and Units Module Level 5 specification, this property represents a significant step forward in enabling rich, interactive interfaces using pure CSS.

As browser support expands beyond Chromium-based browsers, interpolate-size will become a standard tool for creating polished, responsive web interfaces. The CSS working groups continue to evolve the specification based on implementation experience and developer feedback.

For web development teams, early adoption provides immediate benefits in supporting browsers while building familiarity with capabilities that will become more widely available. The progressive enhancement approach ensures that investment in this technology pays dividends now without breaking experiences for users on other browsers.

This property exemplifies how CSS continues to evolve as an expressive styling language capable of handling complex UI patterns natively. Combined with other modern CSS features like container queries and cascade layers, developers have unprecedented control over responsive, interactive designs without relying on JavaScript workarounds.

As you implement these techniques in your projects, consider how technical SEO and performance optimization complement modern CSS approaches. Fast, smooth animations contribute to positive user signals that search engines consider in ranking algorithms. The intersection of technical excellence and user experience remains central to effective web development. Our /services/seo-services/ team can help ensure your technically excellent implementations also deliver SEO benefits, while our /services/web-development/ expertise ensures your UI patterns follow industry best practices.