css - IE10 CSS 关键帧动画问题

Question

我创建了一个 SVG 加载指示器。它在 Chrome 等中运行良好，但我似乎无法在 IE10 中运行 - 这是 fiddle :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>

...

我错过了什么？

谢谢。

Answer 1

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