CSS动画在Internet Explorer 10和11中不起作用

下面的css动画在Chrome、Mozilla和Opera浏览器中效果完美，但在InternetExplorer10和11中不起作用。怎么了

请看

---

问题是，您正在创建动画，而在该动画中，您尝试使用过渡设置动画。这可能在某些浏览器中得到支持，但无论如何感觉都是错误的

声明“真实”动画，如下所示：

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

它可以在IE11上运行（还没有在IE10上尝试过，但应该可以运行）。 我们基本上是告诉浏览器在第一帧设置一个红色的

文本阴影

，在最后一帧不设置

文本阴影

；它将插值其他帧以生成动画

在最初的小提琴中，您在最后一个关键帧上设置了一个过渡以执行实际动画，但IE不支持这一点

我已经更新了小提琴，所以你可以现场观看。

FWIW（不一定与这个问题相关）

我在IE 11中启动动画时遇到了麻烦，无论是在页面加载还是更高版本。我在CSS中定义了

animation name

，并从javascript中设置了

animation delay

和

animation duration

（因为它不应该立即启动）。但当事件被触发时，什么也没有发生

解决方案是在动画应该开始时从javascript重置

动画名称

属性。不知何故，它可能无法在页面加载或其他任何情况下完全加载关键帧定义（即使我尝试将关键帧放置在CSS的顶部，并且每次都清除缓存）

顺便说一句，我正试图实施

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