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

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 动画。

目前正在发生过渡，但是是分步进行的，所以每张图片 'blinks'。

我想知道是否可以在 background-position 变化的同时进行某种淡入淡出 in/out。我尝试插入

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

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

如有任何关于如何操作的建议（无需像 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>

片段中使用的关键帧分解导致图像部分连续淡入和淡出（也就是说，图像只在 opacity: 1 停留很短的时间） .如果您需要休息一下，只需相应地修改框架即可。以下代码段中提供了示例：

.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>

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

Adding fade transition between animation

html

css

animation

css-animations