Animowane układy siatki CSS

Bramus

W siatce CSS właściwości grid-template-columns i grid-template-rows umożliwiają definiowanie nazw linii oraz śledzenie rozmiarów kolumn i wierszy siatki. Obsługa interpolacji tych właściwości umożliwia płynne przejścia między stanami w układach siatki zamiast ich łapania w połowie animacji lub przejścia.

Obsługa przeglądarek

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

Interpolacja wartości w CSS

W CSS możesz płynnie przechodzić od jednej wartości do drugiej za pomocą właściwości transition.

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

#target:hover {
  opacity: 1;
}

Silnik renderowania automatycznie wykryje typ wartości elementu docelowego i użyje tych informacji, aby płynnie przejść do nowej wartości.

Na przykład:

  • Czy opacity przechodzi z 0 na 1? To jest interpolacja numeryczna.
  • Czy background-color przechodzi z white na black? Zanikanie między kolorem źródłowym i docelowym.
  • Przenoszę width? Stosuj interpolację liczbową i w razie potrzeby przelicz jednostki.

To samo dotyczy animacji CSS, gdzie przeglądarka określa interpolację wartości między klatkami kluczowymi.

Animowanie elementów grid-template-columns i grid-template-rows

Układy siatki mogą też płynnie przechodzić między stanami – nie trzeba tego robić w połowie animacji lub przejścia.

W tym pokazie siatki widać kilka awatarów. Aby zaoszczędzić miejsce, awatary są układane jeden na drugim, a ich szerokość jest ograniczona za pomocą grid-template-columns. Po najechaniu kursorem na każdą kolumnę jest ona powiększana.

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

Gdy właściwość transition jest ustawiona, siatka płynnie interpoluje wartości.

Efekt dotyczy też animacji, które zmieniają wartości grid-template-columns lub grid-template-rows.