CSS Grid animieren (Anleitung + Beispiele)

Ich freue mich, darauf hinzuweisen, dass die CSS-Eigenschaften grid-template-rows und grid-template-columns jetzt in allen wichtigen Webbrowsern animierbar sind! Nun, CSS Grid unterstützt Animationen technisch schon lange, da es direkt in das CSS Grid Layout Module Level 1 Spec integriert ist.

Aber das Animieren dieser Grid-Eigenschaften wurde erst kürzlich von allen drei großen Browsern unterstützt. Schauen wir uns ein paar Beispiele an, um die Kreativität anzuregen?

Beispiel 1: Erweitern der Seitenleiste

Zunächst einmal, darum geht es uns

Ein einfaches Zwei-Spalten-Grid. Nun, früher hätten Sie dies möglicherweise *nicht* mit CSS Grid erstellt, da Animationen und Übergänge nicht unterstützt wurden, aber was wäre, wenn Sie möchten, dass sich die linke Spalte – vielleicht eine Seitenleisten-Navigation – beim Hover erweitert? Nun, das ist jetzt möglich.

Ich weiß, was Sie denken: „Eine CSS-Eigenschaft animieren? Kinderleicht, das mache ich schon seit Jahren!“ Ich auch. Allerdings stieß ich bei der Experimentierfreude mit einem bestimmten Anwendungsfall auf eine interessante Hürde.

Wir wollen also das Grid selbst animieren (insbesondere grid-template-columns, das in dem Beispiel der Klasse .grid zugewiesen ist). Aber die linke Spalte (.left) ist der Selektor, der die Pseudo-Klasse :hover erfordert. Während JavaScript dieses Dilemma leicht lösen kann – danke, aber nein danke – können wir es allein mit CSS erreichen.

Lassen Sie uns das Ganze durchgehen, beginnend mit dem HTML. Ziemlich Standardkram, wirklich… ein Grid mit zwei Spalten.

<div class="grid">
  <div class="left"></div>
  <div class="right"></div>
</div>

Wenn wir das kosmetische CSS beiseite lassen, müssen Sie zuerst display: grid auf den übergeordneten Container (.grid) setzen.

.grid {
  display: grid;
}

Als Nächstes können wir die beiden Spalten mit der Eigenschaft grid-template-columns definieren und dimensionieren. Wir machen die linke Spalte sehr schmal und vergrößern sie später beim Hover. Die rechte Spalte nimmt dank des Schlüsselworts auto den Rest des verbleibenden Platzes ein.

.grid {
  display: grid;
  grid-template-columns: 48px auto;
}

Wir wissen, dass wir das Ding animieren werden, also fügen wir gleich eine transition hinzu, damit der Wechsel zwischen den Zuständen sanft und spürbar ist.

.grid {
  display: grid;
  grid-template-columns: 48px auto;
  transition: 300ms; /* Change as needed */
}

Das war's für .grid! Alles, was übrig bleibt, ist die Hover-Zustandsanwendung. Insbesondere überschreiben wir die Eigenschaft grid-template-columns, damit die linke Spalte beim Hover mehr Platz einnimmt.

Das allein ist noch nicht allzu interessant, obwohl es großartig ist, dass Animationen und Übergänge jetzt in CSS Grid unterstützt werden. Interessanter ist, dass wir die relativ neue Pseudo-Klasse :has() verwenden können, um den übergeordneten Container (.grid) zu stylen, während das Kind (.left) gehovert wird.

.grid:has(.left:hover) {
  /* Hover styles */
}

Auf Deutsch gesagt bedeutet das: „Tue etwas mit dem .grid-Container, wenn er ein Element namens .left in sich enthält, das sich im Hover-Zustand befindet.“ Deshalb wird :has() oft als „Eltern“-Selektor bezeichnet. Wir können endlich ein Elternteil basierend auf den Kindern auswählen, die es enthält – kein JavaScript erforderlich!

Wir werden also die Breite der .left-Spalte auf 30% erhöhen, wenn sie gehovert wird. Die .right-Spalte nimmt weiterhin den gesamten verbleibenden Platz ein

.grid {
  display: grid;
  transition: 300ms;
  grid-template-columns: 48px auto;
}

.grid:has(.left:hover) {
  grid-template-columns: 30% auto;
}

Wir könnten auch CSS-Variablen verwenden, was je nach Ihren persönlichen Vorlieben sauberer aussehen mag oder auch nicht (oder Sie verwenden CSS-Variablen sowieso in Ihrem Projekt).

.grid {
  display: grid;
  transition: 300ms;
  grid-template-columns: var(--left, 48px) auto;
}

.grid:has(.left:hover) {
  --left: 30%;
}

Ich *liebe* es, dass CSS Grids jetzt animiert werden können, aber die Tatsache, dass wir dieses spezielle Beispiel mit nur neun Zeilen CSS erstellen können, ist noch erstaunlicher.

Hier ist ein weiteres Beispiel von Olivia Ng – ähnliches Konzept, aber mit Inhalten (klicken Sie auf das Navigationssymbol)

Beispiel 2: Erweitern von Panels

Dieses Beispiel animiert den Grid-Container (die Spaltenbreiten), aber auch die einzelnen Spalten (ihre Hintergrundfarben). Es ist ideal, um beim Hovern mehr Inhalte anzuzeigen.

Es ist erwähnenswert, dass die Funktion repeat() manchmal fehlerhafte Übergänge erzeugt, weshalb ich die Breite jeder Spalte einzeln eingestellt habe (d. h. grid-template-columns: 1fr 1fr 1fr).

Beispiel 3: Hinzufügen von Zeilen und Spalten

Dieses Beispiel fügt einer Grid-Struktur animiert eine Spalte hinzu. Allerdings – Sie ahnen es – hat dieses Szenario auch eine Fallstrick. Die Anforderung ist, dass die „neue“ Spalte nicht versteckt sein darf (d. h. auf display: none gesetzt sein), und CSS Grid muss ihre Existenz anerkennen, während seine Breite auf 0fr gesetzt wird.

Für eine Drei-Spalten-Grid – grid-template-columns: 1fr 1fr 0fr (ja, die Einheit muss deklariert werden, auch wenn der Wert 0 ist!) – wird korrekt in grid-template-columns: 1fr 1fr 1fr überführt, aber grid-template-columns: 1fr 1fr nicht. Rückblickend ergibt das durchaus Sinn, wenn man bedenkt, wie Übergänge funktionieren.

Hier ist ein weiteres Beispiel von Michelle Barker – dasselbe Konzept, aber mit einer zusätzlichen Spalte und *viel* mehr Pep. Stellen Sie sicher, dass Sie dieses im Vollbildmodus ausführen, da es tatsächlich responsiv ist (keine Tricks, nur gutes Design!).

Ein paar weitere Beispiele

Weil, warum nicht?

Dieser „Animated Mondrian“ ist der ursprüngliche Proof-of-Concept für animierte CSS-Grids von Chrome DevRel. Die grid-rows und grid-columns verwenden das span-Schlüsselwort, um das Layout zu erstellen, das Sie hier sehen, und dann werden die grid-template-rows und grid-template-columns mithilfe einer CSS-Animation animiert. Es ist lange nicht so komplex, wie es aussieht!

Dasselbe Konzept, aber mit mehr von diesem Michelle Barker-Pep. Könnte ein schöner Ladekreis werden?

Zum Abschluss mit einem Hauch von Nostalgie (zeigt mein Alter hier), das nicht sehr „griddy“ animierte CSS-Grid von Andrew Harvard. Wieder – dasselbe Konzept – es ist nur, dass man die anderen Grid-Elemente nicht sehen kann. Aber keine Sorge, sie sind da.