Animierte CSS-Rasterlayouts

Mit den CSS-Grid-Eigenschaften grid-template-columns und grid-template-rows können Sie Liniennamen definieren und die Größe von Rasterspalten bzw. ‑zeilen steuern. Durch die Unterstützung der Interpolation für diese Eigenschaften können bei Rasterlayouts nahtlose Übergänge zwischen den Status erfolgen, anstatt dass sie sich bei der Hälfte einer Animation oder eines Übergangs verschieben.

Unterstützte Browser

  • Chrome: 107.
  • Edge: 107.
  • Firefox: 66.
  • Safari: 16.

In CSS können Sie mit der transition-Eigenschaft einen fließenden Übergang von einem Wert zum anderen vornehmen.

#target {
 
opacity: 0.5;
 
transition: opacity ease-in-out 0.25s;
}

#target:hover {
 
opacity: 1;
}

Die Rendering-Engine erkennt automatisch den Typ des Werts der Zieleigenschaft und verwendet diese Informationen für einen reibungslosen Übergang zum neuen Wert.

Beispiel:

  • opacity von 0 auf 1 umstellen? Das ist eine numerische Interpolation.
  • background-color von white auf black umstellen? Die Quell- und Zielfarben werden eingeblendet.
  • width wird umgestellt? Interpolieren Sie numerisch und konvertieren Sie bei Bedarf die Einheiten.

Dasselbe gilt für CSS-Animationen, bei denen der Browser die Wertinterpolation zwischen den Keyframes durchführt.

grid-template-columns und grid-template-rows animieren

Mit einem Rasterlayout können Sie auch nahtlos zwischen Zuständen wechseln, anstatt sich zur Hälfte einer Animation oder eines Übergangs zu verschieben.

In der folgenden Demo ist ein Raster mit mehreren Avataren zu sehen. Um Platz zu sparen, werden die Avatare übereinander angeordnet, indem die Breite jeder Spalte mit grid-template-columns begrenzt wird. Beim Bewegen des Mauszeigers wird jeder Spalte mehr Platz eingeräumt.

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

Mit der transition-Eigenschaft wird im Raster eine glatte Interpolation zwischen den Werten durchgeführt.

Der Effekt gilt auch für Animationen, bei denen die grid-template-columns- oder grid-template-rows-Werte geändert werden.