Animación de modales con CSS: Starting-style y Discrete

En este segmento técnico, exploramos una de las novedades más potentes de CSS: la capacidad de realizar animaciones suaves en elementos como el componente dialog sin depender de JavaScript. Tradicionalmente, animar la aparición y desaparición de un elemento resultaba complejo a nivel de bloque, pero estas nuevas herramientas simplifican el proceso radicalmente:

• @starting-style: Permite definir el estado inicial de un elemento, facilitando que el navegador pueda calcular la transición correctamente al cambiar su visibilidad o estado.
• allow-discrete: Esta propiedad es fundamental para animar valores que antes se consideraban "discretos" (como display: none a display: block).

"Ahora también podemos animar los displays. Lo que podemos hacer es decirle aquí que la transición también va a ser display... y le decimos que allow discrete."

Beneficios clave

• Soporte Moderno: Actualmente, más del 80% de los navegadores modernos soportan estas reglas CSS, lo que las hace muy viables hoy en día.
• Versatilidad: Aunque está diseñado principalmente para el elemento dialog y details, puede aplicarse en cualquier proyecto, incluyendo aquellos que utilizan frameworks como Tailwind CSS, al seguir siendo CSS puro.
• Salida y entrada: Gracias a la transición de estados de display, es posible lograr animaciones de cierre igual de fluidas que las de apertura.

Estas adiciones eliminan años de frustración al intentar sincronizar animaciones y cambios de visibilidad en interfaces de usuario.