CSS transitions are a good way to create interactivity., transition to the initial state of an element, and the browser animates the transition between the two states. Transitions for intrinsic element variables such as auto have been a problem for web developers for decades, and the only option was to calculate the height dynamically using JavaScript.
Another challenge is to start transitions when an element receives its first style - for example, when it is added to the DOM or when the display-value of none This article explains how this problem can be solved with the new CSS functions such as calc-size(), interpolate-size, @starting-style and transition-behavior can be mastered.
Solution with calc-size()
If you have a DOM element that starts from a closed state (height: 0) to an open state (height: auto), the animation is usually not executed, although the transition-This is because browsers do not set transitions to intrinsic variables such as auto The new calc-size()-function, however, enables calculations on these intrinsic variables and thus also transitions:
f95f6dcb193aa903adc84ce47bc4a296
The calc-size()-function is not yet available in all browsers. A fallback can be achieved by retaining the original height: auto-Declaration can be achieved.
Solution with interpolate-size
The interpolate-size-property allows you to define the interpolation behavior of browsers and to decide whether they should be used between keywords such as auto By default, interpolation only takes place between numerical values. allow-keywords however, you can activate transitions between keywords:
f95f6dcb193aa903adc84ce47bc4a296
By interpolate-size: allow-keywords to the :root-element, you activate the new behavior for the entire page.
Transition from display:none
Another problem occurs when an element of display:none to a visible state. display is not an animatable property, there is no animation. The new CSS functions help here @starting-style and transition-behavior:
f95f6dcb193aa903adc84ce47bc4a296
With transition-behavior: allow-discrete ensures that the animation is executed before the display-value of block on none These rules make it possible to execute transitions even during an initial style update. @starting-style-rule ensures that the animation is executed correctly during the first style update.
Browser support
The new properties are currently being calc-size() and interpolate-size are not yet supported by all browsers. In Chrome they are available behind an experiment flag, but not yet in Safari and Firefox. Likewise, support for transition-behavior available in Chrome and Edge, but not in Safari and Firefox. Hopefully this will change in the future.