如何在 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 設為 無限，動畫將繼續無限循環，在照片之間創建無縫過渡。