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.

score 3 · Answer 1 · edited Aug 23 '19 at 09:10

3

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

edited Aug 23 '19 at 09:10

Martin

2,575
6
32
53

answered Sep 06 '17 at 19:24

Sungwoo

31
4

you should add code example, before adding any link – Gautam Rai Sep 06 '17 at 19:48
1

This answer is a problem solution, you can convert image to data uri and add instead file path to the css: – Martin Aug 23 '19 at 08:35
This solution seems to work. An example how to convert an image url to base64 can be found [here](https://stackoverflow.com/a/43015238/9173778) – Dror Bar Sep 08 '20 at 16:47

Dondrey Taylor · Accepted Answer · 2017-01-19T00:20:40.797

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.

That sounds like it would work perfectly actually. Thanks for that. If it's an issue I might try out the overlaying DIV thing. I think I did actually attempt that before but the background images weren't showing because the DIVs were empty or something :/ — ThomasStringer, Jan 19 '17 at 17:13
in this case is not possible to use CSS fade effect between images. — Martin, Aug 23 '19 at 08:32

score 1 · Answer 3 · edited May 11 '17 at 10:44

First iteration is the problem, so why don't you simply run the same animation with:

animation-duration: 1s;
animation-iteration-count: 1;

on a different layer, of course hidden. Apparently layer must be same class as the one you're using and can't be display: none; so you should hide it with z-index attribute or width:0; height:0;. This way you get rid of the first run with noone watching.

score 1 · Answer 4 · answered Nov 04 '19 at 13:45

I had a similar problem and negative value for 'animation-delay' property fixed it. The animation will start as if it had already been playing for 3 seconds and only the first iteration with flicker is hidden.

In my case I had 3 background images.

animation-duration: 10s;
animation-delay: -3s;
animation-iteration-count: infinite;

score 1 · Answer 5 · answered Oct 22 '20 at 14:57

1

Also i found something really simple too that worked for me:

let images = [];
for (let i = 1; i <= 6; i++) {
    images.push(new Image());
}
for (let i = 1; i <= 6; i++) {
    images[i].src = `../img/${i}.png`;
}

The Image object creates an img tag that you can then set it's src to the image's file path. After that you can do what you did in the first place with no flickering at all, you can even delete the images array since the request that was needed is already done.

answered Oct 22 '20 at 14:57

Κωνσταντινος Χαφης

153
2
10

This is similar to how I do it (preloading). The only odd thing is that I also have to add "height:100%" to the animations I was swapping (mine are on demand, not on a timer) even though the Div was already full height. – Mark Brittingham Jun 07 '22 at 12:47

CSS background-image animation flicker

5 Answers5

Linked