Help with CSS image slider

Hello

I'm trying to create an image slider similar to the one found in this link. Except that the CSS code isnt rendering..Here is the code: .css-slideshow{
position: relative;
max-width: 495px;
height: 370px;
margin: 5em auto .5em auto;
}
.css-slideshow figure{
margin: 0;
position: absolute;
}
.css-slideshow figcaption{
position: absolute;
top: 0;
color: #fff;
background: rgba(0,0,0, .3);
font-size: .8em;
padding: 8px 12px;
opacity: 0;
transition: opacity .5s;
}
.css-slideshow:hover figure figcaption{
transition: opacity .5s;
opacity: 1;
}
.css-slideshow figure{
opacity:0;
}
figure:nth-child(1) {
animation: xfade 48s 42s infinite;
}
figure:nth-child(2) {
animation: xfade 48s 36s infinite;
}
figure:nth-child(3) {
animation: xfade 48s 30s infinite;
}
figure:nth-child(4) {
animation: xfade 48s 24s infinite;
}
figure:nth-child(5) {
animation: xfade 48s 18s infinite;
}
figure:nth-child(6) {
animation: xfade 48s 12s infinite;
}
figure:nth-child(7) {
animation: xfade 48s 6s infinite;
}
figure:nth-child(8) {
animation: xfade 48s 0s infinite;
}


@keyframes xfade{
0%{
opacity: 1;
}
10.5% {
opacity:1;
}
12.5%{
opacity: 0;
}
98% {
opacity:0;
}
100% {
opacity:1;
}
}