css - 纯 CSS slider 动画

Question

我需要一些帮助我想制作一个幻灯片，您可以在其中添加任意数量的图片。但问题是我的 slider 动画不能处理超过三张图片而不会看起来很糟糕。

这是我的代码 http://codepen.io/anon/pen/emxoXj

.slides {
  width: 600px;
  height: 300px;
  margin: 0px auto;
  overflow: hidden;
  border-radius: 10px;
}
.slidesContainer {
  width: 2400px;
  -webkit-animation: slide 8s ease infinite;
}
.slides .slide {
  width: 600px;
  height: 300px;
  float: left;
}
.slides div:nth-of-type(1) {
  background: #ff8330;
}
.slides div:nth-of-type(2) {
  background: #30ff83;
}
.slides div:nth-of-type(3) {
  background: #3083ff;
}
.slides div:nth-of-type(4) {
  background: #3083ff;
}
@-webkit-keyframes slide {
  15% {
    margin-left: 0px;
  }
  30% {
    margin-left: 0px;
  }
  45% {
    margin-left: -600px;
  }
  60% {
    margin-left: -600px;
  }
  75% {
    margin-left: -1200px;
  }
  90% {
    margin-left: -1200px;
  }
  105% {
    margin-left: -1800px;
  }
  120% {
    margin-left: -1800px;
  }
  135% {
    margin-left: 0px;
  }
}

<div class="slides">
  <div class="slidesContainer">
    <div class="slide"></div>
    <div class="slide"></div>
    <div class="slide"></div>
  </div>
</div>

这就是问题所在，但我不知道适合我的其他解决方案。

@-webkit-keyframes slide {
  15% {margin-left: 0px;}
  30% {margin-left: 0px;}
  45% {margin-left: -600px;}
  60% {margin-left: -600px;}
  75% {margin-left: -1200px;}
  90% {margin-left: -1200px;}
  105% {margin-left: -1800px;}
  120% {margin-left: -1800px;}
  135% {margin-left: 0px;}
}

Answer 1

试试这个，你可以添加任意数量的幻灯片，只需在此处为每张图片添加延迟，例如:

---

如果你有 5 张图片 css 将会(5x4=20s 延迟)

img:nth-child(5){-webkit-animation-delay:20s;}

---

如果你有 6 张图片 css 将是(6x4=24s 延迟)

img:nth-child(6){-webkit-animation-delay:24s;}

---

body{background:#eee;}

.slider{
  margin:10px auto;
  width:500px;
  height:320px;
  overflow:hidden;
  position:relative;

}
.photo{
  position:absolute;
  -webkit-animation:round 16s infinite;
  opacity:0;
  width:100%;
  
}
@-webkit-keyframes round{   
  25%{opacity:1;}
  40%{opacity:0;}
} 

img:nth-child(4){-webkit-animation-delay:0s;}
img:nth-child(3){-webkit-animation-delay:4s;}
img:nth-child(2){-webkit-animation-delay:8s;}
img:nth-child(1){-webkit-animation-delay:12s;}

<div class="slider">
  <img class='photo'  src="http://farm9.staticflickr.com/8241/8562523343_9bb49b7b7b.jpg" alt="" />
  <img class='photo'  src="http://farm9.staticflickr.com/8320/8035372009_7075c719d9.jpg" alt="" />
  <img class='photo'  src="http://farm9.staticflickr.com/8465/8113424031_72048dd887.jpg" alt="" />
  <img class='photo'  src="http://farm9.staticflickr.com/8517/8562729616_35b1384aa1.jpg" alt="" />
</div>