"

From 2014.igem.org

.css-slideshow { position: relative; max-width: 495px; height: 370px; margin-left: 100px; 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; 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 5; -moz-animation: xfade 48s 42s 5; -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;
}

}