CSS動畫延遲：延長迭代之間的暫停
實現迭代之間具有一致延遲的重複動畫，而不是僅適用於第一次迭代，請考慮以下方法：
1.調整動畫持續時間：
一種解決方法是將所需的延遲合併到動畫持續時間中。這涉及計算動畫應該花費的實際持續時間（包括延遲），然後相應地設定animation-duration屬性。例如：
在此範例中，動畫的真實持續時間為 5 秒，並有 1 秒的延遲。
2.對延遲和效果使用單獨的動畫：
另一種方法是為延遲和實際效果創建單獨的動畫。此方法提供了更大的靈活性，可以獨立於動畫本身來控制延遲。實現此目的的方法如下：
在這種情況下，「延遲」動畫將在 4 秒內逐漸將不透明度從 0 增加到 1，從而創建淡入效果。然後，「閃耀」動畫將無限期地運行，創建預期的掃描漸變。
3.使用供應商前綴：
在某些情況下，您可能會遇到「animation-delay」屬性的瀏覽器相容性問題。為了確保相容性，建議在標準屬性中包含供應商前綴，例如“-webkit-”或“-moz-”。例如：
附加說明：
使用「@-webkit-keyframes」的答案中提供的程式碼適用於舊版的 WebKit。通常不建議在現代開發中依賴供應商前綴，除非出於相容性需求。
以上是如何在 CSS 動畫迭代之間添加一致的延遲？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
