SVG animation not working in Safari/IE - css

Question

I have this SVG line animation that draws in a text, however it doesn't seem to work on Safari nor Internet Explorer. IS there something I'm missing?
http://codepen.io/anon/pen/VYgdZv
CSS
svg path {
fill: none;
stroke: #000;
stroke-width: 4;
stroke-linecap: round;
stroke-linejoin: round;
stroke-dasharray: 1700;
stroke-dashoffset: 1700;
animation: dash 5s ease-out forwards;
-webkit-animation-name:dash;
-webkit-animation-duration:5s;
-webkit-animation-timing-function:ease-out;
-webkit-animation-fill-mode:forwards;
-moz-animation: dash 5s ease-out forwards;
-o-animation: dash 5s ease-out forwards;
-ms-animation: dash 5s ease-out forwards;
}
#keyframes dash {
to {
stroke-dashoffset: 0;
}
}
#-moz-keyframes dash {
to {
stroke-dashoffset: 0;
}
}
#-webkit-keyframes dash {
to {
stroke-dashoffset: 0;
}
}
#-o-keyframes dash {
to {
stroke-dashoffset: 0;
}
}
#-ms-keyframes dash {
to {
stroke-dashoffset: 0;
}
}

Answer 1

CSS animations, transitions, transforms (as well as classList or dataset in JS) don't work in IE 11 and older. The transitions/ animations problem has just been fixed in the Edge engine (same goes for classList), but for IE11 and older, the only solution is to use JS (SMIL animations don't work either, plus Chrome might drop SMIL as well - update: SMIL is on its way out, don't use it!).
This is an example of how you can do it:
var p = document.querySelector('.animate'),
offset = 1000;
var offsetMe = function() {
if(offset < 0) offset = 1000;
p.style.strokeDashoffset = offset;
offset--;
requestAnimationFrame(offsetMe);
}
offsetMe();
#keyframes fadeInP {
to {
stroke-dashoffset: 0;
}
}
.animate {
stroke-dashoffset: 1000;
/*animation: fadeInP 10s linear infinite;*/
}
/*
CSS animations don't work for this in IE and neither do SMIL animations.
*/
<svg viewBox="0 0 400 400">
<path stroke-width='8' class="animate" stroke-dasharray="10 10" fill='none' stroke="#000" d="M 0,0 C 100,10 200,80 300,15 " />
</svg>
One quick note about your code: always write the unprefixed version of rules last and you don't need -ms-animation (IE10+ supports animations unprefixed, while IE9 does not support them at all).