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 i rozmiarów ścieżek odpowiednio kolumn i wierszy siatki. Obsługa interpolacji tych właściwości umożliwia płynne przechodzenie układów siatki między stanami, zamiast przyciągania w połowie animacji lub przejścia.

Browser Support

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

Interpolacja wartości w kodzie CSS

W CSS możesz płynnie przechodzić między wartościami właściwości, używając właściwości transition.

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

#target:hover {
  opacity: 1;
}

Mechanizm renderowania automatycznie wykryje typ wartości właściwości docelowej i użyje tych informacji, aby płynnie przejść do nowej wartości.

Na przykład:

  • Przenosisz opacity z 0 do 1? To jest interpolacja liczbowa.
  • Przenosisz background-color z white do black? Zanikanie między kolorem źródłowym a docelowym.
  • Przechodzisz na width? Interpoluj liczbowo, w razie potrzeby przeliczając jednostki.

To samo dotyczy animacji CSS, w których przeglądarka interpoluje wartości między klatkami kluczowymi.

Animuj grid-template-columns i grid-template-rows

Układy siatki mogą też płynnie przechodzić między stanami, zamiast przeskakiwać w połowie animacji lub przejścia.

W poniższej prezentacji siatka pokazuje kilka awatarów. Aby zaoszczędzić miejsce, awatary są ułożone jeden na drugim, co ogranicza szerokość każdej kolumny za pomocą grid-template-columns. Po najechaniu kursorem każda kolumna ma więcej miejsca.

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

Dzięki właściwości transition siatka płynnie interpoluje wartości.

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