为什么我的第一轮动画不能正常工作？

Question

我正在制作一个带有动画的网站，其中包含 5 张不同的图片，这些图片不断过渡到另一张。

这是我的代码：

<div class="carousel">
</div>


.carousel {
  margin-top: 40px;
  background-image: url(/images/jekyllrb.png);
  background-size: cover;
  display: flex;
  justify-self: center;
  width: 880px;
  height: 400px;
  margin: 40px 345px 0px 345px;
  animation-name: turning;
  animation-duration: 20s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  transition: all 2s;
}

@keyframes turning {
  2% {background-image: url(/images/bootstrap.png)}
  20% {background-image: url(/images/bootstrap.png)}
  22% {background-image: url(/images/corefx.png)}
  40% {background-image: url(/images/corefx.png)}
  42% {background-image: url(/images/facebookdesign.png)}
  60% {background-image: url(/images/facebookdesign.png)}
  62% {background-image: url(/images/yeoman.png)}
  80% {background-image: url(/images/yeoman.png)}
  82% {background-image: url(/images/jekyllrb.png)}
  100% {background-image: url(/images/jekyllrb.png)}
}

问题是：当我重新加载我的页面时，从一张图片到另一张图片没有平滑过渡，只有在整个动画循环一次之后，它才开始按应有的方式制作动画。为什么会发生这种情况，我该如何解决？

Answer 1

为了回复您的评论，这里是一个带有背景位置的示例：

.carousel {
  margin: 40px auto;
  width: 800px;
  height:450px;
  box-shadow:0 0 5px;
  background: url(https://picsum.photos/id/1002/800/450), url(https://picsum.photos/id/1003/800/450), url(https://picsum.photos/id/1004/800/450), url(https://picsum.photos/id/1005/800/450), url(https://picsum.photos/id/1006/800/450);
  background-repeat: no-repeat;
  background-position: 0 0, 800px 0, 800px 0, 800px 0, 800px 0;
  animation-name: turning;
  animation-duration: 20s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}


@keyframes turning {
  0% {
    background-position: 0 0, 800px 0, 800px 0, 800px 0, 800px 0;
  }
  20% {
    background-position: -800px 0, 0 0, 800px 0, 800px 0, 800px 0;
  }
  40% {
    background-position: 800px 800000px, -800px 0, 0 0, 800px 0, 800px 0;
  }
  60% {
    background-position: 800px 800000px, 800px 800000px, -800px 0, 0 0, 800px 0;
  }
  80% {
    background-position: 800px 0, 800px 800000px, 800px 800000px, -800px 0, 0 0;
  }
  100% {
    background-position: 0 0, 800px 0, 800px 0, 800px 80000px, -800px 0;
  }
}

<div class="carousel"></div>

---

淡化它们 （根据我的理解，轮播让事情四处奔波），你需要不透明度和不同的容器。 body + 2 pseudos 可以通过3张图像轻松设置淡入淡出效果。如果你使用多重背景和位置，你可以增加图像淡入淡出的数量。

基本示例灵感来自：https://codepen.io/gc-nomade/pen/vsrqi

html,
body {
  width: 100%;
  height: 100%;
  background-image: url("https://picsum.photos/id/1008/800/400");
  background-size: cover;
  animation: changeBackground 10s infinite;
  position: relative;
  z-index: 0; 
  margin:0;
}

body , #page{
  display: flex;
  align-items:center;
  justify-content:center;
  position: static;
}

body:before,
body:after {
  content: '';
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  position: absolute;
  z-index: 1;
  background-size: cover;
  animation: bgfade 10s infinite;
  animation-direction: alternate;
  opacity: 1;
}

#page {
  position: relative;
  z-index: 2000;
  width: 70%; 
  max-width: 1020px;
  min-height: 50%;
  margin: auto;
  background: rgba(0, 0, 0, 0.65);
  padding: 1em;
  border-radius: 1em;
  box-shadow: 0 0 5px white;
  color: white;
  font-size:calc(10px + 3vw);
}

body:before {
  background-image: url("https://picsum.photos/id/1011/800/400");
  animation-direction: alternate-reverse;
}

body:after {
  background-image: url("https://picsum.photos/id/1006/800/400");
}

@keyframes bgfade {
  0%,
  66% {
    opacity: 0;
    z-index: 100;
  }
  100% {
    opacity: 1;
    z-index: 0;
  }
}

a {
  color: gold;
}

<div id="page">
  run it full page mode too
</div>