CSS animation not working in Internet Explorer 10 and 11

Question

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; }
}

Answer 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.