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!
Top comments (4)
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
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!πYou can use fixed
max-height
instead ofheight:auto
to animate the elementI wasn't aware of that, thanks for sharing .