如何讓 CSS3 動畫無限循環？

無限循環 CSS3 動畫

CSS3 動畫提供了一種在網頁上對元素進行動畫處理的便捷方法。但是，預設情況下，這些動畫僅播放一次。要讓動畫持續循環，我們需要使用特定的 CSS 屬性。

挑戰

您希望讓一系列影像連續淡入和淡出，而無需重新載入頁面。

解

CSS3動畫實現無限循環的關鍵在於animation-iteration-count屬性。此屬性指定動畫在停止之前重複的次數。透過將此屬性設為無限，我們可以告訴瀏覽器無限期地運行動畫。

在您提供的程式碼中，您已經使用 CSS 類別定義了多個圖像容器。若要啟用連續循環，請將以下行新增至每個影像的CSS 規則：

animation-iteration-count: infinite;

這是新增屬性的更新後的CSS：

.photo1 {
  opacity: 0;
  animation: fadeinphoto 7s 1 infinite;
  ...
}

.photo2 {
  opacity: 0;
  animation: fadeinphoto 7s 5s infinite;
  ...
}

...

透過設定動畫迭代-將每個圖像計數為無限，您就可以確保淡入動畫將無限重複，在圖像之間無縫過渡而不會出現任何中斷。這將產生連續循環動畫的錯覺。

以上是如何讓 CSS3 動畫無限循環？的詳細內容。更多資訊請關注PHP中文網其他相關文章！