The CSS starting style at rule

A new CSS at rule to define an element's starting styles before it receives it's first style update.

What is the @starting style at rule?

The starting-style at rule (@starting-style) in CSS is a new solution to defining an elements starting styles before it receives it’s first style update.

The code

Let’s imagine we want to animate a box onto the screen and we’d like it to transition from transparent to our primary colour. We’ll also give it the impression that its falling from -50px above it’s natural position. We can use the @starting-style at rule to define the starting styles.

Start with opacity set to 0 and begin from a position of -50px from its natural position along the Y axis.

At the time of writing the @starting-style at rule is only available in Chrome, with Firefox and Safari unsupported.
.box {
  inline-size: 100px;
  aspect-ratio: 1;
  background-color: var(--color-primary);
  opacity: 1;
  transition: all 0.2s ease;
 
  @starting-style {
    opacity: 0;
    translate: 0 -50px;
  }
}

See it in action

Press the button to add a box to the screen.

The @starting-style styles are set until the element’s style is updated - which occurs when it is painted to the screen.