Question

我的问题看起来像这样：

＆＃13;

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

＆＃13;

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

＆＃13;

我有一个很长的图像，其中包括拼凑在一起的5个图像，并且我以类似的方式为其background-position制作动画。

目前正在进行转换，但步骤一致，因此每张图片都会闪烁。

我想知道是否可以随着background-position更改进行某种淡入/淡出。我试着插入

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

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

任何有关如何操作的建议（不插入多个图像，如here）表示赞赏。

Answer 1

假设我正确地理解了你的问题，你需要两个动画，其中一个图像在＆amp;以线性方式输出，而另一个以步进方式移动背景位置。

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

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

1 个答案: