在图像滑块动画中获得平滑过渡

Question

目的

在图像之间获得更平滑的过渡。 目前我在图像之间有几毫秒的白色背景。

问题

显然我无法正确复制这部分代码，因为我认为您不能在background-image: url(...) 中使用链接。 在我的实际代码中，我使用的是相对路径。

问题是第一次加载时图片过渡之间的白色背景并且没有保存在缓存中。 再次启动滑块时，过渡更平滑，即不显示白色背景。

概括

我想在图片首次加载并且未保存在缓存中时获得更平滑的过渡。 这怎么可能？ （也欢迎使用 jQuery）

 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>

更新

图像现在显示为<div class="slider"></div>之前丢失。 这是在下面的第一个答案中指出的。 但是，图像之间的白色背景仍然存在。

Answer 1

您的滑块和加载 div 没有显示，因为它们中没有任何内容可以开始，并且在 css 中没有指定默认高度。 我给滑块的高度为 30vh，宽度为 100%（为了演示目的，我使用了那个）。 我减少了 h1 周围的边距/填充（有很多！），以便您可以更好地在代码段中看到图像。 仍然可以更好地全屏观看。

我在 css 中添加了一个动画计时（渐进渐出），使动画的开始和结束速度变慢，使过渡看起来更容易一些。 默认是简单的，这使得它在中间很快； 通过更改过渡速度，您的动画可能会显得更流畅一些。

希望这可以帮助

 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>