Mises en page de type grille animée CSS

Bramus

Dans CSS Grid, les propriétés grid-template-columns et grid-template-rows vous permettent de définir des noms de lignes et de suivre la mise à l'échelle 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.

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 de 0 à 1 ? Il s'agit d'une interpolation numérique.
• background-color passe de white à black ? Dégradé entre les couleurs source et cible.
• width en cours de transition ? Interpolez numériquement, en convertissant les unités au fur et à mesure, 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.