Now in Baseline: animating entry effects

Published: August 8, 2024

Una Kravets

The post four new CSS features for entry and exit effects shared some useful features that had just landed in Chrome. Now, two of these features, @starting-style and transition-behavior: allow-discrete have become Baseline Newly Available with the release of Firefox 129. You can now create entry animation effects for elements, including those animating from display: none, and animating into the top layer.

Setting up entry effects with @starting-style

The @starting-style rule defines the initial styles on an element before it's rendered on the page. This is required for elements that animate in from display: none, as they need a state from which to animate in.

Use @starting-style like any other at-rule in CSS, by placing the element's styles within it. For example, with a <dialog>, place the dialog[open] styles within a @starting-style rule. These are the styles used before the dialog opens.

@starting-style {
  dialog[open] {
    /*   Styles before the dialog opens   */
  }
}

Enabling discrete animations with allow-discrete

The second thing needed to support entry animations for elements which animate from display: none, such as dialogs and popovers, is to enable a new animation mode, to support the animation of discrete properties. Discrete properties are those that can't interpolate between values. You can think of these like an on/off switch. Some examples include display, visibility, mix-blend-mode—any property where the feature is one value or another. With this new animation mode, the browser now supports swapping the values at the 50% point instead of at the 0% point of a transition.

Use one of the following two ways to animate entry effects for display: none and visibility: hidden elements:

• The standalone property transition-behavior with the value allow-discrete.
• The allow-discrete value in your transition shorthand.

We recommend the second method, because applying transition-behavior is included in the transition shorthand. If you apply transition-behavior: allow-discrete before the transition shorthand where you are applying the transition, timing, and easing functions, the browser will ignore the transition-behavior.

If using this in the shorthand, you only need to apply the allow-discrete keyword to the specific properties which require discrete animations. This is demonstrated in the following CSS which transitions both the translate property and the display property, but only applies the allow-discrete keyword to the display property.

transition: translate 0.7s ease-out, display 0.7s ease-out allow-discrete;

Demo: putting it all together

Using these features is particularly useful for top-layer elements, such as the <dialog> element or components that use the popover attribute. In the following example, a <dialog> element is animated from the bottom of the viewport (initially starting at a 100vh vertical translation off-screen), to the center of the viewport, removing the translation when the <dialog> is open.

/* Before the dialog opens */
@starting-style {
  dialog[open] {
  translate: 0 100vh;
  }
}

/* Dialog is-open state */
dialog[open] {
  translate: 0 0;
  transition: translate 0.7s ease-out, display 0.7s ease-out allow-discrete;
}

You can write this more concisely with CSS nesting, which is also a Baseline newly available feature.

dialog[open] {
  translate: 0 0;
  transition: translate 0.7s ease-out, display 0.7s ease-out allow-discrete;

  @starting-style {
    translate: 0 100vh;
  }
}

Conclusion

It's exciting to see progress like this land in Baseline, and at the very least, it is a nice progressive enhancement for those elements. Without these entry effect features, the elements that are animating into the top layer or from a display: none style will simply appear on your page without the transition, as they do today.

To learn how to add exit effects in a progressively enhanced way, check out the article “Four new CSS features for smooth entry and exit animations”, and to learn more about these features, check out the following documentation resources:

• @starting-style on MDN
• transition-behavior on MDN