html - 图像滑块-循环不起作用

我想使用此图像滑块：http://codepen.io/rslglover/pen/DBvoA

图像滑块工作正常，但是完成时会停止。我看不到CodePen代码有什么区别以及我做了什么。在CodePen链接中如何运作？

article{
position: absolute;
left: 450px;
background: #292929;
color: #e3e3e3;
width: 450px;
height: 450px;
text-align: center;
font: 2em/1em sans-serif;
border-box: box-sizing;
padding-top: 0px;
}

article:nth-of-type(1){
animation: slideIn 50s linear 0s infinite;
}
article:nth-of-type(2){
animation: slideIn 50s linear 5s infinite;
}
article:nth-of-type(3){
animation: slideIn 50s linear 10s infinite;
}
article:nth-of-type(4){
animation: slideIn 50s linear 15s infinite;
}
article:nth-of-type(5){
animation: slideIn 50s linear 20s infinite;
}
article:nth-of-type(6){
animation: slideIn 50s linear 25s infinite;
}
article:nth-of-type(7){
animation: slideIn 50s linear 30s infinite;
}
article:nth-of-type(8){
animation: slideIn 50s linear 35s infinite;
}
article:nth-of-type(9){
animation: slideIn 50s linear 40s infinite;
}
article:nth-of-type(10){
animation: slideIn 50s linear 45s infinite;
}

@keyframes slideIn{
0% {left: 450px;}
1% {left: 0;}
10% {left: 0;}
11% {left: -450px;}
100%{left: -450px;}
}

.galleryImg {
height: 450px;
width: 450px;
}

.gallery {
width: 450px;
height: 450px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -225px;
margin-top: -225px;
overflow: hidden;
background: rgba(0,0,0,0.3);
border: 1px solid #fff;
box-shadow:5px 5px 5px 5px rgba(0,0,0,0.7);
}

和我的HTML

<div class="galleryInfo">
    <div class="gallery">
<article><img class="galleryImg" src="images/aa2.png" alt=""></article>
<article> <img class="galleryImg" src="images/aa1.png" alt=""></article>
<article><img class="galleryImg" src="images/bb1.png" alt=""></article>
<article><img class="galleryImg" src="images/bb2.png" alt=""></article>
</div>
</div>

最佳答案

看一下这个：
HTML：

<div class="galleryInfo">
    <div class="gallery">
<section>
  <article><img src="https://image.freepik.com/free-icon/medical-samples-in-test-tubes-couple_318-61810.jpg" /></article>
  <article><img src="https://image.freepik.com/free-icon/medical-samples-in-test-tubes-couple_318-61810.jpg" /></article>
  <article><img src="https://image.freepik.com/free-icon/medical-samples-in-test-tubes-couple_318-61810.jpg" /></article>
  <article><img src="https://image.freepik.com/free-icon/medical-samples-in-test-tubes-couple_318-61810.jpg" /></article>
</section>
      </div>
</div>

CSS：

html{
  background: #aaa;
}

section{
  width: 200px;
  height: 200px;
  position: relative;
  left: 50%;
  top: 1em;
  margin-left: -100px;
  overflow: hidden;
  background: #292929;
  border: 10px solid #fff;
}

/*section:hover article{
  animation-play-state: paused;
}*/

article{
  position: absolute;
  left: 450px;
  background: #292929;
  color: #e3e3e3;
  width: 450px;
  height: 450px;
  text-align: center;
  font: 2em/1em sans-serif;
  border-box: box-sizing;
  padding-top: 0px;
}

.galleryImg {
height: 450px;
width: 450px;
}

.gallery {
width: 450px;
height: 450px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -225px;
margin-top: -225px;
overflow: hidden;
background: rgba(0,0,0,0.3);
border: 1px solid #fff;
box-shadow:5px 5px 5px 5px rgba(0,0,0,0.7);
}

article:nth-of-type(1){
  animation: slideIn 20s linear 0s infinite;
}
article:nth-of-type(2){
  animation: slideIn 20s linear 5s infinite;
}
article:nth-of-type(3){
  animation: slideIn 20s linear 10s infinite;
}
article:nth-of-type(4){
  animation: slideIn 20s linear 15s infinite;
}

@keyframes slideIn{
  0% {left: 200px;}
  1% {left: 0;}
  10% {left: 0;}
  11% {left: -200px;}
  100%{left: -200px;}
}

或在动画上方的css文件类galleryInfo和gallery中更改位置。