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

【问题标题】：CSS Animation Not Working in Internet ExplorerCSS 动画在 Internet Explorer 中不起作用
【发布时间】：2015-06-12 17:35:44
【问题描述】：

我正在尝试创建一个标题动画，它从 5% 宽度开始并增加到 100% 宽度。我还需要它从左边移动：45%；向左：0%；我已经能够在 Chrome 和 FireFox 中完成我需要的工作，但它在 Internet Explorer 中不起作用。

这是我的 CSS：

@keyframes header-build {
    from {width: 5%;}
    to {width: 100%;}
    from {left: 45%;}
    to {left: 0%;}
}

 header{
    width: 5%;
    min-width: 5%;
    left: 45%;
 }

.action{
    animation-name: header-build;
    animation-duration: 1s;
    animation-fill-mode: both;
    animation-delay: 1s;

    -webkit-animation-name: header-build;
    -webkit-animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    -webkit-animation-delay: 1s;


    -moz-animation-name: header-build;
    -moz-animation-duration: 1s;
    -moz-animation-fill-mode: both;
    -moz-animation-delay: 1s;

    -o-animation-name: header-build;
    -o-animation-duration: 1s;
    -o-animation-fill-mode: both;
    -o-animation-delay: 1s;
}

通过js在页面加载时将“action”类添加到标题中。

这适用于除 IE 之外的所有浏览器，但即使在 IE 中它从 45% 变为 0%，宽度也不会改变。

是否有我缺少的前缀或在 Internet Explorer 中为宽度设置动画的替代方式？

谢谢。

编辑：我使用的是 Internet Explorer 11。

【问题讨论】：

我使用的是 IE 版本 11
Is this the animation that you want? 将这两个属性放在一个 from 和 to 中。
根据我的经验，它应该适用于 IE 10 及更高版本，请参阅此 [链接] (stackoverflow.com/questions/20541306/…)

标签： html css

【解决方案1】：

替换动画

@keyframes header-build {
    from {width: 5%;}
    to {width: 100%;}
    from {left: 45%;}
    to {left: 0%;}
}

与

@keyframes header-build { 
    from {width: 5%;left: 45%;}
    to {left: 0%;width: 100%;}
}

由于from 等价于0% 和to 到100%，因此您应该分别声明1 次，并将应该在其中设置动画的属性分组。

【讨论】：

【解决方案2】：

您的问题在于您的 keyframe 声明，因为您不能在关键帧中多次声明 to 和 from。

相反，将所有to 属性放在一个{} 中，用分号分隔（就像使用“普通”CSS 一样）：

@keyframes header-build {
    from {
           width: 5%;
           left: 45%;
         }
    to   {
           width: 100%;
           left: 0%;
         }

如果您还需要“额外”断点/位置，而不是使用 from 和 to，您可以使用 0% 和 100%，例如，可能还有 50%。

附注

您的动画的无前缀版本应始终放置在前缀版本之后，而不是之前。

【讨论】：