CSS3动画不工作

我已经使用css3为SVG创建了一个动画，它在Chrome和Firefox中工作得非常好。它在Safari中部分工作，但在Internet Explorer中不工作（IE9+支持css动画）

CSS:

@-webkit-keyframes dash {
  70%,80% {
    stroke-dashoffset: 0;
    fill-opacity: 0;
  }

  85% {
    fill-opacity: 0;
    stroke-opacity: 1;
  }

  95% {
    stroke: #17739D;
    stroke-dashoffset: -301;
    stroke-opacity: 0;
  }

  100% {
    fill-opacity: 1;
    stroke-dashoffset: -301;
  }
}

@-ms-keyframes dash {
  70%,80% {
    stroke-dashoffset: 0;
    fill-opacity: 0;
  }

  85% {
    fill-opacity: 0;
    stroke-opacity: 1;
  }

  95% {
    stroke: #17739D;
    stroke-dashoffset: -301;
    stroke-opacity: 0;
  }

  100% {
    fill-opacity: 1;
    stroke-dashoffset: -301;
  }
}

@-moz-keyframes dash {
  70%,80% {
    stroke-dashoffset: 0;
    fill-opacity: 0;
  }

  85% {
    fill-opacity: 0;
    stroke-opacity: 1;
  }

  95% {
    stroke: #17739D;
    stroke-dashoffset: -301;
    stroke-opacity: 0;
  }

  100% {
    fill-opacity: 1;
    stroke-dashoffset: -301;
  }
}


@keyframes dash {
  70%,80% {
    stroke-dashoffset: 0;
    fill-opacity: 0;
  }

  85% {
    fill-opacity: 0;
    stroke-opacity: 1;
  }

  95% {
    stroke: #17739D;
    stroke-dashoffset: -301;
    stroke-opacity: 0;
  }

  100% {
    fill-opacity: 1;
    stroke-dashoffset: -301;
  }
}

#Layer_1 { 
    margin-left: auto; 
    margin-right : auto;  
    top: 50%; 
    position: absolute; 
    left: 50%; 
    margin-left: -65px; 
    margin-top: -35px;   
}

svg {
  background: #fff;
  display: block;
}

svg * {
  stroke: #666;
  #stroke: #17739D;
  stroke-width: 1;
  fill-opacity: 0;
  stroke-dasharray: 350;
  stroke-dashoffset: 440;
}

svg #bp_svg * {

  -webkit-animation-name : dash;
  -moz-animation-name : dash;
  -ms-animation-name : dash;
  animation-name : dash;

  -webkit-animation-duration: 4s;
  -moz-animation-duration: 4s;
  -ms-animation-duration: 4s;
  animation-duration: 4s;

  -webkit-animation-timing-function : linear;
  -moz-animation-timing-function : linear;
  -ms-animation-timing-function : linear;
  animation-timing-function : linear;

  -webkit-animation-fill-mode : forwards;
  -moz-animation-fill-mode : forwards;
  -ms-animation-fill-mode : forwards;
  animation-fill-mode : forwards;
}

---

有谁能帮我弄清楚该怎么做才能使它在Safari和IE中正常工作吗？

IE9不支持CSS3动画，这就解释了为什么它在IE9中不工作。这同样适用于Safari，它也可能有助于给出每个浏览器的版本。请参阅此支持功能列表：

虽然IE9支持CSS3动画，但IE11甚至不支持SVG动画，很难说它们是否会被支持。您可能必须依赖动画HTML元素或使用JavaScript，这将不会从用于渲染CSS动画的硬件加速中受益，但仍然可能是一个可行的解决方案

另一个想法是预渲染它并将其作为gif部署，无论是每次还是仅在IE中

---

来源：

我建议使用raphaeljs javascript库。它在制作svg动画方面有很大的能力

Raphael目前支持Chrome 5.0+Firefox 3.0+、Safari 3.0+， Opera 9.5+和Internet Explorer 6.0+

---

-快速预览。

我不知道你的代码有什么问题，也不知道这些信息是否对你有帮助，但破解代码一个小时后，我可以在IE中不带动画地显示它。我更改了CSS块

svg*

中的

填充不透明度
。检查这个，这似乎是一个理想的退路，因为动画是结冰的，你真的只需要看看蛋糕。+1因为动画很酷：）“制作SVG动画的最简单方法是使用CSS动画或转换。缺点是它在IE中不起作用，如果您想要IE支持，您需要使用requestAnimationFrame并使用脚本逐帧更新值。“ref:@ChrisHardie Post作为一个回答，Morgan，好吧，我同意IE9不支持它，但它应该适用于IE10+和Safari，不过是什么版本？你不是在说什么版本的Safari。我看到它在5.1.7版中部分工作。我昨天在本地重新创建了你的动画，我可以发誓它在IE10中有效。刚刚检查过，哦！不过，OP并没有使用SMIL动画，而是使用css3动画：