14 · @starting-style

@starting-style

Animá popovers y diálogos al aparecer, sin JS

Chrome 117+

← Índice

@starting-style

Define el estilo inicial de un elemento que entra al DOM o se hace visible, para poder animarlo con transition.

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

Cuándo se usa

Popovers, dialog, elementos insertados o display:none → block. Sin esto, no hay transición de entrada.

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

Sin JS

Antes necesitabas requestAnimationFrame + clase .show con setTimeout. Ahora CSS lo resuelve con @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);
  }
}

Nota honesta sobre soporte

Muchas de estas APIs son recientes y aún no están en todos los navegadores (ver pill de cada sección). La gracia es que todas degradan bien: el carousel sigue scrolleando, el accordion abre/cierra, el textarea funciona — solo sin el "plus" animado.