PMEve--Everyone is a Product Manager

Home >> Tech Dev >> HTML+CSS

CSS Now Supports Auto Height Transitions!

Time： Column：HTML+CSS views：266

CSS has finally introduced support for auto height transition animations. With the new calc-size function, non-numeric units, including auto, can now be converted into transitionable size units. Additionally, the interpolate-size property allows keywords to support transitions globally.

We all know that certain properties, such as height: auto, did not support transitions before. 

div {
  height: 0;
  transition: 1s;
}
.wrap:hover div {
  height: auto;
}

In the past, one method to achieve a height transition effect involved using a grid layout, exploiting the fact that grid units like 1fr can transition. However, things have gotten simpler now that Chrome 129+ supports transitions for auto height. Let’s take a quick look!

1. The calc-size Function

To implement an auto height transition, you can now use the brand-new calc-size function.

CSS Now Supports Auto Height Transitions!

This function might remind you of calc(). Indeed, it’s quite similar, as it allows you to convert keywords into concrete dimensions.

Let’s revisit the example above. Simply change the height to calc-size(auto): 

div {
  height: 0;
  transition: 1s;
}
.wrap:hover div {
  height: calc-size(auto);
}

Now the transition works (available in Chrome 129+ or Chrome 127+ with experimental features enabled).

Beyond auto, calc-size also supports other sizing keywords, such as: 

height: calc-size(min-content);
height: calc-size(max-content);
height: calc-size(fit-content);

It even supports mixed calculations, like: 

height: calc-size(auto + 10px);
height: calc-size(max-content - 10px);

2. The interpolate-size Property

In previous examples, for backward compatibility, we still had to retain the height: auto declaration: 

div {
  height: 0;
  transition: 1s;
}
.wrap:hover div {
  height: auto;
  height: calc-size(auto);
}

If you are working on an existing project, updating multiple places with this new syntax can be invasive. To make things easier, browsers now offer the interpolate-size property, which defines the interpolation rules for size calculations. It accepts two keywords: 

interpolate-size: numeric-only; /* Default value */
interpolate-size: allow-keywords;

The first option, numeric-only, means only numeric values will trigger transitions (the current browser default). The second option, allow-keywords, permits transitions for all keywords, including auto.

With this property, you can apply the following globally in your project: 

:root {
  interpolate-size: allow-keywords;
}
div {
  height: 0;
  transition: 1s;
}
.wrap:hover div {
  height: auto;
}

This will enable transitions globally without the need to add calc-size(auto) everywhere. Convenient, right?

You can also check out the actual effect via the following links:

3. Supporting Transitions for <details> Tag

You might already know that the <details> element, paired with <summary>, can create expandable/collapsible sections: 

<div class="con">
  <details name="a">
    <summary>Group A</summary>
    <p>This is the first group, name="a".</p>
  </details>
  <details name="a">
    <summary>Welcome</summary>
    <p>The details element has a new "name" attribute.</p>
  </details>
  <details name="a">
    <summary>Follow</summary>
    <p>This seemingly simple attribute brings an entirely new mode. Let's explore it!</p>
  </details>
</div>

Here’s how it works:

![Example Image]

By default, the opening and closing of details elements don’t have any transition effect. However, you can easily add smooth transitions with calc-size or interpolate-size. The key implementation looks like this: 

:root {
  interpolate-size: allow-keywords;
}
::details-content {
  content-visibility: visible;
  height: 0;
  transition: 0.3s;
  overflow: hidden;
}
details[open] ::details-content {
  height: auto;
}

Now you have a seamless transition effect. Pretty smooth, right?

This is a reusable code snippet that can be applied anywhere.

You can also check out the actual effect via the following links:

4. You Can Start Using It Now!

While compatibility is still limited (Chrome 129+), this is a progressive enhancement feature. It won’t affect existing functionality and doesn’t require changes to your current structure. Simply add the following line globally: 

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

Now, browsers that support this feature will provide smooth transitions, and there’s no need to worry about compatibility.

In Summary:

  1. calc-size allows non-numeric units, including auto, to be transitioned.

  2. interpolate-size enables transitions for any keyword globally.

[1] CSS calc-size (codepen.io): https://codepen.io/xboxyan/pen/NWQKjGo

[2] CSS calc-size (juejin.cn): https://code.juejin.cn/pen/7416950104911216675

[3] CSS details transition (codepen.io): https://codepen.io/xboxyan/pen/KKOPmVO

[4] CSS details transition (juejin.cn): https://code.juejin.cn/pen/7416957616628170789

Recommended