Question

以下css动画在Chrome，Mozilla，Opera浏览器中运行良好，但在Internet Exporer 10和11中不起作用。出了什么问题？

.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

问题在于您正在创建动画，而在该动画中，您尝试使用过渡动画。某些浏览器可能会支持此功能，但无论如何都会感觉不对。

宣布＆＃34;真实＆＃34;像这样的动画：

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

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

在您的原始小提琴中，您在最后一个关键帧上设置转换以执行实际动画，但IE不支持。

我已经更新了小提琴here，因此您可以看到它。

Answer 2

FWIW（并不一定与此特定问题相关）

我无法在IE 11中启动动画，无论是在页面加载还是以后。我在CSS中定义animation-name并从javascript设置animation-delay和animation-duration（因为它不应该立即开始）。但是当事件被触发时没有任何事情发生。

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

BTW我试图实施"iOS Icon Jiggle"

CSS动画无法在Internet Explorer 10和11中运行

2 个答案: