prefixed CSS for slideshow example

gistfile1.css

/* http://themarklee.com/2013/10/16/simple-crossfading-slideshow-css/ */
.css-slideshow {
position: relative;
max-width: 495px;
height: 370px;
margin: 1em auto .5em auto;
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight: 300;
}
.css-slideshow figure {
margin: 0;
max-width: 495px;
height: 370px;
background: #fff;
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;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
-webkit-transition: opacity .5s;
-moz-transition: opacity .5s;
-o-transition: opacity .5s;
-ms-transition: opacity .5s;
transition: opacity .5s;
}
.css-slideshow:hover figure figcaption {
-webkit-transition: opacity .5s;
-moz-transition: opacity .5s;
-o-transition: opacity .5s;
-ms-transition: opacity .5s;
transition: opacity .5s;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
}
.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),.css-slideshow figure:nth-child(2),.css-slideshow figure:nth-child(3),.css-slideshow figure:nth-child(4),.css-slideshow figure:nth-child(5),.css-slideshow figure:nth-child(6),.css-slideshow figure:nth-child(7) {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
}
.css-slideshow figure:nth-child(1) {
-webkit-animation: xfade 48s 42s  infinite;
-moz-animation: xfade 48s 42s  infinite;
-ms-animation: xfade 48s 42s infinite;
-o-animation: xfade 48s 42s infinite;
animation: xfade 48s 42s infinite;
}
.css-slideshow figure:nth-child(2) {
-webkit-animation: xfade 48s 36s infinite;
-moz-animation: xfade 48s 36s infinite;
-ms-animation: xfade 48s 36s infinite;
-o-animation: xfade 48s 36s infinite;
animation: xfade 48s 36s infinite;
}
.css-slideshow figure:nth-child(3) {
-webkit-animation: xfade 48s 30s infinite;
-moz-animation: xfade 48s 30s infinite;
-ms-animation: xfade 48s 30s infinite;
-o-animation: xfade 48s 30s infinite;
animation: xfade 48s 30s infinite;
}
.css-slideshow figure:nth-child(4) {
-webkit-animation: xfade 48s 24s infinite;
-moz-animation: xfade 48s 24s infinite;
-ms-animation: xfade 48s 24s infinite;
-o-animation: xfade 48s 24s infinite;
animation: xfade 48s 24s infinite;
}
.css-slideshow figure:nth-child(5) {
-webkit-animation: xfade 48s 18s infinite;
-moz-animation: xfade 48s 18s infinite;
-ms-animation: xfade 48s 18s infinite;
-o-animation: xfade 48s 18s infinite;
animation: xfade 48s 18s infinite;
}
.css-slideshow figure:nth-child(6) {
-webkit-animation: xfade 48s 12s infinite;
-moz-animation: xfade 48s 12s infinite;
-ms-animation: xfade 48s 12s infinite;
-o-animation: xfade 48s 12s infinite;
animation: xfade 48s 12s infinite;
}
.css-slideshow figure:nth-child(7) {
-webkit-animation: xfade 48s 6s infinite;
-moz-animation: xfade 48s 6s infinite;
-ms-animation: xfade 48s 6s infinite;
-o-animation: xfade 48s 6s infinite;
animation: xfade 48s 6s infinite;
}
.css-slideshow figure:nth-child(8) {
-webkit-animation: xfade 48s 0s infinite;
-moz-animation: xfade 48s 0s infinite;
-ms-animation: xfade 48s 0s infinite;
-o-animation: xfade 48s 0s infinite;
animation: xfade 48s 0s infinite;
}
@keyframes "xfade" {
 0% {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
   	filter: alpha(opacity=100);
   	opacity: 1;
 }
14.67% {
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
	filter: alpha(opacity=100);
	opacity: 1;
}
16.67% {
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
	filter: alpha(opacity=0);
	opacity: 0;
}
 98% {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
   	filter: alpha(opacity=0);
   	opacity: 0;
 }
 100% {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
   	filter: alpha(opacity=100);
   	opacity: 1;
 }
}
@-moz-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;
 }
}
@-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;
 }
}
@-ms-keyframes "xfade" {
 0% {
   -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 1;
 }
14.67% {
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
	filter: alpha(opacity=100);
	opacity: 1;
}
16.67% {
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
	filter: alpha(opacity=0);
	opacity: 0;
}
 98% {
   -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
 }
 100% {
   -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 1;
 }
}
@-o-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;
 }
}

Hi, thanks for this nice slideshow version. Unfortunately, I am trying to make it responsive, and not succeeding. I have set max-width: 500px; and max-height: 450px; for the slideshow, and set the slideshow figure to max-width:100%; but they do not resize in smaller windows. Can you please help me figure out what I am missing? Many thanks!