如何讓CSS動畫永遠運行？

如何在 CSS 中永遠為圖片製作動畫

在本文中，我們將解決圍繞 CSS3 動畫的一個常見問題：讓它們無限期地運行。

挑戰

假設您有一系列照片想要顯示為幻燈片，使用 CSS3 動畫在它們之間平滑過渡。但是，您對預設行為不滿意，即最後一張照片淡出並重新加載頁面，從而有效地重新啟動幻燈片。

解決方案

要實現無縫循環動畫，我們需要修改 CSS 以指定動畫應連續迭代。預設情況下，CSS 動畫設定為僅運行一次。

我們將加入 CSS 的關鍵屬性是 animation-iteration-count。以下是一個範例：

@keyframes fadeinphoto {
  0% { opacity: 0; }
  50% { opacity: 1; }
  100% { opacity: 0; }
}

@-moz-keyframes fadeinphoto {
  0% { opacity: 0; }
  50% { opacity: 1; }
  100% { opacity: 0; }
}

@-webkit-keyframes fadeinphoto {
  0% { opacity: 0; }
  50% { opacity: 1; }
  100% { opacity: 0; }
}

@-o-keyframes fadeinphoto {
  0% { opacity: 0; }
  50% { opacity: 1; }
  100% { opacity: 0; }
}

.photo1 {
  opacity: 0;
  animation: fadeinphoto 7s 1;
  animation-iteration-count: infinite;
  -moz-animation: fadeinphoto 7s 1;
  -webkit-animation: fadeinphoto 7s 1;
  -o-animation: fadeinphoto 7s 1;
}

透過將animation-iteration-count 設定為無限，動畫將繼續無限循環，在照片之間創造無縫過渡.

以上是如何讓CSS動畫永遠運行？的詳細內容。更多資訊請關注PHP中文網其他相關文章！