Menu
The code makes it so the background image of the site transitions between 5 different images but everytime a animation is done and the next animation starts there's a white flash. How do I get rid of it or what have I done wrong? I'm not sure how to explain it in any other way.
@keyframes backswitch {
0% {
background-image: url("background.jpg");
}
20% {
background-image: url("background_2.jpg");
}
40% {
background-image: url("background_3.jpg");
}
60% {
background-image: url("background_4.jpg");
}
80% {
background-image: url("background_5.jpg");
}
100% {
background-image: url("background_6.jpg");
}
}
body {
/*Adjusting images and animation*/
background-repeat: no-repeat;
max-width: 100%;
max-height: 100%;
background-size: cover;
animation-name: backswitch;
animation-duration: 60s;
animation-iteration-count: infinite;
}<!DOCTYPE html>
<html>
<body>
</body>
</html>
718
So my solution was to place a <img> with display:none just before the <div> with the background image. This will load the image immediately and then it gets used immediately for the background-image.
You have to preload your images:
@keyframes backswitch {
0% {background-image: url("https://dummyimage.com/300/ccc/fff.png");}
20% {background-image: url("https://dummyimage.com/300/3f5/fff.png");}
40% {background-image: url("https://dummyimage.com/300/71c/fff.png");}
60% {background-image: url("https://dummyimage.com/300/228/fff.png");}
80% {background-image: url("https://dummyimage.com/300/c11/fff.png");}
100% {background-image: url("https://dummyimage.com/300/544/fff.png");}
}
body {
/*Adjusting images and animation*/
background-repeat: no-repeat;
max-width: 100%;
max-height: 100%;
background-size: cover;
animation-name: backswitch;
animation-duration: 60s;
animation-iteration-count: infinite;
}
div.preload-images {
background: url("https://dummyimage.com/300/ccc/fff.png") no-repeat -9999px -9999px;
background: url("https://dummyimage.com/300/ccc/fff.png") no-repeat -9999px -9999px,
url("https://dummyimage.com/300/3f5/fff.png") no-repeat -9999px -9999px,
url("https://dummyimage.com/300/71c/fff.png") no-repeat -9999px -9999px,
url("https://dummyimage.com/300/228/fff.png") no-repeat -9999px -9999px,
url("https://dummyimage.com/300/c11/fff.png") no-repeat -9999px -9999px,
url("https://dummyimage.com/300/544/fff.png") no-repeat -9999px -9999px;
}<body>
<div class="preload-images"></div>
</body>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
