Question

我需要在svg中制作动画图像。我用css3动画做这个。但不知何故，它无法在Internet Explorer中工作。它在firefox和chrome中运行良好。

用于svg图像的Internet Explorer支持的css3动画？

以下是我的代码：

.animated {
  -webkit-animation-duration: 2.5s;
  animation-duration: 2.5s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

<svg viewBox="0 0 2480 2480" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg">
  <image class="animated fadeIn" width="2480" height="2480" y="0" x="0" xlink:href="/demo.Site/Media/Templates/1/digital/bg.png" xmlns:xlink="http://www.w3.org/1999/xlink" />
</svg>

Answer 1

您可以使用网站caniuse.com检查浏览器是否支持某项功能。在这里，您可以看到Internet Explorer确实不支持SVG动画：http://caniuse.com/#search=svg%20animation

SVG图像的CSS动画在Internet Explorer中不起作用

1 个答案: