如何在 CSS3 中創建連續循環動畫，其中第一個圖像隨著最後一個圖像淡出而無縫淡入？

在CSS3 中建立無縫循環動畫

問題：

您想要建立一個無限動畫序列，其中第一個動畫序列當最後一個圖像淡出時，圖像會淡入。

提供的程式碼：

提供的HTML 和CSS 程式碼建立了一系列依序淡入的五個影像，但到達最後一張圖片時，頁面將重新加載。

使用animation-iteration-count的解決方案：

要實現無限循環而不重新加載頁面，請添加以下屬性動畫規則：

animation-iteration-count: infinite;

此屬性指定動畫應重複的次數。透過將其設為無限，可以確保動畫無限期地運行。

更新了CSS：

/* Animation Keyframes*/
@keyframes fadeinphoto {
    0% { opacity: 0; }
    50% { opacity: 1; }
    100% { opacity: 0; }
}

@-moz-keyframes fadeinphoto {
    0% { opacity: 0; }
    50% { opacity: 1; }
    A100% { 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 infinite;
    -moz-animation: fadeinphoto 7s 1 infinite;
    -webkit-animation: fadeinphoto 7s 1 infinite;
    -o-animation: fadeinphoto 7s 1 infinite;
}

.photo2 {
    opacity: 0;
    animation: fadeinphoto 7s 5s infinite;
    -moz-animation: fadeinphoto 7s 5s infinite;
    -webkit-animation: fadeinphoto 7s 5s infinite;
    -o-animation: fadeinphoto 7s 5s infinite;
}

.photo3 {
    opacity: 0;
    animation: fadeinphoto 7s 10s infinite;
    -moz-animation: fadeinphoto 7s 10s infinite;
    -webkit-animation: fadeinphoto 7s 10s infinite;
    -o-animation: fadeinphoto 7s 10s infinite;
}

.photo4 {
    opacity: 0;
    animation: fadeinphoto 7s 15s infinite;
    -moz-animation: fadeinphoto 7s 15s infinite;
    -webkit-animation: fadeinphoto 7s 15s infinite;
    -o-animation: fadeinphoto 7s 15s infinite;
}

.photo5 {
    opacity: 0;
    animation: fadeinphoto 7s 20s infinite;
    -moz-animation: fadeinphoto 7s 20s infinite;
    -webkit-animation: fadeinphoto 7s 20s infinite;
    -o-animation: fadeinphoto 7s 20s infinite;
}

透過此修改，動畫序列現在將無限循環，確保從最後一張圖像到第一張圖像的無縫過渡。

以上是如何在 CSS3 中創建連續循環動畫，其中第一個圖像隨著最後一個圖像淡出而無縫淡入？的詳細內容。更多資訊請關注PHP中文網其他相關文章！