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!