Animate Path in Internet Explorer

Question

Is there any possiblity to "Fly-In" an svgpath in IE 11?

Like

@keyframes fadeInP {
    from
    {
        stroke-dashoffset:1000;
    }
  to {
    stroke-dashoffset: 0;
  }
}
.animate
{
 animation: fadeInP 10s linear infinite;
}

For

<svg  xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 400 400">
 <path stroke-width='8' class = "animate" fill='none' stroke="#ffffff" d="M 0,0 C 100,10 200,80 300,15 " />
</svg>

This works in FF, but cant find any solution in the web to do soemthing similar in IE.

Thanks in advance

Answer 1

Sadly, I believe the only solution is to use JS and update the offset for every frame.

Animating SVG with CSS doesn't work in IE and neither do SMIL animations.

demo

JS:

var p = document.querySelector('.animate'), 
    offset = 1000;

var offsetMe = function() {
  if(offset < 0) offset = 1000;
  p.style.strokeDashoffset = offset;
  offset--;
  
  requestAnimationFrame(offsetMe);
}

offsetMe();

Update 26th of January 2015: the IE team is working on this.

Update #2 Edge now supports this, though only with units (that is stroke-dashoffset: 1000; won't work, but stroke-dashoffset: 1000px; will).