Picture CSS Transition issue

Question

У меня есть слайд, который переходит между четырьмя фотографиями. У меня слайд идет в определенном темпе, но последний слайд не переходит к первому слайду быстро. Я попытался добавить еще один nth, и я попытался замедлить последний nth, но это не сработает. Я хочу, чтобы весь слайд перешел в определенное время, но последний слайд должен вернуться к первому без огромной черной задержки, которую я получаю. Вот код:

.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 = 48s.

Вместо этого, у вас есть время цикла 56s

animation: picTransition 56s linear infinite; 

Это означает, что зазор 8 секунд в конце