CSS keyframes overlap despite animation timing

Being relatively new to coding, I have created an animated banner in HTML and CSS, and got everything to work properly. (I'm building this on a local system, so images are not uploaded to server but are on my computer).

The animation is one image come up first for a few seconds then quickly fades out, then second image comes in and fades out, the 3rd comes in and fades out, and all of this loos indefinitely.

The problem I have is that the second "slide" reappears at the same time as the 3rd, lasts longer, therefore delaying the beginning of the loop with the first slide.

Syndicate content