問題：
使用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中文網其他相關文章！
