首頁 >web前端 >css教學 >如何使用多個 CSS 自訂屬性來實現流暢的動畫?

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

Susan Sarandon
Susan Sarandon原創
2024-12-04 07:19:14448瀏覽

How Can I Achieve Smooth Animations with Multiple CSS Custom Properties?

使用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中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn