Now in Baseline: animating entry effects

The station four caller CSS features for introduction and exit effects shared immoderate useful features that had conscionable landed successful Chrome. Now, 2 of these features, @starting-style and transition-behavior: allow-discrete person go Baseline Newly Available pinch nan merchandise of Firefox 129. You tin now create introduction animation effects for elements, including those animating from display: none, and animating into nan apical layer.

Setting up introduction effects pinch @starting-style

The @starting-style norm defines nan first styles connected an constituent earlier it's rendered connected nan page. This is required for elements that animate successful from display: none, arsenic they request a authorities from which to animate in.

Use @starting-style for illustration immoderate different at-rule successful CSS, by placing nan element's styles wrong it. For example, pinch a <dialog>, spot nan dialog[open] styles wrong a @starting-style rule. These are nan styles utilized earlier nan dialog opens.

Enabling discrete animations pinch allow-discrete

The 2nd point needed to support introduction animations for elements which animate from display: none, specified arsenic dialogs and popovers, is to alteration a caller animation mode, to support nan animation of discrete properties. Discrete properties are those that can't interpolate betwixt values. You tin deliberation of these for illustration an on/off switch. Some examples see display, visibility, mix-blend-mode—any spot wherever nan characteristic is 1 worth aliases another. With this caller animation mode, nan browser now supports swapping nan values astatine nan 50% constituent alternatively of astatine nan 0% constituent of a transition.

Use 1 of nan pursuing 2 ways to animate introduction effects for display: nary and visibility: hidden elements:

• The standalone spot transition-behavior pinch nan worth allow-discrete.
• The allow-discrete worth successful your modulation shorthand.

We urge nan 2nd method, because applying transition-behavior is included successful nan modulation shorthand. If you use transition-behavior: allow-discrete before nan modulation shorthand wherever you are applying nan transition, timing, and easing functions, nan browser will disregard nan transition-behavior.

If utilizing this successful nan shorthand, you only request to use nan allow-discrete keyword to nan circumstantial properties which require discrete animations. This is demonstrated successful nan pursuing CSS which transitions some nan construe spot and nan show property, but only applies nan allow-discrete keyword to nan show property.

Demo: putting it each together

Using these features is peculiarly useful for top-layer elements, specified arsenic nan <dialog> constituent aliases components that usage nan popover attribute. In nan pursuing example, a <dialog> constituent is animated from nan bottommost of nan viewport (initially starting astatine a 100vh vertical translator off-screen), to nan halfway of nan viewport, removing nan translator erstwhile nan <dialog> is open.

You tin constitute this much concisely pinch CSS nesting, which is besides a Baseline recently disposable feature.

Conclusion

It's breathtaking to spot advancement for illustration this onshore successful Baseline, and astatine nan very least, it is simply a bully progressive enhancement for those elements. Without these introduction effect features, nan elements that are animating into nan apical furniture aliases from a display: nary style will simply look connected your page without nan transition, arsenic they do today.

To study really to adhd exit effects successful a progressively enhanced way, cheque retired nan article “Four caller CSS features for soft introduction and exit animations”, and to study much astir these features, cheque retired nan pursuing archiving resources:

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