Running it through Prefixr:
I got this:
.fadein img {
position: absolute;
display: block;
margin-left: auto;
margin-right: auto;
-webkit-animation-name: fade;
-moz-animation-name: fade;
-ms-animation-name: fade;
-o-animation-name: fade;
animation-name: fade;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-ms-animation-iteration-count: infinite;
-o-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-duration: 32s;
animation-duration: 32s;
}
@keyframes "fade" {
0% {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
}
20% {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
}
33% {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
}
53% {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
}
100% {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
}
}
@-moz-keyframes fade {
0% {
filter: alpha(opacity=0);
opacity: 0;
}
20% {
filter: alpha(opacity=100);
opacity: 1;
}
33% {
filter: alpha(opacity=0);
opacity: 0;
}
53% {
filter: alpha(opacity=0);
opacity: 0;
}
100% {
filter: alpha(opacity=0);
opacity: 0;
}
}
@-webkit-keyframes "fade" {
0% {
filter: alpha(opacity=0);
opacity: 0;
}
20% {
filter: alpha(opacity=100);
opacity: 1;
}
33% {
filter: alpha(opacity=0);
opacity: 0;
}
53% {
filter: alpha(opacity=0);
opacity: 0;
}
100% {
filter: alpha(opacity=0);
opacity: 0;
}
}
@-ms-keyframes "fade" {
0% {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
}
20% {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
}
33% {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
}
53% {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
}
100% {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
}
}
@-o-keyframes "fade" {
0% {
filter: alpha(opacity=0);
opacity: 0;
}
20% {
filter: alpha(opacity=100);
opacity: 1;
}
33% {
filter: alpha(opacity=0);
opacity: 0;
}
53% {
filter: alpha(opacity=0);
opacity: 0;
}
100% {
filter: alpha(opacity=0);
opacity: 0;
}
}
#f1 {
-webkit-animation-delay: -4s;
-moz-animation-delay: -4s;
-ms-animation-delay: -4s;
-o-animation-delay: -4s;
animation-delay: -4s;
}
#f2 {
-webkit-animation-delay: -8s;
-moz-animation-delay: -8s;
-ms-animation-delay: -8s;
-o-animation-delay: -8s;
animation-delay: -8s;
}
#f3 {
-webkit-animation-delay: -16s;
-moz-animation-delay: -16s;
-ms-animation-delay: -16s;
-o-animation-delay: -16s;
animation-delay: -16s;
}
#f4 {
-webkit-animation-delay: -24s;
-moz-animation-delay: -24s;
-ms-animation-delay: -24s;
-o-animation-delay: -24s;
animation-delay: -24s;
}
#f5 {
-webkit-animation-delay: -32s;
-moz-animation-delay: -32s;
-ms-animation-delay: -32s;
-o-animation-delay: -32s;
animation-delay: -32s;
}
Make sure you include all browser prefixes for compatibility!