Nuevas funcionalidades para las Animaciones en CSS

El mundo del desarrollo web está en constante evolución, y CSS no se queda atrás.

Con la llegada de nuevas funcionalidades, ahora será más fácil que nunca crear animaciones complejas sin depender de JavaScript.

En este artículo, exploraremos dos de estas nuevas características: la capacidad de animar display: none y la posibilidad de animar al tamaño de un elemento.

Animar display: none

Hasta ahora, la tarea de animar un elemento que entra o sale de la pantalla requería el uso de JavaScript para eliminar el elemento de la página una vez completada la animación o transición.

Esto ya no será necesario con las nuevas capacidades de CSS. Podrás animar el display: none como cualquier otra propiedad utilizando una animación con fotogramas clave (keyframes).

Ejemplo de Animación de Salida

.item {
  animation: fade-out 0.5s forwards;
}

@keyframes fade-out {
  100% {
    opacity: 0;
    display: none;
  }
}

¡Genial, verdad? Esta funcionalidad simplifica enormemente la animación de elementos que desaparecen de la pantalla, eliminando la necesidad de scripts adicionales.

Uso de Transiciones con transition-behavior

Para aquellos que prefieren las transiciones, también es posible utilizar esta nueva característica. Simplemente debes configurar la propiedad transition-behavior a allow-discrete.

* {
  transition-behavior: allow-discrete;
}

.item {
  transition: opacity 0.5s;
  opacity: 0;
}

Con esta configuración, puedes hacer que las transiciones manejen la animación de display: none de manera elegante y eficiente.

Animar Elementos que Aparecen

El caso opuesto, donde un elemento no está visible y quieres animarlo para que aparezca, también se ha simplificado.

Tradicionalmente, se utilizaba JavaScript para asegurarse de que los estilos iniciales estuvieran configurados correctamente, evitando que el elemento se mostrara visualmente antes de tiempo. Ahora, podemos especificar el estilo inicial de manera directa en CSS.

Ejemplo de Animación de Entrada

.item {
  @starting-style {
    opacity: 0;
  }
  opacity: 1;
  transition: opacity 0.5s;
}

Esta metodología no solo es elegante, sino también muy útil, permitiendo una implementación más limpia y manejable de las animaciones de entrada.

Animar al Tamaño

Otra poderosa adición a CSS es la capacidad de animar al tamaño intrínseco de un elemento, como height: auto;.

Este caso es comúnmente utilizado en áreas colapsables donde queremos que la altura sea 0px cuando está cerrado y que se ajuste automáticamente al contenido cuando está abierto.

Anteriormente, se necesitaba JavaScript para medir la altura del contenido y animar hasta ese valor en píxeles. Con la nueva funcionalidad, esto se logra de manera mucho más simple.

Ejemplo de Animación de Tamaño Intrínseco

.item { 
  height: 0; 
}

.item.open { 
  height: calc-size(auto);
}

La función calc-size hace toda la magia aquí, permitiendo una transición suave al tamaño intrínseco del elemento.

El Futuro de CSS

Estas nuevas características son solo el comienzo de cómo CSS está evolucionando para ser más poderoso y expresivo. Con estas adiciones, estamos entrando en una era dorada para las interfaces web, donde las posibilidades son casi infinitas.

Para aquellos interesados en profundizar más, recomiendo ver el video de Una Kravets de Google I/O, donde se exploran estas y otras nuevas funcionalidades en detalle.

Suscríbete a nuestra newsletter para seguir aprendiendo cosas nuevas de desarrollo cada día, ¡es gratis!