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
Wertinterpolation in CSS
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
von0
auf1
umstellen? Das ist eine numerische Interpolation.background-color
vonwhite
aufblack
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.