CSS @starting-style rule

Definition and usage

CSS @starting-style The rule is used to define the initial style of an element before the element receives its first style update.

This can be used to create smooth entering and exiting transitions for elements like popups, modal boxes, or any element that changes from a display: none state to a visible state.

Instance

Example 1

Using @starting-styleLet the box start with opacity 0 and fall from the top:

.box {
  width: 150px;
  height: 150px;
  background-color: pink;
  opacity: 1;
  transition: all 0.9s ease;
  @starting-style {
    opacity: 0;
    translate: 0 -80px;
  }
}

Try it yourself

Example 2

Used in popups and dialogs @starting-style:

#myPopover {
  transition: opacity .5s ease-in, scale .5s ease-in;
  @starting-style {
    opacity: 0;
    scale: 1.1;
  }
}
#myDialog {
  transition: opacity .5s ease-in, scale .5s ease-in;
  @starting-style {
    opacity: 0;
    scale: 1.1;
  }
}

Try it yourself

CSS syntax

@starting-style {
  CSS declaration;
}

Browser support

The numbers in the table represent the first browser version to fully support the @ rule.