I am currently facing an issue with a slide that transitions between four pictures. The slide is set at a specific pace, but I am encountering a problem with the transition from the last slide back to the first one. I have attempted various solutions such as adding another nth and adjusting the timing on the last nth, but nothing seems to be resolving the delay I am experiencing. My intention is for the entire slide to transition smoothly within a certain time frame, including the seamless return of the last slide to the first without any noticeable black delay. Below is the code snippet in question:
.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;}
}
I am seeking advice on what could possibly be going wrong here.