Transitioning Top-Layer Entries and the display Property in CSS

CSS animations have seen significant improvements with new features like scroll-driven animations, view transitions, and more. Among these, @starting-style and transition-behavior: allow-discrete stand out as practical additions for easing animations, especially when dealing with elements that enter and exit the top layer or have a display: none state.

Get Bhavitra Technologies Private Limited’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

In this post, we , top web design service in Kolkata will explore these new CSS properties with real-world examples.

What Does transition-behavior: allow-discrete Do?

In traditional CSS transitions, properties that change instantly — like display or visibility—could not be animated smoothly. The transition-behavior: allow-discrete property changes this by enabling transitions for these discrete properties when supported by the browser.

Example: Transitioning visibility

.element {
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.5s ease-in-out, visibility 0.5s;
  transition-behavior: allow-discrete;
}

.element.visible {
  visibility: visible;
  opacity: 1;
}

In the example above, visibility would normally change immediately, but allow-discrete allows it to transition smoothly with opacity.

What Does @starting-style Do?

The @starting-style rule allows CSS to define an initial style for animations, even when the element’s default state in the DOM differs. As per affordable web design company in India, this is especially useful for animating properties that change from a computed value of none, such as display.

Example: Animating From display: none

@starting-style {
  .fade-in {
    opacity: 0;
  }
}

.fade-in {
  display: block;
  opacity: 1;
  transition: opacity 0.5s ease-in-out;
}

This ensures that when the element appears, it transitions smoothly rather than abruptly popping into view.

Animating Dialogs and Popovers in the Top Layer

What Is the Top Layer?

The top layer is a browser-managed layer where elements like <dialog> and <popover> are placed when they are displayed. Elements in the top layer overlay everything else on the page.

Transitioning a <dialog> Element in the Top Layer

dialog::backdrop {
  opacity: 0;
  transition: opacity 0.5s;
}

.show-dialog::backdrop {
  opacity: 1;
}

This ensures the dialog’s backdrop fades in smoothly when opened.

Other Discrete Properties That Can Transition

transition-behavior: allow-discrete; can be applied to:

• visibility
• content-visibility
• pointer-events

This allows smoother transitions for elements entering and exiting the DOM.

Wrapping Up

CSS is evolving to handle previously non-animatable properties. With transition-behavior: allow-discrete and @starting-style, we can now create smoother and more natural animations for elements transitioning in and out of the DOM or the top layer. These features improve UX and eliminate the need for JavaScript workarounds in many cases.

What are your thoughts on these new CSS capabilities? Let’s discuss in the comments with web developer near Kolkata!