Picture CSS Transition issue - html

Question

I have a slide that transitions between four pics. I have the slide going at a certain pace, but the last slide does not transition back to the first slide quickly. I have tried to add another nth and I have tried to slow down the last nth, but it doesn't work. I want the whole slide to transition at a certain time but the last slide needs to go back to the first without the huge black delay I am getting. Here is the code:
.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;}
}
What am I doing wrong here?

Answer 1

If you have 4 images and you set
animation-delay: 12s;
for each one, the cicle time is 4 * 12 = 48s.
Instead, you have a cycle time of 56s
animation: picTransition 56s linear infinite;
That means a 8 seconds gap a the end