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

Question

THE AIM

在图像之间获得更平滑的过渡。此刻，我的图像之间有一个白色背景，持续了几毫秒。

问题

显然，我无法正确复制代码的这一部分，因为我认为您不能在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>

UPDATE

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

Answer 1

您的滑块和load div没有显示，因为它们没有任何开头，并且在CSS中没有指定默认高度。我给滑块设置了30vh的高度和100％的宽度（出于演示目的，我选择了该滑块）。我减少了h1周围的边距/边距（有很多！），以便您可以在摘要中更好地看到图像。仍然可以更好地全屏观看。

我在css中添加了动画定时（渐入渐出），以使动画的开始和结束变慢，从而使过渡看起来更容易些。默认值是easy，它使中间速度快；通过更改过渡速度，您的动画可能会显得更平滑。

希望这会有所帮助

    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>