IE 11中未运行的简单CSS3动画

Question

我有一个基本的循环加载程序动画的例子，它不会在IE11中启动，但是运行平稳，几乎每一个其他浏览器都是如此。

代码：

​

.circular-still {
  height: 150px;
  -webkit-transform-origin: center center;
  transform-origin: center center;
  width: 150px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}
.path {
  -webkit-animation: dash 1.5s ease-in-out infinite;
  animation: dash 1.5s ease-in-out infinite;
  stroke: #c0c0c0;
  stroke-linecap: round;
  stroke-dasharray: 89, 200;
  stroke-dashoffset: -124px;
}
@-webkit-keyframes dash {
  0% {
    stroke-dasharray: 1, 200;
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dasharray: 89, 200;
    stroke-dashoffset: -35px;
  }
  100% {
    stroke-dasharray: 89, 200;
    stroke-dashoffset: -124px;
  }
}
@keyframes dash {
  0% {
    stroke-dasharray: 1, 200;
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dasharray: 89, 200;
    stroke-dashoffset: -35px;
  }
  100% {
    stroke-dasharray: 89, 200;
    stroke-dashoffset: -124px;
  }
}

<div id="loader" style="display: block;">
  <svg class="circular-still" viewBox="25 25 50 50">
    <circle class="path" cx="50" cy="50" r="20" fill="none" stroke-width="4" stroke-miterlimit="5" />
  </svg>
</div>

​

下面是一个示例，如果在任何浏览器中打开，但IE 11，您应该得到一个动画圆圈，但在IE11中只有一个点。

https://jsfiddle.net/3orv8rjz/

Answer 1

我在一个类似的问题(Source)上发现了这个

只有Microsoft将支持SVG转换和动画。尤其是中风达沙雷。 请参阅Microsoft Developer Docs：https://dev.windows.com/en-us/microsoft-edge/platform/status/csstransitionsanimationsforsvgelements

在Edge中测试，只有在设置单元时，它才能工作：

0% {
    stroke-dasharray: 1, 200;
    stroke-dashoffset: 0px; /* px required */
}