En la cuadrícula de CSS, 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. Admitir la interpolación para estas propiedades permite que los diseños de cuadrícula realicen una transición fluida entre estados, en lugar de ajustarse en el punto medio de una animación o transición.
Navegadores compatibles
- 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 mediante 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 segmentación y usará esa información para realizar una transición sin problemas al valor nuevo.
Por ejemplo:
- ¿Deseas hacer la transición de
opacityde0a1? Eso es una interpolación numérica. - ¿Deseas hacer la transición de
background-colordewhiteablack? Aplica un fundido entre los colores fuente y objetivo. - ¿Está realizando la transición de
width? Interpola numéricamente y convierte unidades sobre la marcha si es necesario.
Lo mismo se aplica a las animaciones de CSS, en las que el navegador realizará una interpolación de valores entre fotogramas clave.
Se interpolan grid-template-columns y grid-template-rows
Gracias a nuestros colaboradores de Microsoft, Chrome (a partir de la versión 107) puede interpolar los valores grid-template-columns y grid-template-rows.
Los diseños de cuadrícula pueden pasar de un estado a otro de forma fluida, en lugar de ajustarse a la mitad de una animación o transición.
En la demostración, debajo de una cuadrícula, se muestran varios avatares. Para conservar el espacio, los avatares se colocan uno encima del otro limitando el ancho de cada columna con grid-template-columns. Cuando colocas el cursor sobre ella, se le da más espacio a cada columna.
.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 grid-template-columns o grid-template-rows.
Parte de la serie Renovadamente interoperable