CSS slideshow breaks after first full loop - html

Question

Hello I am creating an HTML and CSS slideshow with four sets of images that have four pictures in each. It works perfectly on the first cycle, but after that the images start disappearing and reappearing in strange timings. I have created a JSFiddle to illustrate what I mean..... 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%;
}
Can somebody elaborate on what I need to add or remove or edit in order for this to work as it should. Thank you