在动画之间添加淡入淡出过渡

Question

我的问题是这样的：

.container {
  width: 200px;
  height: 170px;
  display: inline-block;
  position: relative;
}
.image {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  -webkit-background-size: cover!important;
  background-size: cover!important;
  background-repeat: no-repeat!important;
  animation: image 8s linear 1s infinite;
  animation-timing-function: steps(1);
}
@keyframes image {
  20% {
    background-position: 25% center;
  }
  40% {
    background-position: 50% center;
  }
  60% {
    background-position: 75% center;
  }
  80% {
    background-position: 100% center;
  }
}

<div class="container">
  <div class="image" style="background:url(http://i.imgur.com/GX23d5Y.jpg)"></div>
</div>

我有一张由 5 张拼接在一起的图片组成的长图片，我正在以类似的方式为其 background-position 设置动画。

目前正在发生过渡，但分步进行，因此每张图像都会“闪烁”。

我想知道是否有可能在 background-position 更改的同时进行某种淡入/淡出。我尝试插入

0% { opacity:1; }
20% { background-position: 25% center; opacity:0; }
21% { opacity:1; }

进入我的动画，但我无法获得良好的淡入/淡出效果。

任何关于如何做到这一点的建议（不插入多个图像，如here）都非常感谢。

Answer 1

假设我正确理解了您的问题，您需要两个动画，其中一个以线性方式淡入淡出图像，而另一个以逐步方式移动背景位置。

.image {
  background-image: url(http://i.imgur.com/GX23d5Y.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  animation: image 8s steps(1) 1s infinite, fadein 8s linear 1s infinite;
  opacity: 0;
}
@keyframes image {
  20% {background-position: 25% center;}
  40% {background-position: 50% center;}
  60% {background-position: 75% center;}
  80% {background-position: 100% center;}
}
@keyframes fadein {
  10%  {opacity: 1;}
  20%  {opacity: 0;}
  30%  {opacity: 1;}
  40%  {opacity: 0;}
  50%  {opacity: 1;}
  60%  {opacity: 0;}
  70%  {opacity: 1;}
  80%  {opacity: 0;}
  90%  {opacity: 1;}
  100% {opacity: 0;}
}

如您所见，image 动画完全符合您的预期（即移动 background-position）。第二个动画执行以下操作：

• 在 0% 和 10% 之间，opacity 以线性方式从 0 变为 1。这使得图像的第一部分看起来好像在加载时淡入淡出。
• 在 20%（与位置移动到第二张图像的同一时间），opacity 再次变为 0。这会暂时隐藏图像。
• 然后在 30% 不久之后，我们将 opacity 重新设置为 1，这会使图像的第二部分外观淡入。
• 图像的第 3、第 4 和第 5 部分也遵循类似的模式。也就是说，对于第一个 10%，图像会淡入，而对于下一个 10%，它会淡出。

• 最后在 100% 时，opacity 再次变为 0，因为我们希望图像的第一部分在下一个循环中淡入。

  .container {
    width: 200px;
    height: 170px;
    position: relative;
  }
  .image {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-image: url(http://i.imgur.com/GX23d5Y.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    animation: image 8s steps(1) 1s infinite, fadein 8s linear 1s infinite;
    opacity: 0;
  }
  @keyframes image {
    20% {background-position: 25% center;}
    40% {background-position: 50% center;}
    60% {background-position: 75% center;}
    80% {background-position: 100% center;}
  }
  @keyframes fadein {
    10%  {opacity: 1;}
    20%  {opacity: 0;}
    30%  {opacity: 1;}
    40%  {opacity: 0;}
    50%  {opacity: 1;}
    60%  {opacity: 0;}
    70%  {opacity: 1;}
    80%  {opacity: 0;}
    90%  {opacity: 1;}
    100% {opacity: 0;}
  }

  <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
  <div class="container">
    <div class="image"></div>
  
  </div>

• sn-p 中使用的关键帧分解导致图像部分连续淡入淡出（即，图像仅在很短的时间内停留在opacity: 1）。如果您需要休息一下，只需相应地修改框架即可。以下 sn-p 中有一个示例：

  .container {
    width: 200px;
    height: 170px;
    position: relative;
  }
  .image {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-image: url(http://i.imgur.com/GX23d5Y.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    animation: image 16s steps(1) 1s infinite, fadein 16s linear 1s infinite;
    opacity: 0;
  }
  @keyframes image {
    20% {background-position: 25% center;}
    40% {background-position: 50% center;}
    60% {background-position: 75% center;}
    80% {background-position: 100% center;}
  }
  @keyframes fadein {
    5%  {opacity: 1;}
    15%  {opacity: 1;}
    20%  {opacity: 0;}
    25%  {opacity: 1;}
    35%  {opacity: 1;}
    40%  {opacity: 0;}
    45%  {opacity: 1;}
    55%  {opacity: 1;}
    60%  {opacity: 0;}
    65%  {opacity: 1;}
    75%  {opacity: 1;}
    80%  {opacity: 0;}
    85%  {opacity: 1;}
    95%  {opacity: 1;}
    100% {opacity: 0;}
  }

  <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
  <div class="container">
    <div class="image"></div>
  
  </div>