如何在 CSS 動畫迭代之間添加一致的延遲？

CSS動畫延遲：延長迭代之間的暫停

實現迭代之間具有一致延遲的重複動畫，而不是僅適用於第一次迭代，請考慮以下方法：

1.調整動畫持續時間：

一種解決方法是將所需的延遲合併到動畫持續時間中。這涉及計算動畫應該花費的實際持續時間（包括延遲），然後相應地設定animation-duration屬性。例如：

在此範例中，動畫的真實持續時間為 5 秒，並有 1 秒的延遲。

2.對延遲和效果使用單獨的動畫：

另一種方法是為延遲和實際效果創建單獨的動畫。此方法提供了更大的靈活性，可以獨立於動畫本身來控制延遲。實現此目的的方法如下：

在這種情況下，「延遲」動畫將在 4 秒內逐漸將不透明度從 0 增加到 1，從而創建淡入效果。然後，「閃耀」動畫將無限期地運行，創建預期的掃描漸變。

3.使用供應商前綴：

在某些情況下，您可能會遇到「animation-delay」屬性的瀏覽器相容性問題。為了確保相容性，建議在標準屬性中包含供應商前綴，例如“-webkit-”或“-moz-”。例如：

附加說明：

使用「@-webkit-keyframes」的答案中提供的程式碼適用於舊版的 WebKit。通常不建議在現代開發中依賴供應商前綴，除非出於相容性需求。

以上是如何在 CSS 動畫迭代之間添加一致的延遲？的詳細內容。更多資訊請關注PHP中文網其他相關文章！