14 · @starting-style

@starting-style

Animate popovers and dialogs on appear, without JS

Chrome 117+

@starting-style

Defines the initial style of an element that enters the DOM or becomes visible, so you can animate it with transition.

@starting-style { opacity: 0; transform: translateY(10px) }

When to use it

Popovers, dialog, inserted elements or display:none → block. Without this, there's no enter transition.

[popover]:popover-open { transition: ... }

No JS

Before you needed requestAnimationFrame + a .show class with setTimeout. Now CSS handles it with @starting-style.

css

/* estilo final del popover visible */
.starting-popover {
  opacity: 1;
  transform: translateY(0);
  transition: opacity .3s ease, transform .3s ease,
              overlay .3s allow-discrete,
              display .3s allow-discrete;
}

/* estilo ANTES de aparecer — el punto de partida */
@starting-style {
  .starting-popover {
    opacity: 0;
    transform: translateY(10px);
  }
}

An honest note on support

Many of these APIs are recent and not yet in every browser (see the pill on each section). The nice part is they all degrade gracefully: the carousel still scrolls, the accordion opens/closes, the textarea works — just without the animated "plus".