@starting-style

@starting-style

Define how an element looks BEFORE it begins animating in, CSS-only enter animations!

The problem

Elements that go from display: none to visible (dialogs, popovers) usually can't animate in.

The solution

@starting-style describes the "starting" state:

.modal {
  animation: fade 0.3s ease;
}
@starting-style {
  .modal {
    opacity: 0;
    transform: translateY(-10px);
  }
}
@keyframes fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

With transitions

.popover {
  opacity: 1;
  transition: opacity 0.3s;
}
@starting-style {
  .popover { opacity: 0; }
}

Where it shines

• <dialog> and [popover] elements.
• Tabs/accordions that unmount and remount.
• Smooth first-frame appearance.

TL;DR

• @starting-style sets the entering state.
• Works with transitions & animations.
• Excellent for dialog/popover enter motion.
• Baseline support in modern browsers.