CSS3动画不工作 [英] CSS3 animation is not working

问题描述

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

I have created an animation for SVG using css3 which is working perfectly in Chrome and Firefox. It is partially working in Safari but not working in Internet Explorer (IE9+ which support css animations)

查看演示

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吗？

Can anyone help me to sort out what to do to make it work properly in Safari and IE also?

推荐答案

虽然IE9支持CSS3动画，但IE11甚​​至不支持SVG动画，告诉他们是否会。您可能必须依靠动画HTML元素或使用JavaScript，这将不会从用于渲染CSS动画的硬件加速，但仍然可能是一个可行的解决方案。

While CSS3 animations are supported in IE9, SVG animations are not even supported in IE11 and it's hard to tell whether they will ever be. You probably have to either rely on animated HTML elements or use JavaScript which will not benefit from the hardware acceleration used to render CSS animations but still might be a viable solution.

另一个

资料来源： http://caniuse.com/#feat=svg-smil

这篇关于CSS3动画不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！