Animierte CSS-Rasterlayouts

Bramus

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 Interpolation dieser Eigenschaften können Rasterlayouts reibungslos zwischen den Zuständen wechseln, anstatt an der Hälfte einer Animation oder eines Übergangs andocken zu müssen.

Wertinterpolation in CSS

In CSS können Sie Eigenschaften mithilfe der Eigenschaft transition reibungslos von einem Wert zum anderen überführen.

#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? Blendet zwischen Quell- und Zielfarbe aus.
• 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 sind in einem Raster mehrere Avatare zu sehen. Um Platz zu sparen, werden die Avatare übereinander gelegt, indem die Breite der einzelnen Spalten mithilfe von grid-template-columns begrenzt wird. Wenn der Mauszeiger darauf bewegt wird, erhält jede Spalte mehr Platz.

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