如何對 CSS 自訂屬性進行動畫處理以依序顯示/隱藏多個元素？

動畫CSS 自訂屬性/變數

問題：

使用CSS 自訂屬性（變數）對多個定義元素進行動畫處理不是'沒有按預期工作。期望的結果是使用變數控制不透明度，使內部 div 按順序出現和消失。

解：

具有自訂類型的 CSS 屬性：

使用@property為變數引入自訂類型，讓瀏覽器能夠理解變數的資料類型並啟用漸變動畫：

@property --opacity {
  syntax: '<number>';
  initial-value: 0;
  inherits: false;
}

具有自訂屬性的動畫：

在動畫關鍵影格中使用自訂屬性：

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

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

在此範例中，html 元素的背景根據 --opacity 變數從完全透明動畫到部分不透明，這隨著時間的推移逐漸插值。

以上是如何對 CSS 自訂屬性進行動畫處理以依序顯示/隱藏多個元素？的詳細內容。更多資訊請關注PHP中文網其他相關文章！