Smoother background-images animations (prevent flickering) - html

Question

I have three background images that I want to animate between. I do this as outlined below.
However, I find that sometimes (when first loading the page), the images flicker. So instead of a smooth transition what happens is that image 1 flickers then smoothly fades out, then image 2 flickers and then smoothly transitions in.
How can I avoid this flickering? Is there a way to wait for the images to be fully loaded before to start the animation? Or is that not the problem?
.page-light {
background-repeat: no-repeat;
background-position: center top;
}
#media (max-width: 767.98px) {
.page-light {
background-image: url('/img/hero/front-introduction-mobile.png');
}
}
#media (min-width: 768.00px) {
.page-light {
background-image: url('/img/hero/front-introduction-1.png');
-webkit-animation: animation-home-background 9000ms infinite;
-moz-animation: animation-home-background 9000ms infinite;
-o-animation: animation-home-background 9000ms infinite;
animation: animation-home-background 9000ms infinite;
-webkit-animation-delay: 1s;
/* Chrome, Safari, Opera */
animation-delay: 3s;
}
}
#-webkit-keyframes animation-home-background {
0% {
background-image: url('/img/hero/front-introduction-1.png');
}
40% {
background-image: url('/img/hero/front-introduction-2.png');
}
80% {
background-image: url('/img/hero/front-introduction-3.png');
}
100% {
background-image: url('/img/hero/front-introduction-1.png');
}
}
#keyframes animation-home-background {
0% {
background-image: url('/img/hero/front-introduction-1.png');
}
33% {
background-image: url('/img/hero/front-introduction-2.png');
}
66% {
background-image: url('/img/hero/front-introduction-3.png');
}
100% {
background-image: url('/img/hero/front-introduction-1.png');
}
}

Answer 1

I found this to be extremely helpful, as pointed out by #vxpin in the comments.
https://stackoverflow.com/a/52358326/4262057
Basically you preload all the images as follows:
.stylename {
background-image:
url('http://www.BungalowSoftware.com/images/silver-background.jpg'),
url('http://www.BungalowSoftware.com/images/silver-background2.jpg');
}