如何順利為自訂 CSS 屬性設定動畫？

在CSS 中對自訂屬性進行動畫處理

為了同步對多個內部div 進行動畫處理，開發人員嘗試使用CSS變量，但遇到了問題。雖然 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));
}

中在本範例中，opacity 變數被明確定義為數字，fadeIn 動畫屬性使用CSS 變數來在HTML 元素的背景上實現所需的漸層效果不透明度。

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