CSS动画在Internet Explorer 10和11中不工作 [英] CSS animation not working in Internet Explorer 10 and 11

问题描述

以下css动画在Chrome，Mozilla，Opera浏览器中运行良好，但在Internet Exporer 10和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?

请参阅 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; }
}

推荐答案

'重新创建一个动画和内部的动画，你尝试使用转换动画。

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

将工作在IE11（没有尝试过IE10，但它应该工作）。
我们基本上告诉浏览器为第一帧设置一个红色 text-shadow ，并且没有 text-shadow 为最后一帧;它会插入其他帧来制作动画。

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.

在你的原始小提琴中，你在最后一个关键帧上设置一个过渡来执行实际的动画，但IE doesn不支持。

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.

这篇关于CSS动画在Internet Explorer 10和11中不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！