如何使用多個 CSS 自訂屬性來實現流暢的動畫？

使用CSS 自訂屬性實現平滑動畫

當嘗試使用自訂CSS 屬性同時為多個元素設定動畫時，使用者經常會遇到屬性突然更改而不是平滑過渡的問題。本文深入探討了實現所需動畫效果的解決方案。

與其依賴變數（不會在動畫中插入值），更有效的方法是利用使用 @property 定義的 CSS 屬性。此方法允許明確聲明屬性類型，使瀏覽器能夠準確地將 --opacity 等屬性解釋為數字並為其設定動畫。

範例實作

示範對於這種技術，請考慮以下程式碼：

@property --opacity {
  syntax: '<number>'; /* Declaring type as 'number' for transition */
  initial-value: 0;
  inherits: false;
}

@keyframes fadeIn {
  50% { --opacity: 1 }
}

html {
  animation: 2s fadeIn infinite;
  background: rgba(0 0 0 / var(--opacity));
}

在此範例中，--opacity 自定義屬性被定義為@property 類型為「數字」。這允許瀏覽器將 --opacity 識別為數值並在動畫期間平滑地對其進行插值。然後，fadeIn 關鍵影格動畫在 50% 標記處逐漸將 --opacity 從 0 增加到 1，為 html 元素的背景顏色帶來平滑的淡入效果。

以上是如何使用多個 CSS 自訂屬性來實現流暢的動畫？的詳細內容。更多資訊請關注PHP中文網其他相關文章！