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 tamaños de pistas de columnas y filas de cuadrícula, respectivamente. La compatibilidad con la interpolación de estas propiedades permite que los diseños de cuadrícula realicen transiciones fluidas entre estados, en lugar de ajustarse a la mitad de una animación o transición.

Browser Support

• 107
• 107
• 66
• 16

Interpolación de valores en CSS

En CSS, puedes realizar una transición fluida de las 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 de destino y usará esa información para realizar una transición fluida al valor nuevo.

Por ejemplo:

• ¿Quieres cambiar el estado de opacity de 0 a 1? Esa es una interpolación numérica.
• ¿Quieres cambiar el estado de background-color de white a black? Atenúa los colores de origen y de destino.
• ¿Estás en proceso de transición de width? Interpola numéricamente y convierte las unidades en el proceso si es necesario.

Lo mismo se aplica a las animaciones de CSS, en las que el navegador interpolará los valores entre los fotogramas clave.

Nota: Cuando uses propiedades personalizadas, utiliza @property para indicar de qué tipo son. De esa manera, el navegador sabe cómo realizar la transición de un valor al otro.

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 el punto medio de una animación o transición.

En la siguiente demostración, se muestra una cuadrícula con varios avatares. Para ahorrar espacio, los avatares se disponen uno encima del otro limitando el ancho de cada columna con grid-template-columns. Cuando se coloca el cursor sobre cada 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 implementada, la cuadrícula interpola de forma fluida entre los valores.

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