【问题标题】: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-delayanimation-duration (因为它不应该立即启动)。但是触发事件时什么也没发生。

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

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

      【讨论】:

        猜你喜欢
        • 1970-01-01
        • 1970-01-01
        • 2015-01-13
        • 1970-01-01
        • 2014-02-15
        • 2017-02-26
        • 1970-01-01
        • 2011-12-09
        • 2019-07-23
        相关资源
        最近更新 更多