La publicación cuatro nuevas funciones de CSS para los efectos de entrada y salida compartía algunas funciones útiles que acababan de llegar a Chrome. Ahora, dos de estas funciones, @starting-style y transition-Behavior: allow-discrete, se convirtieron en el modelo de referencia, que está disponible recientemente con el lanzamiento de Firefox 129. Ahora puedes crear efectos de animación de entrada para elementos, incluidos los que se animan desde display: none y los que se animan en la capa superior.
Configurando efectos de entrada con @starting-style
La regla @starting-style define los diseños iniciales de un elemento antes de que se renderice en la página. Esto es necesario para los elementos que se animan desde display: none, ya que necesitan un estado desde el cual animar.
Usa @starting-style como cualquier otra regla-at en CSS, colocando los estilos del elemento dentro de él. Por ejemplo, con un <dialog>, coloca los estilos dialog[open] dentro de una regla @starting-style. Estos son los estilos que se usan antes de que se abra el diálogo.
@starting-style {
dialog[open] {
/* Styles before the dialog opens */
}
}
Cómo habilitar animaciones discretas con allow-discrete
Lo segundo que se necesita para admitir animaciones de entrada para elementos que se animan desde display: none, como diálogos y ventanas emergentes, es habilitar un nuevo modo de animación que admita la animación de propiedades discretas. Las propiedades discretas son aquellas que no pueden interpolar entre valores. Considéralos un interruptor de encendido/apagado. Algunos ejemplos incluyen display, visibility y mix-blend-mode, que son cualquier propiedad en la que el atributo es un valor u otro. Con este nuevo modo de animación, el navegador ahora permite intercambiar los valores en el punto del 50%, en lugar de hacerlo en el punto del 0% de una transición.
Usa una de las siguientes dos maneras de animar efectos de entrada para elementos display: none y visibility: hidden:
- La propiedad independiente
transition-behaviorcon el valorallow-discrete - El valor
allow-discreteen tu abreviatura de transición.
Recomendamos el segundo método, ya que la aplicación de transition-behavior se incluye en la abreviatura transition. Si aplicas transition-behavior: allow-discrete antes de la abreviatura de transición en la que aplicas las funciones de transición, sincronización y aceleración, el navegador ignorará la transition-behavior.
Si lo usas como atajo, solo debes aplicar la palabra clave allow-discrete a las propiedades específicas que requieren animaciones discretas. Esto se demuestra en el siguiente CSS, que realiza la transición de las propiedades translate y display, pero solo aplica la palabra clave allow-discrete a la propiedad display.
transition: translate 0.7s ease-out, display 0.7s ease-out allow-discrete;
Demostración: Cómo reunir todos los elementos
El uso de estas funciones es particularmente útil para los elementos de la capa superior, como el elemento <dialog> o los componentes que usan el atributo popover. En el siguiente ejemplo, se anima un elemento <dialog> desde la parte inferior del viewport (inicialmente comienza en una traslación vertical de 100 vh fuera de la pantalla) hasta el centro del viewport, lo que quita la traducción cuando <dialog> está abierto.
/* Before the dialog opens */
@starting-style {
dialog[open] {
translate: 0 100vh;
}
}
/* Dialog is-open state */
dialog[open] {
translate: 0 0;
transition: translate 0.7s ease-out, display 0.7s ease-out allow-discrete;
}
Puedes escribir esto de forma más concisa con el anidamiento de CSS, que también es una función de Baseline recientemente disponible.
dialog[open] {
translate: 0 0;
transition: translate 0.7s ease-out, display 0.7s ease-out allow-discrete;
@starting-style {
translate: 0 100vh;
}
}
Conclusión
Es emocionante ver avances como este país en Baseline y, al menos, es una buena mejora progresiva para esos elementos. Sin estas funciones de efecto de entrada, los elementos que se animan en la capa superior o desde un estilo display: none simplemente aparecerán en tu página sin la transición, como lo hacen actualmente.
Para obtener más información sobre cómo agregar efectos de salida de forma progresiva, consulta el artículo “Cuatro funciones nuevas de CSS para las animaciones de entrada y salida sin problemas”. Si quieres obtener más información sobre estas funciones, consulta los siguientes recursos de documentación: