如何使用單一動畫為 CSS 自訂屬性的多個實例設定動畫？

CSS 中的動畫自訂屬性

在CSS 中，自訂屬性（也稱為CSS 變數）提供了一種用於定義和重複使用樣式的強大機制整個專案的價值觀。它們提供了根據預定義值或變數動態變更樣式屬性的能力。然而，當涉及動畫時，自訂屬性有時會帶來挑戰。

當嘗試使用單一動畫為特定屬性的多個實例設定動畫時，就會出現這樣的挑戰。透過利用自訂屬性，開發人員的目標是讓所有後續實例都受到相同動畫的影響。然而，在某些情況下，只有一個實例經歷所需的動畫，而其餘實例不受影響。

了解動畫中的自訂屬性

問題源自於基本原理動畫中自訂屬性的行為。當使用傳統 CSS 語法定義時，自訂屬性在動畫過程中被視為靜態值。這意味著屬性值不會在動畫持續時間內進行插值，導致突然變化而不是逐漸過渡。

解決方案：使用 @property 規則

為了克服此限制，開發人員可以將 @property 規則與自訂屬性結合使用。 @property 規則允許透過指定變數的類型並提供初始值來定義變數。例如，透過將自訂屬性聲明為數字，瀏覽器可以將該屬性解釋為數值並啟用平滑的過渡和動畫。

範例實作：

考慮以下範例，我們的目標是使用自訂屬性建立閃爍的 div元素opacity:

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

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

#test {
  width: 100px;
  height: 200px;
  background-color: black;
  animation: fadeIn 1s infinite;
}

#test div {
  width: 20px;
  height: 20px;
  margin: auto;
  background-color: white;
  opacity: var(--opacity);
}

使用這種方法，自訂屬性--opacity被定義為一個數字，允許動畫在動畫持續時間內平滑地插入不透明度值，實現所需的閃爍效果。

以上是如何使用單一動畫為 CSS 自訂屬性的多個實例設定動畫？的詳細內容。更多資訊請關注PHP中文網其他相關文章！