CSS: @starting-style a new & cool at-rule

The @starting-style CSS at-rule is used to define starting values for properties set on an element that you want to transition from when the element receives its first style update, i.e. when an element is first displayed on a previously loaded page.

Let's take a toast message as an example. To display it to the user, we will change its visibility, but the result will be that it appears immediately. Now we can use the new @starting-style rule to define the starting animation for this element.

Some simple examples

Let's use this baseline HTML, a simple rectangle:

.container {
  width: 10rem;
  height: 10rem;
  background-color: hotpink;  
}

Add initial background-color transition from blue to pink

.container {
  ...
  transition: background-color 4s; 
}

@starting-style {
  .container {
    background-color: blue;
  }
}

Add rotation to the previous example

.container {
  ...
  transition: transform 4s, background-color 4s;
  transform: rotate(0deg);} 
}

@starting-style {
  .container {
    background-color: blue;
    transform: rotate(360deg);
  }
}

Anyways, you get the idea.
Animate your popups, and menus or create an animated logo,
It's straightforward.

NOTE

This feature currently has limited availability.