Looping background images flash between image on first run

Question

I had an animation to loop through several background images...

@keyframes loop-background { 
    0% { background-image: url('1.jpg'); } 
    17% { background-image: url('2.jpg'); } 
    34% { background-image: url('3.jpg'); } 
    51% { background-image: url('4.jpg'); } 
    68% { background-image: url('5.jpg'); } 
    85% { background-image: url('6.jpg'); } 
    100% { background-image: url('7.jpg'); } 
}

On the first run through, there would be a brief flash between each image while they loaded. Then the flash would disappear. Why?

I've tried several fixes involving applying needless transforms to the element hosting the animation, including:

• position: static;
• will-change: background-image;
• -webkit-backface-visibility: hidden;
• -webkit-transform-style: preserve-3d;
• position: fixed; -webkit-transform: translate3d(0, 0, 0); together

So far, nothing's worked.

Answer 1

Of course! Because the images were taking a little time to load.

I added a hidden div in front of my main one that had each of the images set as a background as well.

<div id="dummy" hidden></div>
<style>
#dummy {
    display: none; 
    background-image: url("1.jpg";), url("2.jpg";), url("3.jpg";), url("4.jpg";), url("5.jpg";), url("6.jpg";);">
}
</style>

Answer 2

Late answer, but putting the first image as last seems to work nice !

0% { background-image: url('1.jpg'); }