You can now Animate `height: auto` in CSS Without JavaScript!🚀
Tags: webdev, beginners, css, animation
Published: 2024-07-17 04:15:50

### 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:

```css
.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:

```css
.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:

```css
.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:

```css
.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:

```css
.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!