Obtaining a smooth transition in an image slider animation

Question

THE AIM

Obtain a smoother transition between images. At the moment I have a white background between images for a few milliseconds.

THE PROBLEM

Apparently I cannot properly replicate this part of my code as I don't think you can use links in background-image: url(...) . In my actual code, I'm using relative paths.

The problem is the white background between picture transition when they first load and are not save in the cache. When starting again the slider, the transition is smoother, ie the white background is not shown.

SUMMARY

I would like to obtain a smoother transition between pictures when they first load and are not save in the cache. How could this be done? (jQuery is also welcomed)

 h1 { display: flex; justify-content: center; margin: 20vh 0; background-color: lightblue; padding: 50px; } @keyframes slide { 0% { background-image: url("https://s.ftcdn.net/v2013/pics/all/curated/RKyaEDwp8J7JKeZWQPuOVWvkUjGQfpCx_cover_580.jpg?r=1a0fc22192d0c808b8bb2b9bcfbf4a45b1793687"); } 25% { background-image: url("https://s.ftcdn.net/v2013/pics/all/curated/RKyaEDwp8J7JKeZWQPuOVWvkUjGQfpCx_cover_580.jpg?r=1a0fc22192d0c808b8bb2b9bcfbf4a45b1793687"); } 25.01% { background-image: url("https://image.shutterstock.com/image-photo/micro-peacock-feather-hd-imagebest-260nw-1127238584.jpg"); } 50% { background-image: url("https://image.shutterstock.com/image-photo/micro-peacock-feather-hd-imagebest-260nw-1127238584.jpg"); } 50.1% { background-image: url("https://images.pexels.com/photos/326055/pexels-photo-326055.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"); } 75% { background-image: url("https://images.pexels.com/photos/326055/pexels-photo-326055.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"); } 75.1% { background-image: url("https://media3.s-nbcnews.com/j/newscms/2019_41/3047866/191010-japan-stalker-mc-1121_06b4c20bbf96a51dc8663f334404a899.fit-760w.JPG"); } 100% { background-image: url("https://media3.s-nbcnews.com/j/newscms/2019_41/3047866/191010-japan-stalker-mc-1121_06b4c20bbf96a51dc8663f334404a899.fit-760w.JPG"); } } .slider { background-image: url("https://s.ftcdn.net/v2013/pics/all/curated/RKyaEDwp8J7JKeZWQPuOVWvkUjGQfpCx_cover_580.jpg?r=1a0fc22192d0c808b8bb2b9bcfbf4a45b1793687"); background-size: cover; background-repeat: no-repeat; background-position: center; animation: slide 30s infinite; } .load { animation: slide 2s; }

 <div class="slider"></div> <div class="load"></div> <h1>SOME CONTENT</h1>

UPDATE

The images are now shown as <div class="slider"></div> was missing before. This was pointed out in the first answer below. However, the white background between images is still there.

Answer 1

Your slider and load divs didn't show because there was nothing in them to begin with and no default height specified in the css. I have given the slider a height of 30vh and a width of 100% (I went with that one for demo purposes). I reduced the margin/padding around the h1 (there's a lot!) just so you could see the images better in the snippet. Still might be viewed better full screen.

I added an animation timing (ease-in-out) to the css to make the start and end of the animation slower to make the transition seem a little easier on the eye. The default is ease which makes it fast in the middle; by changing the transition speed, your animation may appear a little smoother.

Hope this helps

 h1 { display: flex; justify-content: center; margin: 2vh 0; background-color: lightblue; padding: 15px; } @keyframes slide { 0% { background-image: url("https://s.ftcdn.net/v2013/pics/all/curated/RKyaEDwp8J7JKeZWQPuOVWvkUjGQfpCx_cover_580.jpg?r=1a0fc22192d0c808b8bb2b9bcfbf4a45b1793687"); } 25% { background-image: url("https://s.ftcdn.net/v2013/pics/all/curated/RKyaEDwp8J7JKeZWQPuOVWvkUjGQfpCx_cover_580.jpg?r=1a0fc22192d0c808b8bb2b9bcfbf4a45b1793687"); } 25.01% { background-image: url("https://image.shutterstock.com/image-photo/micro-peacock-feather-hd-imagebest-260nw-1127238584.jpg"); } 50% { background-image: url("https://image.shutterstock.com/image-photo/micro-peacock-feather-hd-imagebest-260nw-1127238584.jpg"); } 50.1% { background-image: url("https://images.pexels.com/photos/326055/pexels-photo-326055.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"); } 75% { background-image: url("https://images.pexels.com/photos/326055/pexels-photo-326055.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"); } 75.1% { background-image: url("https://media3.s-nbcnews.com/j/newscms/2019_41/3047866/191010-japan-stalker-mc-1121_06b4c20bbf96a51dc8663f334404a899.fit-760w.JPG"); } 100% { background-image: url("https://media3.s-nbcnews.com/j/newscms/2019_41/3047866/191010-japan-stalker-mc-1121_06b4c20bbf96a51dc8663f334404a899.fit-760w.JPG"); } } .slider { display:inline-block; background-image: url("https://s.ftcdn.net/v2013/pics/all/curated/RKyaEDwp8J7JKeZWQPuOVWvkUjGQfpCx_cover_580.jpg?r=1a0fc22192d0c808b8bb2b9bcfbf4a45b1793687"); background-size: cover; background-repeat: no-repeat; background-position: center; animation: slide 5s ease-in-out infinite; height:30vh; width:100%; } .load { animation: slide 5s infinite; }

 <h1>SOME CONTENT</h1> <div class="slider"></div>