CSS animation not working in Internet Explorer 10 and 11

问题

The following css animation works perfect in Chrome, Mozilla, Opera browsers but doesn't work in Internet Exporer 10 and 11. What's wrong?

Please see http://jsfiddle.net/bm72w3n3/

.changed {
    -webkit-animation:target-fade 5s 1;
    -moz-animation:target-fade 5s 1;
    animation:target-fade 5s 1;
}
@-webkit-keyframes target-fade {
    0% { text-shadow: 0 0 10px yellow; }
    100% { -webkit-transition: text-shadow 0.2s linear; }
}
@-moz-keyframes target-fade {
    0% { text-shadow: 0 0 10px yellow; }
    100% { -moz-transition: text-shadow 0.2s linear; }
}
@keyframes target-fade {
    0% { text-shadow: 0 0 10px yellow; }
    100% { transition: text-shadow 0.2s linear; }
}

回答1:

The problem is that you're creating an animation and inside that animation you try to animate using transitions. This might be supported in some browsers, but feels wrong anyway.

Declare a "real" animation like this:

@keyframes target-fade {
    0% { text-shadow: 0 0 10px red; }
    100% { text-shadow: none }
}

and it'll work on IE11 (haven't tried on IE10, but it should work). We're basically telling the browser to set a red text-shadow for the first frame and to have no text-shadow for the last frame; it'll interpolate the other frames to make an animation.

In your original fiddle, you were setting a transition on the last keyframe to perform the actual animation, but IE doesn't support that.

I've updated the fiddle here so you can see it live.

回答2:

FWIW (and not necessarily related to this particular question)

I had trouble getting animations started at all in IE 11, whether it was on page load or later. I was defining animation-name in the CSS and setting animation-delay and animation-duration from javascript (because it shouldn't start right away). But nothing happened when the event was triggered.

The solution was to reset the animation-name property from javascript when the animation should start. Somehow it probably wasn't able to completely load the keyframe definition at page load or whatever (even though I tried placing the keyframes at the top of CSS and also clearing the cache each time).

BTW I was trying to implement "iOS Icon Jiggle"

来源：https://stackoverflow.com/questions/25386435/css-animation-not-working-in-internet-explorer-10-and-11