Html CSS幻灯片在第一次完整循环后中断

您好，我正在创建一个HTML和CSS幻灯片，其中包含四组图像，每个图像中有四张图片。它在第一个循环中工作得很好，但在那之后，图像开始消失，并以奇怪的时间重新出现。我创建了一个JSFIDLE来说明我的意思

.css幻灯片{
位置：相对位置；
宽度：100%；
高度：自动；
}
.css幻灯片图形{
保证金：0；
宽度：100%；
高度：自动；
位置：绝对位置；
}
.css幻灯片演示img{
-网络工具包盒阴影：0 0 2px#666；
盒影：02px#666；
}
.css幻灯片演示图{
位置：绝对位置；
顶部：5px；
颜色：#fff；
背景：rgba（0,0,0,3）；
字体大小：.8em；
填充：8px 12px；
过滤器：alpha（不透明度=0）；
不透明度：0；
-webkit转换：不透明度。5s；
转变：不透明度。5s；
}
.css幻灯片放映属性{
最大宽度：530像素；
文本对齐：右对齐；
字体大小：.7em；
字体：斜体；
}
.css幻灯片放映属性a{
颜色：#666；
}
.css幻灯片显示图：第n个子项（1）{
-webkit动画：xfade 42s 39s无限；
动画：xfade 42s 39s无限；
}
.css幻灯片图：第n个子项（2）{
-webkit动画：xfade 42s 27s无限；
动画：xfade 42s 27s无限；
}
.css幻灯片图：第n个子项（3）{
-webkit动画：xfade 42s 15s无限；
动画：xfade 42s 15s无限；
}
.css幻灯片图：第n个子项（4）{
-webkit动画：xfade 42s 3s无限；
动画：xfade 42s 3s无限；
}
.css-slideshow1{
位置：相对位置；
最大宽度：100%；
高度：自动；
}
.css-slideshow1图{
保证金：0；
宽度：100%；
高度：自动；
左边距：50%；
位置：绝对位置；
}
.css-slideshow1 img{
-网络工具包盒阴影：0 0 2px#666；
盒影：02px#666；
}
.css-slideshow1图{
位置：绝对位置；
顶部：5px；
颜色：#fff；
背景：rgba（0,0,0,3）；
字体大小：.8em；
填充：8px 12px；
过滤器：alpha（不透明度=0）；
不透明度：0；
-webkit转换：不透明度。5s；
转变：不透明度。5s；
}
.css-slideshow1-attr{
最大宽度：530像素；
文本对齐：右对齐；
字体大小：.7em；
字体：斜体；
}
.css-slideshow1-attr a{
颜色：#666；
}
.css-slideshow1图：第n个子项（1）{
-webkit动画：xfade 45s 42s无限；
动画：xfade 45s 42s无限；
}
.css-slideshow1图：第n个子项（2）{
-webkit动画：xfade 45s 30s无限；
动画：xfade 45s 30s无限；
}
.css-slideshow1图：第n个子项（3）{
-webkit动画：xfade 45s 18s无限；
动画：xfade 45s 18s无限；
}
.css-slideshow1图：第n个子项（4）{
-webkit动画：xfade 45s 6s无限；
动画：xfade 45s 6s无限；
}
.css-slideshow2{
位置：相对位置；
宽度：100%；
高度：自动；
}
.css-slideshow2图{
保证金：0；
宽度：100%；
利润率最高：50%；
高度：自动；
位置：绝对位置；
}
.css-slideshow2 img{
-网络工具包盒阴影：0 0 2px#666；
盒影：02px#666；
}
.css-slideshow2图{
位置：绝对位置；
顶部：5px；
颜色：#fff；
背景：rgba（0,0,0,3）；
字体大小：.8em；
填充：8px 12px；
过滤器：alpha（不透明度=0）；
不透明度：0；
-webkit转换：不透明度。5s；
转变：不透明度。5s；
}
.css-slideshow2-attr{
最大宽度：530像素；
文本对齐：右对齐；
字体大小：.7em；
字体：斜体；
}
.css-slideshow2-attr a{
颜色：#666；
}
.css-slideshow2图：第n个子项（1）{
-webkit动画：xfade 48s 45s无限；
动画：xfade 48s 45s无限；
}
.css-slideshow2图：第n个子项（2）{
-webkit动画：xfade 48s 33s无限；
动画：xfade 48s 33s无限；
}
.css-slideshow2图：第n个子项（3）{
-webkit动画：xfade 48s 21s无限；
动画：xfade 48s 21s无限；
}
.css-slideshow2图：第n个子项（4）{
-webkit动画：xfade 48s 9s无限；
动画：xfade 48s 9s无限；
}
.css-slideshow3{
位置：相对位置；
最大宽度：100%；
高度：自动；
}
.css-slideshow3图{
保证金：0；
宽度：100%；
左边距：50%；
利润率最高：50%；
高度：自动；
左边距：50%；
位置：绝对位置；
}
.css-slideshow3 img{
-网络工具包盒阴影：0 0 2px#666；
盒影：02px#666；
}
.css-slideshow3图{
位置：绝对位置；
顶部：5px；
颜色：#fff；
背景：rgba（0,0,0,3）；
字体大小：.8em；
填充：8px 12px；
过滤器：alpha（不透明度=0）；
不透明度：0；
-webkit转换：不透明度。5s；
转变：不透明度。5s；
}
.css-slideshow3-attr{
最大宽度：530像素；
文本对齐：右对齐；
字体大小：.7em；
字体：斜体；
}
.css-slideshow3-attr a{
颜色：#666；
}
.css-slideshow3图：第n个子项（1）{
-webkit动画：xfade 51s 48s无限；
动画：xfade 51s 48s无限；
}
.css-slideshow3图：第n个子项（2）{
-webkit动画：xfade 51s 36s无限；
动画：xfade 51s 36s无限；
}
.css-slideshow3图：第n个子项（3）{
-webkit动画：xfade 51s 24s无限；
动画：xfade 51s 24s无限；
}
.css-slideshow3图：第n个子项（4）{
-webkit动画：xfade 51s 12s无限；
动画：xfade 51s 12s无限；
}
@-webkit关键帧“xfade”{
0% {
过滤器：α（不透明度=100）；
不透明度：1；
}
14.67% {
过滤器：α（不透明度=100）；
不透明度：1；
}
16.67% {
过滤器：alpha（不透明度=0）；
不透明度：0；
}
98% {
过滤器：alpha（不透明度=0）；
不透明度：0；
}
100% {
过滤器：α（不透明度=100）；
不透明度：1；
}
}
.图像幻灯片{
垫面：3.5%；
左：5.5%；
}

---

有人可以详细说明我需要添加、删除或编辑什么，以使其正常工作。谢谢

您对与每个

图相关联的动画有奇怪的计时。与实际行为相比，您预计会发生什么？因此，基本上所有方块中的所有图像都从图像1开始，然后在3秒钟后，方框1中的图像2消失，然后在另外3秒钟后，方框2中的图像2消失……等等（每个方框共有4个图像）我想要的是在每个框的第4个图像之后，图像1出现在框1中，然后图像1出现在框2中…等等
<figure> 

<img src="assets/fourBackgrounds/goal.jpg" width="45%" height="auto" 
/> 


</figure> 

<figure> 

<img src="assets/fourBackgrounds/soldierCat.jpg" width="45%"   
height="auto" /> 


</figure> 

</div>



<div class="css-slideshow1"> 

<figure> 
<img src="assets/fourBackgrounds/Cyrus.jpg" width="45%" height="auto" 
/> 


</figure> 

<figure> 

<img src="assets/fourBackgrounds/fire.jpg" width="45%" height="auto" 
/> 


</figure> 

 <figure> 

<img src="assets/fourBackgrounds/goal.jpg" width="45%" height="auto" 
/> 


</figure> 

<figure> 

<img src="assets/fourBackgrounds/soldierCat.jpg" width="45%"  
height="auto" /> 


</figure> 


 </div>


<div class="css-slideshow2"> 

<figure> 
<img src="assets/fourBackgrounds/Cyrus.jpg" width="45%" height="auto"   
/> 


</figure> 

<figure> 

<img src="assets/fourBackgrounds/fire.jpg" width="45%" height="auto" 
/> 


</figure> 

<figure> 

<img src="assets/fourBackgrounds/goal.jpg" width="45%" height="auto" 
/> 


</figure> 

 <figure> 

<img src="assets/fourBackgrounds/soldierCat.jpg" width="45%"   
height="auto" /> 


</figure> 


</div>



<div class="css-slideshow3"> 

 <figure> 
 <img src="assets/fourBackgrounds/Cyrus.jpg" width="45%"  
 height="auto" /> 


</figure> 

<figure> 

<img src="assets/fourBackgrounds/fire.jpg" width="45%" height="auto" 
/> 


</figure> 

<figure> 

<img src="assets/fourBackgrounds/goal.jpg" width="45%" height="auto"  
/> 


</figure> 

<figure> 

<img src="assets/fourBackgrounds/soldierCat.jpg" width="45%" 
height="auto" /> 


</figure> 

</div>


 </div>

 .css-slideshow {
 position: relative;
 width: 100%;
 height: auto;

}
.css-slideshow figure {
margin: 0;
width: 100%;
height: auto;
position: absolute;
}
.css-slideshow img {
-webkit-box-shadow: 0 0 2px #666;
box-shadow: 0 0 2px #666;
}
.css-slideshow figcaption {
position: absolute;
top: 5px;
color: #fff;
background: rgba(0,0,0, .3);
font-size: .8em;
padding: 8px 12px;
filter: alpha(opacity=0);
opacity: 0;
-webkit-transition: opacity .5s;
transition: opacity .5s;
}

.css-slideshow-attr {
max-width: 530px;
text-align: right;
font-size: .7em;
font-style: italic;
}
.css-slideshow-attr a {
color: #666;
}

.css-slideshow figure:nth-child(1) {
-webkit-animation: xfade 42s 39s  infinite;
animation: xfade 42s 39s infinite;
}
.css-slideshow figure:nth-child(2) {
-webkit-animation: xfade 42s 27s infinite;
animation: xfade 42s 27s infinite;
}
.css-slideshow figure:nth-child(3) {
-webkit-animation: xfade 42s 15s infinite;
animation: xfade 42s 15s infinite;
}
.css-slideshow figure:nth-child(4) {
-webkit-animation: xfade 42s 3s infinite;
animation: xfade 42s 3s infinite;
 }



.css-slideshow1 {
position: relative;
max-width: 100%;
height: auto;

}
.css-slideshow1 figure {
margin: 0;
width: 100%;
height: auto;
margin-left: 50%;
position: absolute;
}
.css-slideshow1 img {
-webkit-box-shadow: 0 0 2px #666;
box-shadow: 0 0 2px #666;
}
.css-slideshow1 figcaption {
position: absolute;
top: 5px;
color: #fff;
 background: rgba(0,0,0, .3);
font-size: .8em;
padding: 8px 12px;
filter: alpha(opacity=0);
opacity: 0;
-webkit-transition: opacity .5s;
transition: opacity .5s;
}

.css-slideshow1-attr {
max-width: 530px;
text-align: right;
font-size: .7em;
font-style: italic;
}
.css-slideshow1-attr a {
color: #666;
}

.css-slideshow1 figure:nth-child(1) {
-webkit-animation: xfade 45s 42s  infinite;
animation: xfade 45s 42s infinite;
}
.css-slideshow1 figure:nth-child(2) {
-webkit-animation: xfade 45s 30s infinite;
animation: xfade 45s 30s infinite;
}
.css-slideshow1 figure:nth-child(3) {
-webkit-animation: xfade 45s 18s infinite;
animation: xfade 45s 18s infinite;
}
.css-slideshow1 figure:nth-child(4) {
-webkit-animation: xfade 45s 6s infinite;
animation: xfade 45s 6s infinite;
}




.css-slideshow2 {
position: relative;
width: 100%;
height: auto;

}
.css-slideshow2 figure {
margin: 0;
width: 100%;
margin-top: 50%;
height: auto;
position: absolute;
}
.css-slideshow2 img {
-webkit-box-shadow: 0 0 2px #666;
box-shadow: 0 0 2px #666;
}
.css-slideshow2 figcaption {
position: absolute;
top: 5px;
color: #fff;
background: rgba(0,0,0, .3);
font-size: .8em;
padding: 8px 12px;
filter: alpha(opacity=0);
opacity: 0;
-webkit-transition: opacity .5s;
transition: opacity .5s;
}

.css-slideshow2-attr {
max-width: 530px;
text-align: right;
font-size: .7em;
font-style: italic;
}
.css-slideshow2-attr a {
color: #666;
}

.css-slideshow2 figure:nth-child(1) {
-webkit-animation: xfade 48s 45s  infinite;
animation: xfade 48s 45s infinite;
}
.css-slideshow2 figure:nth-child(2) {
-webkit-animation: xfade 48s 33s infinite;
animation: xfade 48s 33s infinite;
}
.css-slideshow2 figure:nth-child(3) {
-webkit-animation: xfade 48s 21s infinite;
animation: xfade 48s 21s infinite;
}
.css-slideshow2 figure:nth-child(4) {
-webkit-animation: xfade 48s 9s infinite;
animation: xfade 48s 9s infinite;
}



.css-slideshow3 {
position: relative;
max-width: 100%;
height: auto;

}
.css-slideshow3 figure {
margin: 0;
width: 100%;
margin-left: 50%;
margin-top: 50%;
height: auto;
 margin-left: 50%;
position: absolute;
}
.css-slideshow3 img {
-webkit-box-shadow: 0 0 2px #666;
box-shadow: 0 0 2px #666;
}
.css-slideshow3 figcaption {
position: absolute;
top: 5px;
color: #fff;
background: rgba(0,0,0, .3);
font-size: .8em;
padding: 8px 12px;
filter: alpha(opacity=0);
opacity: 0;
-webkit-transition: opacity .5s;
transition: opacity .5s;
}

.css-slideshow3-attr {
max-width: 530px;
text-align: right;
font-size: .7em;
font-style: italic;
}
.css-slideshow3-attr a {
color: #666;
}

.css-slideshow3 figure:nth-child(1) {
-webkit-animation: xfade 51s 48s  infinite;
animation: xfade 51s 48s infinite;
}
.css-slideshow3 figure:nth-child(2) {
-webkit-animation: xfade 51s 36s infinite;
animation: xfade 51s 36s infinite;
}
.css-slideshow3 figure:nth-child(3) {
-webkit-animation: xfade 51s 24s infinite;
animation: xfade 51s 24s infinite;
}
.css-slideshow3 figure:nth-child(4) {
-webkit-animation: xfade 51s 12s infinite;
animation: xfade 51s 12s infinite;
}

@-webkit-keyframes "xfade" {
0% {
filter: alpha(opacity=100);
opacity: 1;
}
14.67% {
filter: alpha(opacity=100);
opacity: 1;
}
16.67% {
filter: alpha(opacity=0);
opacity: 0;
}
98% {
filter: alpha(opacity=0);
opacity: 0;
}
100% {
filter: alpha(opacity=100);
opacity: 1;
}
}


.image-slideshow{
padding-top: 3.5%;
padding-left: 5.5%;
}