slideshow test

.side:before {
 width: 300px;
 border: 1px solid #222;
}

.side:before {
 -webkit-animation: hide 1s linear infinite;
 animation: hide 1s linear infinite;
}

.side:before {
 display: block;
 position: absolute;
 left: 2px;
 top: 21px;
 background-size: cover;
 background-position: 0;
 opacity: 0;
 z-index: 0;
 overflow: hidden;
 -webkit-animation: image1 40s linear infinite;
 animation: image1 40s linear infinite;
}

.side:before:nth-child(5) {
 opacity: 1;
 z-index: 1;
 background-image: url(%%image1%%);
}

.side:before:nth-child(4) {
 background-image: url(%%image2%%);
 -webkit-animation-name: image2;
 animation-name: image2;
}
.side:before:nth-child(3) {
 background-image: url(%%image3%%);
 -webkit-animation-name: image3;
 animation-name: image3;
}
.side:before:nth-child(2) {
 background-image: url(%%image4%%);
 -webkit-animation-name: image4;
 animation-name: image4;
}
.side:before:nth-child(1) {
 background-image: url(%%image5%%);
 -webkit-animation-name: image5;
 animation-name: image5;
}

@keyframes image1 {
 16%{opacity:1} 20%{opacity:0;z-index:1} 21%{z-index:0} 95%{z-index:0} 96%{opacity:0;z-index:1}
}
@keyframes image2 {
 16%{opacity:0;z-index:1} 20%{opacity:1} 36%{opacity:1} 40%{opacity:0;z-index:1} 41%{z-index:0}
}
@keyframes image3 {
 36%{opacity:0;z-index:1} 40%{opacity:1} 56%{opacity:1} 60%{opacity:0;z-index:1} 61%{z-index:0}
}
@keyframes image4 {
 56%{opacity:0;z-index:1} 60%{opacity:1} 76%{opacity:1} 80%{opacity:0;z-index:1} 81%{z-index:0}
}
@keyframes image5 {
 1%{z-index:0} 76%{opacity:0;z-index:1} 80%{opacity:1} 96%{opacity:1} 100%{opacity:0;z-index:1}
}
@keyframes hide {
 0%{opacity:0} 1%{opacity:0} 100%{opacity:0}
}

@-webkit-keyframes image1 {
 16%{opacity:1} 20%{opacity:0;z-index:1} 21%{z-index:0} 95%{z-index:0} 96%{opacity:0;z-index:1}
}
@-webkit-keyframes image2 {
 16%{opacity:0;z-index:1} 20%{opacity:1} 36%{opacity:1} 40%{opacity:0;z-index:1} 41%{z-index:0}
}
@-webkit-keyframes image3 {
 36%{opacity:0;z-index:1} 40%{opacity:1} 56%{opacity:1} 60%{opacity:0;z-index:1} 61%{z-index:0}
}
@-webkit-keyframes image4 {
 56%{opacity:0;z-index:1} 60%{opacity:1} 76%{opacity:1} 80%{opacity:0;z-index:1} 81%{z-index:0}
}
@-webkit-keyframes image5 {
 1%{z-index:0} 76%{opacity:0;z-index:1} 80%{opacity:1} 96%{opacity:1} 100%{opacity:0;z-index:1}
}
@-webkit-keyframes hide {
 0%{opacity:0} 1%{opacity:0} 100%{opacity:0}
}