Menu
Hello I wanted to make background images that will change for each other and I realized, that it is possible with CSS animation and keyframe, but after I code its first round of the photos flicks and after animation continues in the normal way (I think, that the problem is with WebGL which renders the content and images are not downloaded yet). Can you help me fix this code to prevent this?
.landing-page {
background-image: linear-gradient(
to bottom,
rgba(104, 104, 104, 0),
rgba(0, 0, 0, 0.739)
);
background-repeat: no-repeat;
background-size: cover;
min-height: 100vh;
width: 100vw;
background-position: center;
display: flex;
align-items: flex-end;
animation: change 120s infinite ease-in-out;
}
@keyframes change {
0% {
background-image: url(/photos/profile1.jpg);
}
20% {
background-image: url(/photos/profile3.jpg);
}
40% {
background-image: url(/photos/profile4.jpg);
}
60% {
background-image: url(/photos/profile5.jpg);
}
80% {
background-image: url(/photos/profile6.jpg);
}
100% {
background-image: url(/photos/profile2.jpg);
}
}
674
asked May 04 '26 21:05
You can preload the images using link type preload :
The preload value of the element's rel attribute lets you declare fetch requests in the HTML's , specifying resources that your page will need very soon, which you want to start loading early in the page lifecycle, before browsers' main rendering machinery kicks in. This ensures they are available earlier and are less likely to block the page's render, improving performance. ref
<head>
<link rel="preload" as="image" href="/photos/profile1.jpg">
...
<link rel="preload" as="image" href="/photos/profile6.jpg">
There is also link type prefetch.
Also, put first frame at the end,100%, for smooth transition between each iteration:
@keyframes change {
0% { background-image: url(/photos/profile1.jpg); }
...
100% { background-image: url(/photos/profile1.jpg); }
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
