CSS3 animation is not working

Question

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

Answer 1

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

Answer 2

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

Raphael currently supports Chrome 5.0+ Firefox 3.0+, Safari 3.0+, Opera 9.5+ and Internet Explorer 6.0+

http://raphaeljs.com/

http://raphaeljs.com/playground.html - quick preview.

Answer 3

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