第一次完整循环后，CSS幻灯片显示中断

Question

您好我正在创建一个HTML和CSS幻灯片，其中包含四组图像，每组图像包含四张图片。它在第一个循环中完美运行，但之后图像开始消失并在奇怪的时间重新出现。我创建了一个JSFiddle来说明我的意思..... https://jsfiddle.net/mattmega4/12Lt9yhh/

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

有人可以详细说明我需要添加或删除或编辑的内容，以便它能够正常工作。谢谢