CODEWITHSUNDEEP
csscss-animations
ThomasStringer
ThomasStringer

Reputation: 121

CSS background-image animation flicker

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.

Upvotes: 3

Views: 7179

Answers (5)

Kostas Xafis
Kostas Xafis

Reputation: 104

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.

Upvotes: 1

user2477732
user2477732

Reputation: 11

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;

Upvotes: 1

Sungwoo
Sungwoo

Reputation: 31

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

Upvotes: 3

Xvarea
Xvarea

Reputation: 11

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.

Upvotes: 1

Dondrey Taylor
Dondrey Taylor

Reputation: 290

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.

Upvotes: 1

Related Questions