圖片CSS轉換問題

Question

我有一張幻燈片，可以在四張圖片之間切換。我的幻燈片以某種速度進行，但最後一張幻燈片不會很快轉換回第一張幻燈片。我試圖添加另一個n，我試圖減慢最後一個，但它不起作用。我希望整個幻燈片在特定時間過渡，但最後一張幻燈片需要返回到第一張幻燈片，而不會出現黑色延遲。這裏是代碼：

.picTransition .item { 
    position: absolute; 
    left: 0; 
    right: 0; 
    opacity: 0; 
    -webkit-animation: picTransition 56s linear infinite; 
    -moz-animation: picTransition 56s linear infinite; 
    -ms-animation: picTransition 56s linear infinite; 
    animation: picTransition 56s linear infinite; 
} 
.picTransition .item:nth-child(2) { 
    -webkit-animation-delay: 12s; 
    -moz-animation-delay: 12s; 
    -ms-animation-delay: 12s; 
    animation-delay: 12s; 
} 
.picTransition .item:nth-child(3) { 
    -webkit-animation-delay: 24s; 
    -moz-animation-delay: 24s; 
    -ms-animation-delay: 24s; 
    animation-delay: 24s; 
} 
.picTransition .item:nth-child(4) { 
    -webkit-animation-delay: 36s; 
    -moz-animation-delay: 36s; 
    -ms-animation-delay: 36s; 
    animation-delay: 36s; 
} 

@-webkit-keyframes picTransition { 
    0%, 25%, 100% { opacity: 0; } 
    4.17%, 20.84% { opacity: 1;} 
} 
@-moz-keyframes picTransition { 
    0%, 25%, 100% { opacity: 0; } 
    4.17%, 20.84% { opacity: 1;} 
} 
@-ms-keyframes picTransition { 
    0%, 25%, 100% { opacity: 0; } 
    4.17%, 20.84% { opacity: 1;} 
} 
@keyframes picTransition { 
    0%, 25%, 100% { opacity: 0; } 
    4.17%, 20.84% { opacity: 1;} 
} 

我在做什麼錯在這裏？

Answer 1

如果有4個圖像並且設置

animation-delay: 12s; 

對於每一個，cicle時間爲4 * 12 = 48秒。

相反，你有56S

animation: picTransition 56s linear infinite; 

的週期時間這意味着A 8秒的差距一結束