為什麼 CSS `animation-delay` 有時只影響第一個動畫迭代？

了解 CSS 中的動畫延遲

animation-delay 屬性是一個重要的 CSS 屬性，用於控制動畫開始之前的延遲。但是，在某些情況下，它可能僅適用於動畫的初始迭代，而後續迭代不受影響。

例如，考慮以下程式碼：

@keyframes barshine {
  from {background-image:linear-gradient(120deg,rgba(255,255,255,0) -10%,rgba(255,255,255,0.25) -5%,rgba(255,255,255,0) 0%);}
  to {background-image:linear-gradient(120deg,rgba(255,255,255,0) 100%,rgba(255,255,255,0.25) 105%,rgba(255,255,255,0) 110%);}
}
.progbar {
  animation: barshine 1s 4s linear infinite;
}

在此範例中， 4 秒的動畫延遲僅適用於動畫的第一個循環。隨後，閃耀動畫無限期地繼續，沒有任何延遲。

替代方法

使用動畫延遲的替代方法是在動畫關鍵影格中引入中間步驟。例如：

@keyframes expbarshine {
  from {background-image:linear-gradient(120deg,rgba(255,255,255,0) -10%,rgba(255,255,255,0.25) -5%,rgba(255,255,255,0) 0%);}
  80% {background-image:linear-gradient(120deg,rgba(255,255,255,0) -10%,rgba(255,255,255,0.25) -5%,rgba(255,255,255,0) 0%);}
  to {background-image:linear-gradient(120deg,rgba(255,255,255,0) 100%,rgba(255,255,255,0.25) 105%,rgba(255,255,255,0) 110%);}
}
.progbar {
  animation: barshine 5s linear infinite;
}

此技術有效地延長了動畫持續時間以適應所需的延遲（在本例中為總持續時間的 80%）。但是，這種方法可能會改變動畫的外觀。

跨瀏覽器相容性

需要注意的是，動畫延遲的行為在不同的瀏覽器中可能會有所不同。 。某些瀏覽器可能會在所有迭代中一致地應用延遲，而其他瀏覽器可能會在每個後續循環中重置延遲。因此，通常需要採用特定於瀏覽器的解決方法。

以上是為什麼 CSS `animation-delay` 有時只影響第一個動畫迭代？的詳細內容。更多資訊請關注PHP中文網其他相關文章！