Dans la grille CSS, les propriétés grid-template-columns
et grid-template-rows
vous permettent de définir des noms de lignes et de suivre la taille des colonnes et des lignes de la grille, respectivement. La prise en charge de l'interpolation pour ces propriétés permet aux mises en page de grille de passer de manière fluide d'un état à un autre, au lieu de s'ancrer à mi-chemin d'une animation ou d'une transition.
Navigateurs pris en charge
Interpolation de valeurs en CSS
En CSS, vous pouvez effectuer une transition fluide des propriétés d'une valeur à une autre à l'aide de la propriété transition
.
#target {
opacity: 0.5;
transition: opacity ease-in-out 0.25s;
}
#target:hover {
opacity: 1;
}
Le moteur de rendu détecte automatiquement le type de la valeur de la propriété ciblée et utilise ces informations pour effectuer une transition fluide vers la nouvelle valeur.
Exemple :
opacity
passe de0
à1
? Il s'agit d'une interpolation numérique.background-color
passe dewhite
àblack
? Dégradé entre les couleurs source et cible.- Effectuer la transition de
width
? Interpoler numériquement et convertir des unités en cours de route, si nécessaire
Il en va de même pour les animations CSS, où le navigateur effectue une interpolation de valeur entre les images clés.
Animer grid-template-columns
et grid-template-rows
Les mises en page en grille peuvent également effectuer une transition fluide entre les états, au lieu de s'ancrer à mi-chemin d'une animation ou d'une transition.
Dans la démonstration suivante, une grille affiche plusieurs avatars. Pour économiser de l'espace, les avatars sont disposés les uns sur les autres en limitant la largeur de chaque colonne à l'aide de grid-template-columns
. Lorsque vous pointez sur une colonne, elle prend plus de place.
.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);
}
Avec la propriété transition
en place, la grille effectue une interpolation fluide entre les valeurs.
L'effet s'applique également aux animations qui modifient les valeurs grid-template-columns
ou grid-template-rows
.