為什麼我的 CSS 變數沒有動畫？

對CSS 自訂屬性/變數進行動畫處理

在使用CSS 變數對一系列內部div 進行動畫處理時，開發人員遇到了困難。儘管使用@keyframes來定義動畫，結果仍然是一個靜態的黑盒子。

解：使用@property

要解決這個問題，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));
}

在此範例中，@property 將 --opacity 定義為一個數字。在 fadeIn 動畫中，不透明度屬性在 50% 標記處逐漸增加到 1。隨後，html 元素的背景色依 --opacity 變數平滑過渡為半透明黑色。

以上是為什麼我的 CSS 變數沒有動畫？的詳細內容。更多資訊請關注PHP中文網其他相關文章！