Normally @keyframes would be used for this technique, but with @starting-style we can transition.

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

Triggers via:

• page load
• inserted into the DOM
• going from display none to a visible display value

I feel like there's more use cases to explore. Let me know what you find‽

Try it on Codepen