You can now Animate `height: auto` in CSS Without JavaScript!🚀

Introduction

Animating height: auto in CSS has been a long-standing challenge for web developers. Traditionally, CSS requires a specific height value to animate, making it impossible to transition to/from height: auto directly. This limitation forced developers to resort to JavaScript for calculating and animating element heights. But now, CSS introduces the game-changing calc-size() function, making these animations not only possible but also straightforward.

The Magic of calc-size()

The calc-size() function operates similarly to the calc() function but extends its capabilities to handle automatically calculated sizes by the browser, including:

• auto
• min-content
• max-content
• fit-content
• stretch
• contain

Essentially, calc-size() converts values like auto into specific pixel values, which can then be used in calculations with other values. This is particularly useful for animating elements with dynamic sizes.

Basic Usage

Consider this simple example:

.element {
  height: 0;
  overflow: hidden;
  transition: height 0.3s;
}

.element.open {
  height: calc-size(auto);
}

By wrapping the auto value in the calc-size() function, we can now animate the height of an element from 0 to auto without any JavaScript. Here's how it looks in action:

• Normal Expansion
• Animated Expansion Using calc-size()

Limitations and Workarounds

It's important to note that you cannot animate between two automatically calculated values, such as auto and min-content. However, you can use calc-size() on non-automatic values within animations, ensuring smooth transitions:

.element {
  height: calc-size(0px);
  overflow: hidden;
  transition: height 0.3s;
}

.element.open {
  height: auto;
}

Advanced Calculations

While the primary use case for calc-size() is animations, it also supports more complex calculations:

.element {
  width: calc-size(min-content, size + 50px);
}

In this example, the width of the element is set to the minimum content size plus 50px. The syntax involves two arguments: the size to be calculated and the operation to perform. The size keyword represents the current size of the first property passed to calc-size.

You can even nest multiple calc-size() functions for more sophisticated calculations:

.element {
  width: calc-size(calc-size(min-content, size + 50px), size * 2);
}

This calculates the min-content size, adds 50px, and then doubles the result.

Browser Support

Currently, calc-size() is only supported in Chrome Canary with the #enable-experimental-web-platform-features flag enabled. As it's a progressive enhancement, using it won't break your site in unsupported browsers—it simply won't animate.

Here's how you can implement it:

.element {
  height: 0;
  overflow: hidden;
  transition: height 0.3s;
}

.element.open {
  height: auto;
  height: calc-size(auto);
}

In supported browsers, the animation works seamlessly, while in others, the element will display without animation.

Conclusion

The calc-size() function is a fantastic addition to CSS, simplifying animations involving dynamic sizes and enabling previously impossible calculations. Although it's currently in an experimental stage, its potential to enhance web development is immense. We eagerly await full support across all browsers!

Stay tuned and start experimenting with calc-size() to elevate your CSS animations to new heights!

Comments

[Jon Randy 🎖️]

Looks useful, but as you point out, support is very limited and is not likely to be widespread any time soon. However, JS is not necessary to do transitions with height: auto - a quick bit of googling shows up a number of ways to do it with plain HTML/CSS. You can find one example here, and another right here on DEV:

🧙‍♂️ CSS trick: transition from height 0 to auto!

Francesco Vetere ・ Nov 25 '23

#webdev #frontend #css

[Srijan Karki]

Yes, you are right. It will be very helpful and easy to use when it is supported by all browsers. In the meantime, leveraging plain HTML/CSS for transitions with height: auto is a great alternative. Thank you for pointing out this article!

PS: I also told that you can now do it without JS🫣
You can now Animate height: auto in CSS Without JavaScript!🚀

[Syakir]

You can use fixed max-height instead of height:auto to animate the element

[Srijan Karki]

I wasn't aware of that, thanks for sharing .

[Ilya Konyakhin]

be careful. If you use this property in nuxt 2 - your build may break. For resolve just move this to a separate CSS file that is not involved in the build