CSS3 animation is not working

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)

See Demo

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;
}

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

回答1:

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.

Another idea would be to prerender it and deploy it as a gif, either every time or only in IE.

Source: http://caniuse.com/#feat=svg-smil

回答2:

CSS3 animations are not supported in IE9, which explains why it doesn't work in IE9. The same will apply for Safari,it may help to also give the versions of each browser. Please refer to this list of supported features: http://caniuse.com/css-animation

回答3:

I would suggest using raphaeljs javascript library. It has great capability in animating svg.