CSS background-image animation flicker

Question

I wrote this @keyframes animation to change the background after a few seconds.

@keyframes banner{
0% {background-image: url(../img/1.jpg);}
18% {background-image: url(../img/2.jpg);}
36% {background-image: url(../img/3.jpg);}
54% {background-image: url(../img/4.jpg);}
72% {background-image: url(../img/5.jpg);}
100% {background-image: url(../img/6.jpg);}}

I then added it to my Body.

background-image: url(../img/1.jpg);
animation-name: banner;
animation-duration: 20s;
animation-iteration-count: infinite;
animation-direction: alternate;
perspective: 1000;
background-attachment: fixed;

The issue is that whenever an image switches to another, even though there is a fade effect, there's still a split second flicker which seems to go away after the first run of the animation.

Answer 1

If size doesn't matter for you. You should try Data URI

https://css-tricks.com/data-uris/

@keyframes banner{
0% {background-image:  url(data:image/png;base64,iVB......gg==);}
18% {background-image:  url(data:image/png;base64,iVB......gg==);}
36% {background-image:  url(data:image/png;base64,iVB......gg==);}
54% {background-image:  url(data:image/png;base64,iVB......gg==);}
72% {background-image:  url(data:image/png;base64,iVB......gg==);}
100% {background-image:  url(data:image/png;base64,iVB......gg==);}}

Image is loaded immediately with CSS

Answer 2

The animation flickers the first time, because each background image has to be requested separately over the network. Depending on how large each of your background images is, it might be best to combine them into one like a sprite image, then animate the position change. Here is an example:

@keyframes banner{
0% { background-position: 0% 0%}
18% {background-position: 0% -100%}
36% {background-position: 0% -200%}
54% {background-position: 0% -300%}
72% {background-position: 0% -400%}
100% {background-position: 0% -500%}}

background-image: url(../img/123456-combined.jpg);
animation-name: banner;
animation-duration: 20s; 
animation-iteration-count: infinite;
animation-direction: alternate;
perspective: 1000;
background-attachment: fixed;

The values I put for the "x" and "y" are merely to show you how to position the image. However, depending on how you create the sprite you would need to change them to whatever position shows the image at the specified duration.

If this isn't what you're looking for you can always try setting a series DIVs to be each background image. Have each DIV overlay on top of the previous one using z-index. Then you can animate the alpha of each to reveal the one beneath. Since each DIV has to float in front of the prior you would have to use "position: fixed" so I can't say that this is the best option for mobile. Mobile browsers tend to throw up over fixed elements.