Анимация CSS3 не работает

Я создал анимацию для SVG, используя css3, которая отлично работает в 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?

Ответы

Ответ 1

Хотя анимация CSS3 поддерживается в IE9, анимации SVG даже не поддерживаются в IE11, и трудно сказать, будут ли они когда-либо такими. Вам, вероятно, придется либо полагаться на анимированные HTML-элементы, либо использовать JavaScript, который не будет полезен при аппаратном ускорении, используемом для рендеринга CSS-анимаций, но все же может быть жизнеспособным решением.

Другая идея заключалась бы в том, чтобы перенерировать ее и развернуть ее как gif, либо каждый раз, либо только в IE.

Источник: http://caniuse.com/#feat=svg-smil

Ответ 2

В IE9 анимации CSS3 не поддерживаются, что объясняет, почему он не работает в IE9. То же самое относится и к Safari, это может помочь также предоставить версии каждого браузера. Пожалуйста, обратитесь к этому списку поддерживаемых функций: http://caniuse.com/css-animation

Ответ 3

Я бы предложил использовать библиотеку javascript raphaeljs. Он обладает большими возможностями в анимации svg.

В настоящее время Raphael поддерживает Chrome 5.0+ Firefox 3.0+, Safari 3.0+, Opera 9.5+ и Internet Explorer 6.0 +

http://raphaeljs.com/

http://raphaeljs.com/playground.html - быстрый просмотр.