Animating display none and height auto

• August 12 2024
• 4 min. read

New properties and functions will enable you to animate properties that, until now, were not animatable.

We'll look at the following properties:

• transition-behavior
• calc-size()
• @starting-style

used to:

• Change the height of an element from 0 to auto
• Change the value of display from none to block

The code #

These are the properties we'll use for these examples.

transition-behavior #

The transition-behavior property specifies whether transitions will be started for properties whose animation behavior is discrete.

calc-size() #

The calc-size() function allows math to be performed on intrinsic sizes, just like you can use calc() to perform math on extrinsic sizes.

@starting-style #

The @starting-style at-rule is used to define starting values for properties set on an element that you want to transition from when an element is first displayed on a previously loaded page.

The @starting-style at-rule can be used in two ways:

1. As a standalone block that contains one or more rulesets defining starting style declarations and selecting the elements they apply to
2. Nested within an existing ruleset, that contains one or more declarations defining starting property values for the elements already selected by that ruleset

How it works #

The HTML we'll work with is simple.

• A button element with the class toggle
• A div element with the class container

<button class="toggle">Toogle Content</button>

<div class="container">
  <h2 class="container__headline">Some Title</h2>
  <p>Some content</p>
</div>

The container (.container) element holds the content of the dialogue.

the allow-discrete rule enables transitions for properties like display & visibility. Their values are applied after the transition has finished.

We also include the final values for the attributes we want to animate in case the browser doesn't support the @starting-style at-rule.

.container {
  block-size: 0;
  padding-block: 0;
  display: none;
  transition: all 0.5s ease-in-out;
	transition-behavior: allow-discrete;
}

We have separate CSS rules that match the container selector (.container) with the open attribute.

The values for block-size, display and padding-block are the final values for the transition.

calc-size will let us use intrinsic values in the calculations.

The @starting-style rule tells the browser what properties to use as the initial state for the animation.

If we don't use it the transition may not happen or may work in unexpected ways.

.container[open] {
  block-size: auto;
  block-size: calc-size(auto);
  display: block;
  padding-block: 2rem;

  @starting-style {
    block-size: 0;
    padding-block: 0;
  }
}

there is a little Javascript in the project. We've added a pointerdown event to toggle the open attribute on the container element.

const toggle = document.querySelector(".toggle");
const content = document.querySelector(".container");

toggle.addEventListener("pointerdown", (e) => {
  content.toggleAttribute("open");
});

Browser support #

We're mostly waiting for Firefox to fully support the feature in Desktop browsers and to implement it in Firefox for Android.

The support table for desktop browsers looks nice.

The mobile support is a little more spotty.

Unknown support for Opera Mini and UC browsers likely means it's not supported. As for other browsers, Firefox doesn't provide support in its Android version, I wonder if it's because a different team develops the Android version

With this data in mind, we should look at these transitions as progressive enhancements at least until Firefox adds the feature in Android and finishes the feature for desktop.

Further work #

We've covered animating from display: none and to height: auto.

A future step is to research what other discrete properties can we transition as described in Not Fully Animatable CSS properties.

There are other properties similar to calc-size that would work with different types of discrete properties. These are:

• color-mix() for color interpolation
• cross-fade() for image interpolation
• transform-mix() for interpolated transform values
• mix() for general-purpose interpolated value

It'll be interesting to see how these properties work once they are implemented.

Video Tutorials #

Links and resources #

• transition-behavior as specified
• transition-behavior — MDN
• calc-size as specified
• @starting-style — MDN

• CSS,
• Animations

Edit on Github