如何有效率地為多個子元素建立交錯的 CSS 動畫？

子元素具有交錯延遲的CSS 動畫

您的目標是創建一個級聯效果，其中元素中的每個子元素都具有動畫效果延遲。為了實現這一目標，您需要手動為每個子項目單獨設定動畫延遲，如程式碼片段中所示。但是，您正在尋求更有效的解決方案，用於根據子元素的數量動態應用延遲。

使用Sass for 迴圈的CSS 解決方案為解決此問題提供了一種簡潔且可擴展的方法：

@for $i from 1 through 10 {
    .myClass img:nth-child(#{$i}n) {
        animation-delay: #{$i * 0.5}s;
    }
}

此循環從1 迭代到10（可調整以適應預期的子元素數量），並使用第n 個子元素選擇器為每個子元素分配計算出的延遲值。延遲是透過將子元素的索引 ($i) 乘以所需的延遲時間（本例中為 0.5 秒）來計算的。

透過使用此循環，您可以將級聯延遲應用於任意數量的子元素，而無需手動寫出個人風格。此解決方案無需為每個子元素明確指定樣式，並確保所有元素的一致性。

以上是如何有效率地為多個子元素建立交錯的 CSS 動畫？的詳細內容。更多資訊請關注PHP中文網其他相關文章！