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

【问题标题】：CSS animation not working in Internet Explorer 10 and 11CSS 动画在 Internet Explorer 10 和 11 中不起作用
【发布时间】：2014-10-12 17:33:46
【问题描述】：

以下 css 动画在 Chrome、Mozilla、Opera 浏览器中完美运行，但在 Internet Explorer 10 和 11 中无法运行。出了什么问题？

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

【问题讨论】：

标签： css internet-explorer internet-explorer-10 css-animations internet-explorer-11

【解决方案1】：

问题在于您正在创建一个动画，并且在该动画中您尝试使用过渡来制作动画。这可能在某些浏览器中受支持，但总感觉不对。

像这样声明一个“真实的”动画：

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

它可以在 IE11 上运行（尚未在 IE10 上尝试过，但应该可以）。我们基本上是在告诉浏览器为第一帧设置一个红色的text-shadow，而在最后一帧没有text-shadow；它会插入其他帧以制作动画。

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

我已经更新了小提琴here，所以你可以实时看到它。

【讨论】：

【解决方案2】：

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

我在 IE 11 中根本无法启动动画，无论是在页面加载时还是之后。我在 CSS 中定义 animation-name 并从 javascript 设置 animation-delay 和 animation-duration （因为它不应该立即启动）。但是触发事件时什么也没发生。

解决方案是在动画开始时从 javascript 中重置 animation-name 属性。不知何故，它可能无法在页面加载或其他任何情况下完全加载关键帧定义（即使我尝试将关键帧放在 CSS 的顶部并且每次都清除缓存）。

顺便说一句，我试图实现"iOS Icon Jiggle"

【讨论】：