IE10 CSS animation issue

问题:

The problem I'm having is that a small section of a website I have built works perfectly on all browsers and on old versions of IE but not on the newest versions. As you may know, IE no longer supports [IF] statements in HTML and doesn't seem to support the command. My problem is with a small animation of a few images using the following CSS:

.fadein img {
    position:absolute;
    display: block;
    margin-left: auto;
    margin-right: auto;
    -webkit-animation-name: fade;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-duration: 32s;
    animation-name: fade;
    animation-iteration-count: infinite;
    animation-duration: 32s;
}

@-webkit-keyframes fade {
    0% {opacity: 0;}
    20% {opacity: 1;}
    33% {opacity: 0;}
    53% {opacity: 0;}
    100% {opacity: 0;}
}
@keyframes fade {
    0% {opacity: 0;}
    20% {opacity: 1;}
    33% {opacity: 0;}
    53% {opacity: 0;}
    100% {opacity: 0;}
}
#f1 {
    -webkit-animation-delay: -4s;
}
#f2 {
    -webkit-animation-delay: -8s;
}
#f3 {
    -webkit-animation-delay: -16s;
}
#f4 {
    -webkit-animation-delay: -24s;
}
#f5 {
    -webkit-animation-delay: -32s;
}

this is currently in use on the web page http://www.portsmouthtap.co.uk to few quotes near the footer. From the research I have done, IE should accept "animation-name" etc within the CSS and should be able to emulate a previous version of itself. I have tried using js to emulate an older version, too, yet this brings the same results. I'm sure I must be missing something obvious so if anyone could help, it'd be greatly appreciated, thanks.

ps. in the newer versions of IE, the images do show up, and fade out, but all at once, then do not repeat, which is obviously not the desired effect. Please refer to the Chrome version of the site to see how the animation is meant to look, thank you.

corresponding html:

<div id="Quote-Images" class="fadein">
    <img id="f5" src="img/quote_05.jpg" alt="">
    <img id="f4" src="img/quote_04.jpg" alt="">
    <img id="f3" src="img/quote_01.jpg" alt="">
    <img id="f2" src="img/quote_02.jpg" alt="">
    <img id="f1" src="img/quote_03.jpg" alt="">
</div>

回答1:

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!

回答2:

You only have the -webkit versions for these:

#f1 {
  -webkit-animation-delay: -4s;
}