So the requirement was to design a responsive website that also displays constantly changing pure CSS driven SVG animation images that would repeat playing without any user interaction. The problem is that CSS animations look extremely repetitive in addition to this, only one type of animation can be called on an SVG image or its associated elements, SVG images are generally a bunch of image elements grouped together to form a single image. The real problem, however, begins with browser inconsistencies in displaying the CSS animation applied to the SVG image elements.
To make the CSS and SVG animations look a little less repetitive we introduced an animation delay after each iteration of the animation. We also initiated two animations on the image element, one via the main CSS style sheet and the other through CSS embedded within the SVG image itself.
The verdict is that Chrome plays beautifully, and as most webmasters will tell you that’s where most of the web traffic comes from so that’s good. However, we unfortunately had to significantly tone down the CSS animations embedded inside the SVG images as they looked broken in certain browsers, for instance transform origin in Firefox uses the entire image center point while Chrome uses the exact grouped elements as the center point.
When generating and using SVG images paired with CSS animations the key thing to remember is that the web designer must group individual image elements separately so that they may be animated individually. Browser support for SVG images is excellent and browser inconsistencies with animating SVG image elements should iron out as newer browser versions roll out.