IE10 CSS 关键帧动画问题答案

【问题标题】：IE10 CSS Keyframes animation issueIE10 CSS 关键帧动画问题
【发布时间】：2015-12-25 13:04:02
【问题描述】：

我创建了一个 SVG 加载指示器。它在 Chrome 等中运行良好，但我似乎无法在 IE10 中运行 - 这是小提琴：https://jsfiddle.net/288mu88o/

@keyframes loading {
    0% {
        fill: red;
    }
    100% {
        fill: yellow;
    }
}

.c1, .c2, .c3, .c4, .c5, .c6, .c7, .c8, .c9, .c10, .c11, .c12, .c13, .c14, .c15 {
    animation: loading 1.5s infinite;
}

.c1 {
    animation-delay: 1.4s;
}
.c2 {
    animation-delay: 1.3s;
}
.c3 {
    animation-delay: 1.2s;
}

...

<g>
    <circle fill="#D9E2E7 " cx="294.7" cy="342.1" r="3.5" class="c1" />
</g>
<g>
    <circle fill="#D9E2E7 " cx="281.3" cy="344.8" r="3.5" class="c2"/>
</g>
<g>
    <circle fill="#D9E2E7 " cx="270.2" cy="352.7" r="3.5" class="c3"/>
</g>

...

我错过了什么？

谢谢。

【问题讨论】：

IE10（或 11）不支持 SVG 数据的 CSS 动画。为此，您需要 IE Edge：dev.modern.ie/platform/status/…
您好，非常感谢您的回复。我已经在我的 index.html 中定义了一个元标记，例如。这是你指的吗？如果是这样，那就没什么区别了。
您无法通过添加元标记将 IE10 升级到 IE Edge。您需要自行安装 IE edge。开发人员可以实现向后兼容性，但缺少时间机器向前兼容性有点困难。
澄清一下，IE=edge 指示 IE 为已建立和新兴的行业标准使用最高可用引擎。 Microsoft Edge 是 Windows 10 的默认浏览器。

标签： css svg internet-explorer-10

【解决方案1】：

IE 10 不支持 SVG 的 CSS 动画。您可以使用第三方解决方案，例如 Fakesmile

【讨论】：

Fakesmile 用于 SMIL，而不是 CSS 动画。