Diseños de cuadrícula animados de CSS

Bramus

En CSS Grid, las propiedades grid-template-columns y grid-template-rows te permiten definir nombres de líneas y hacer un seguimiento del tamaño de las columnas y filas de la cuadrícula, respectivamente. La compatibilidad con la interpolación para estas propiedades permite que los diseños de cuadrícula realicen transiciones fluidas entre estados, en lugar de ajustarse en la mitad de una animación o transición.

Interpolación de valores en CSS

En CSS, puedes realizar transiciones suaves de propiedades de un valor a otro con la propiedad transition.

#target {
  opacity: 0.5;
  transition: opacity ease-in-out 0.25s;
}

#target:hover {
  opacity: 1;
}

El motor de renderización detectará automáticamente el tipo de valor de la propiedad objetivo y usará esa información para realizar la transición sin problemas al nuevo valor.

Por ejemplo:

• ¿Se está realizando la transición de opacity de 0 a 1? Eso es una interpolación numérica.
• ¿Se está realizando la transición de background-color de white a black? Desvanece entre los colores de origen y destino.
• ¿Quieres migrar width? Realiza una interpolación numérica y convierte las unidades a lo largo del proceso si es necesario.

Lo mismo se aplica a las animaciones de CSS, en las que el navegador realizará la interpolación de valores entre fotogramas clave.

Anima grid-template-columns y grid-template-rows

Los diseños de cuadrícula también pueden realizar transiciones fluidas entre estados, en lugar de ajustarse en la mitad de una animación o transición.

En la siguiente demostración, una cuadrícula muestra varios avatares. Para ahorrar espacio, los avatares se superponen limitándose el ancho de cada columna con grid-template-columns. Cuando colocas el cursor sobre una columna, se le asigna más espacio.

.avatars {
  display: grid;
  gap: 0.35em;

  grid-auto-flow: column;
  grid-template-columns: repeat(4, 2em);
  transition: all ease-in-out 0.25s;
}

.avatars:hover {
  grid-template-columns: repeat(4, 4em);
}

Con la propiedad transition en su lugar, la cuadrícula interpola sin problemas entre los valores.

El efecto también se aplica a las animaciones que cambian los valores de grid-template-columns o grid-template-rows.