Mises en page de type grille animée CSS

Bramus

Dans la grille CSS, les propriétés grid-template-columns et grid-template-rows vous permettent de définir respectivement les noms des lignes et le dimensionnement des pistes des colonnes et des lignes de la grille. La prise en charge de l'interpolation pour ces propriétés permet aux mises en page de grille de passer d'un état à un autre de manière fluide, au lieu de s'ancrer à mi-chemin d'une animation ou d'une transition.

Browser Support

• 107
• 107
• 66
• 16

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 passer en douceur à la nouvelle valeur.

Exemple :

• Passer opacity de 0 à 1 ? Il s'agit d'une interpolation numérique.
• Passer background-color de white à black ? Fondu entre les couleurs source et cible.
• Transition vers width ? Interpoler numériquement, en convertissant les unités si nécessaire.

Il en va de même pour les animations CSS, où le navigateur effectue une interpolation des valeurs entre les images clés.

Remarque  : Lorsque vous utilisez des propriétés personnalisées, utilisez @property pour indiquer leur type. Ainsi, le navigateur sait comment passer d'une valeur à l'autre.

Animer grid-template-columns et grid-template-rows

Les mises en page en grille peuvent également passer d'un état à un autre de manière fluide, 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 l'utilisateur pointe sur une colonne, celle-ci s'agrandit.

.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);
}

Une fois la propriété transition en place, la grille interpole les valeurs de manière fluide.

L'effet s'applique également aux animations qui modifient les valeurs grid-template-columns ou grid-template-rows.