Animierte CSS-Rasterlayouts

Im CSS-Raster können Sie mit den Eigenschaften grid-template-columns und grid-template-rows Liniennamen definieren und die Größe der Rasterspalten bzw. -zeilen verfolgen. Durch die Unterstützung der Interpolation für diese Eigenschaften können Rasterlayouts reibungslos zwischen Zuständen übergehen, anstatt an der Hälfte einer Animation oder eines Übergangs einzurasten.

Bramus

Unterstützte Browser

  • 107
  • 107
  • 66
  • 16

Wertinterpolation in CSS

In CSS können Sie Eigenschaften mit der Eigenschaft transition reibungslos von einem Wert zum anderen übertragen.

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

#target:hover {
  opacity: 1;
}

Das Rendering-Modul erkennt automatisch den Werttyp der Zieleigenschaft und verwendet diese Informationen für einen reibungslosen Übergang zum neuen Wert.

Beispiel:

  • Sie möchten opacity von 0 auf 1 umstellen? Das ist eine numerische Interpolation.
  • Sie möchten background-color von white auf black umstellen? Zwischen Quell- und Zielfarbe überblenden
  • width umstellen? Interpolieren Sie numerisch und wandeln Sie die Einheiten dabei bei Bedarf um.

Dasselbe gilt für CSS-Animationen, bei denen der Browser die Werte zwischen den Keyframes interpoliert.

grid-template-columns und grid-template-rows werden interpoliert

Dank der Mitwirkenden bei Microsoft ist es in Chrome ab Version 107 in der Lage, die Werte grid-template-columns und grid-template-rows zu interpolieren.

Rasterlayouts können reibungslos zwischen Zuständen übergehen, anstatt an der Hälfte einer Animation oder eines Übergangs einzurasten.

In der Demo unten sind mehrere Avatare in einem Raster zu sehen. Um Platz zu sparen, werden die Avatare übereinander angeordnet, indem die Breite der einzelnen Spalten mithilfe von grid-template-columns begrenzt wird. Wenn der Mauszeiger auf eine Spalte bewegt wird, erhält sie 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);
}

Wenn die Eigenschaft transition festgelegt ist, interpoliert das Raster gleichmäßig zwischen den Werten.

Der Effekt gilt auch für Animationen, die die Werte für grid-template-columns und grid-template-rows ändern.

Teil der Videoreihe „Neu interoperable“