Full screen image slider is repeating after taking time - html

Question

.slideshow {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 0;
list-style: none;
margin: 0;
padding: 0;
}
.slideshow li {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background-size: cover;
background-position: 50% 50%;
background-repeat: none;
opacity: 0;
z-index: 0;
animation: imageAnimation 60s linear infinite;
}
.slideshow li:nth-child(1) {
background-image: url("https://www.w3schools.com/howto/img_fjords.jpg")
}
.slideshow li:nth-child(2) {
background-image: url("https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/68dd54ca-60cf-4ef7-898b-26d7cbe48ec7/10-dithering-opt.jpg");
animation-delay: 10s;
}
.slideshow li:nth-child(3) {
background-image: url("https://cdn.pixabay.com/photo/2016/06/18/17/42/image-1465348_1280.jpg");
animation-delay: 20s;
}
.slideshow li:nth-child(4) {
background-image: url("http://eskipaper.com/images/image-2.jpg");
animation-delay: 30s;
}
#keyframes imageAnimation {
0% {
opacity: 0;
animation-timing-function: ease-in;
}
10% {
opacity: 1;
animation-timing-function: ease-out;
}
20% {
opacity: 1
}
30% {
opacity: 0
}
}
.no-cssanimations .slideshow li {
opacity: 1;
}
<ul class="slideshow">
<li>
<span>""</span>
</li>
<li>
<span>""</span>
</li>
<li>
<span>""</span>
</li>
<li>
<span>""</span>
</li>
</ul>
I have attached my CSS and HTML code. After 5.jpeg is displayed a blank page is displayed for sometime and then slider starts repeating again.I want to have a continuous repeating slides of images without break.There may be some error in my code.Since i am new to web desgining please help me out.
Thank you

Answer 1

.slideshow li{
animation: imageAnimation 40s linear infinite;
}
As you can see above, I changed 60s to 40s, that's what's causing temporary white background.
UPDATE:
As we can see the 2nd animation-delay starts after 10s, 3rd after 20s and 4th after 30s.
If the total time in animation is 60s, then for the 4th animation total duration for the transaction to occur is 30s i.e. from 30th second to 60th second.
This is the reason, you were getting the white screen after 4th image.
.slideshow {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 0;
list-style: none;
margin: 0;
padding: 0;
}
.slideshow li {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background-size: cover;
background-position: 50% 50%;
background-repeat: none;
opacity: 0;
z-index: 0;
animation: imageAnimation 40s linear infinite;
}
.slideshow li:nth-child(1) {
background-image: url("https://www.w3schools.com/howto/img_fjords.jpg")
}
.slideshow li:nth-child(2) {
background-image: url("https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/68dd54ca-60cf-4ef7-898b-26d7cbe48ec7/10-dithering-opt.jpg");
animation-delay: 10s;
}
.slideshow li:nth-child(3) {
background-image: url("https://cdn.pixabay.com/photo/2016/06/18/17/42/image-1465348_1280.jpg");
animation-delay: 20s;
}
.slideshow li:nth-child(4) {
background-image: url("http://eskipaper.com/images/image-2.jpg");
animation-delay: 30s;
}
#keyframes imageAnimation {
0% {
opacity: 0;
animation-timing-function: ease-in;
}
10% {
opacity: 1;
animation-timing-function: ease-out;
}
20% {
opacity: 1
}
30% {
opacity: 0
}
}
.no-cssanimations .slideshow li {
opacity: 1;
}
<ul class="slideshow">
<li>
<span>""</span>
</li>
<li>
<span>""</span>
</li>
<li>
<span>""</span>
</li>
<li>
<span>""</span>
</li>
</ul>