Las transiciones CSS se ejecutan cuando una propiedad cambia entre dos estados representados. Nunca se ejecutaron en el camino hacia adentro, porque el primer cuadro de un elemento ya llega al final; por lo que cada animación abierta en la web se realizaba en animación de fotogramas clave o JavaScript. Las reglas arreglaron la mitad faltante.

dialog {
  opacity: 1;
  translate: 0 0;
  transition: opacity 0.3s, translate 0.3s;
}

dialog[open] {
  @starting-style {
    opacity: 0;
    translate: 0 1rem;
  }
}

¿Por qué esto supera los fotogramas clave?

  • El primer fotograma del elemento obtiene los valores iniciales; la propiedad de transición luego se anima al estado abierto con la misma facilidad que ya usa.
  • Se compone con las transiciones de visualización y ventana emergente: las transiciones de visualización permiten que un elemento se anime desde display:none, que solía bloquear las transiciones.
  • La salida utiliza las reglas de transición habituales, por lo que la entrada y la salida comparten una fuente de verdad en lugar de una animación y un truco inverso.
  • Envuelva todo en una consulta de medios de movimiento reducido preferido y la animación se desactivará para los lectores que optaron por no participar.

Receta de adopción

  1. Elija primero sus ventanas emergentes y cuadros de diálogo: ya tienen estados abiertos controlados por la aplicación, por lo que la ganancia es inmediata.
  2. Escriba los estilos en reposo, luego agregue el bloque inicial con solo las propiedades a las que realizará la transición.
  3. Agregue transición-comportamiento: permitir-discreto a cualquier transición de visualización, o la animación de cierre se ajustará.
  4. Pruebe el teclado, Escape y movimiento reducido; la plataforma tiene una brecha de pulido como máximo, y es su control de calidad quien debe nombrar.

Entre los estilos de diálogo, ventana emergente y de inicio, la animación de entrada ahora consta de tres declaraciones en una página estática. El menú de este sitio se abre exactamente con esa transición, y el hecho de que ningún script lo sepa es un diseño muy interesante.