Curso gratuito de CSS
TÉCNICA F @starting-style + transition-behavior: allow-discrete — CSS moderno
Técnica F
@starting-style + allow-discrete

Animar
desde
display:none

CSS moderno que resuelve el problema histórico de animar elementos que aparecen desde display: none. Sin hacks, sin JavaScript para la animación.

Propiedad clave
transition-behavior: allow-discrete
Permite animar display como valor discreto.
At-rule nueva
@starting-style { }
Define el estado inicial antes de que empiece la transición de entrada.
Soporte
Chrome 117+ · Safari 17.5+ · Firefox 129+
CSS // el código completo de la técnica 
.nav-mobile {
  /* Cerrado: display none */
  display: none;
  opacity: 0;
  clip-path: inset(0 0 100% 0); /* recortado */

  transition:
    opacity 0.38s ease,
    clip-path 0.38s ease,
    display 0.38s allow-discrete; ← permite animar display
}

.nav-mobile.open {
  /* Abierto: display block + visible */
  display: block;
  opacity: 1;
  clip-path: inset(0 0 0% 0); /* revelado */
}

/* Estado ANTES de que empiece la transición de entrada */
@starting-style {
  .nav-mobile.open {
    opacity: 0;
    clip-path: inset(0 0 100% 0);
  }
}

/* JS: solo toggle de clase */
menu.classList.toggle('open');