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.
I have created a jsfiddle: http://jsfiddle.net/2nf2fxc6/1/ where you can see what I mean.
Since the images are local, the only thing that appears is small icons (over what is supposed to be a background image). So in jsfiddle:
1st icon= 1st slide: ok
2nd icon = 2nd slide:ok
3rd icon that slowly fades in = 2nd slide that reappears
4th icon = 3rd slider:ok
Problem is with the 3rd icon that slowly fades in and appears almost at the same time as 4th (to itsleft). That 3rd icon is slide 2, which delays the start of the 1st slide and overlaps with the 3rd one.
Any help would be awesome as I'm going crazy already!
Thanks in advance
software companies in ghaziabad
I have chained two animations in a loop. After a lot of tweaking the images scroll in and out without overlapping. The problem is once the animations have finished there is a 3-4 second delay before they restart. I have not set any delays in my code so think there's a problem with the keyframes but when I play around with the values the images start to overlap.