Animowane układy siatki CSS

W siatce CSS właściwości grid-template-columnsgrid-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.

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? Przejdź od koloru źródłowego do docelowego.
  • Przechodzisz na width? Interpolacja numeryczna z konwersją jednostek w razie potrzeby.

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

Animowanie elementów grid-template-columnsgrid-template-rows

Układy siatki mogą też płynnie przechodzić między stanami, zamiast zatrzymywać się 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);
}

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.