Everything from the @starting-style

You know when you want to make a smooth entry at a party, but it’s hard to get the right feeling and you stumble? We have the same issue in CSS when we want to transition an element from ‘display: none’ onto a page. It isn’t easy. But what if I told you that we soon have an exciting solution on all major browsers? It’s called @starting-style.

* {
  transition: opacity 0.5s ease-in;
  @starting-style {
    opacity: 0;
  }
}

Using @starting-style, we can specify styles for the element before it’s drawn to the page. They transition on page load, when they’re injected into the page, or when the display is toggled between ‘none’ and something else. In this example, it targets every element with the * selector and sets the starting style to opacity: 0, while also specifying a transition on opacity to ease-in. The result is that all elements fade in.Normally, keyframes could be used for this, but with @starting-style, we can transition.

I like it!