Mises en page de type grille animée CSS

Dans la grille CSS, les propriétés grid-template-columns et grid-template-rows vous permettent respectivement de définir les noms des lignes et de suivre la taille 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 d'effectuer une transition fluide entre les états, au lieu de l'ancrage à mi-chemin d'une animation ou d'une transition.

Bramus

Interpolation de valeur en CSS

En CSS, vous pouvez faire passer des propriétés d'une valeur à l'autre de façon fluide à 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 valeur de la propriété ciblée et utilise ces informations pour passer en douceur à la nouvelle valeur.

Exemple :

• Vous passez de opacity de 0 à 1 ? Il s'agit d'une interpolation numérique.
• Vous passez de background-color de white à black ? Fondu entre les couleurs source et cible.
• Vous passez à width ? Interpolez des unités numériques et convertissez des unités 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.

Interpolation de grid-template-columns et grid-template-rows

Grâce à nos contributeurs de Microsoft, Chrome, à partir de la version 107, est en mesure d'interpoler les valeurs grid-template-columns et grid-template-rows.

Les mises en page en grille peuvent passer d'un état à l'autre de manière fluide, au lieu de s'ancrer à la moitié d'une animation ou d'une transition.

Dans la démo située en dessous, une grille présente plusieurs avatars. Pour économiser de l'espace, les avatars sont superposés les uns sur les autres en limitant la largeur de chaque colonne à l'aide de grid-template-columns. Lorsque l'utilisateur pointe dessus, chaque colonne bénéficie de plus d'espace.

.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 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.

Fait partie de la série sur les nouvelles technologies interopérables