javascript - 在图像 slider 动画中获得平滑过渡

Question

目标

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

问题

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

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

总结

我希望在图片首次加载且未保存在缓存中时在图片之间获得更平滑的过渡。这怎么可能呢？ (也欢迎 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

您的 slider 和加载 div 没有显示，因为它们中没有任何内容可以开始，也没有在 css 中指定默认高度。我给 slider 设置了 30vh 的高度和 100% 的宽度(出于演示目的，我使用了那个 slider )。我减少了 h1 周围的边距/填充(有很多!)，这样您就可以在片段中更好地看到图像。仍然可以更好地查看全屏。

我在 css 中添加了一个动画计时(缓入缓出)，使动画的开始和结束速度变慢，从而使过渡看起来更容易一些。默认值是 ease ，这使得它在中间速度很快；通过更改过渡速度，您的动画可能会显得更流畅一些。

希望对你有帮助

    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>