CSS 動畫格狀版面配置

Bramus

在 CSS 格線中，grid-template-columns 和 grid-template-rows 屬性可分別用來定義線條名稱，以及追蹤格線欄和列的大小。支援這些屬性的插補功能，可讓格線版面配置在狀態之間順利轉換，而不會在動畫或轉場效果的中途點貼齊。

瀏覽器支援

• 107
• 107
• 66
• 16

CSS 中的值內插

在 CSS 中，您可以使用 transition 屬性，讓屬性從一個值平順轉換至另一個值。

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

#target:hover {
  opacity: 1;
}

轉譯引擎會自動偵測指定屬性值的類型，並使用該資訊順利轉換至新值。

例如：

• 將 opacity 從 0 轉換為 1？這是數值插補。
• 將 background-color 從 white 轉換為 black？在來源和目標顏色之間進行淡出效果。
• 轉換 width？以數值插補，並視需要轉換單位。

同樣適用於 CSS 動畫，瀏覽器會在主要畫面格之間進行值內插。

注意： 使用自訂資源時，請使用 @property 指示其類型。這樣瀏覽器就會知道如何從一個值轉換到另一個值。

為 grid-template-columns 和 grid-template-rows 設定動畫

格狀版面配置也可以在狀態之間順暢轉換，而不會在動畫或轉場效果的中途點貼齊。

在以下示範中，格線會顯示多個顯示圖片。為了節省空間，系統會使用 grid-template-columns 限制每個欄的寬度，將這些顯示圖片排列在彼此上方。當滑鼠游標懸停時，每個欄會獲得更多空間。

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

transition 屬性就會生效，並在格線中平滑地內插值。

這個效果也適用於變更 grid-template-columns 或 grid-template-rows 值的動畫。