CSS SVG Animation

Generating CSS driven SVG animation

In designing the user interface of the, happilyon.com website, we wanted to create pure CSS driven SVG animations that worked and looked the same cross device and browser while maintaining the responsive web design guidelines on which we develop websites. While SVG images are essentially lines of code that can easily be manipulated through CSS animations such as transitions and transforms or using libraries such as the popular animate.css library, the challenge is when we need to create more complex animations similar to what JavaScript or related libraries like Snap SVG can do when paired with CSS and SVG images. Some examples of the animations have since been moved to the bottom of this original article page.

When developing websites, we combine, minimize and obfuscate our JavaScript files for performance and security this is one of the reasons for not using JavaScript to power the animations, besides the complexity of the code required, we would also have to recompile our JavaScript files every time we make changes to our animated images, something we intend to do frequently.

Pure CSS

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.

Browser Inconsistency

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.

any questions ?

All Rights Reserved,
Cookie data collection helps refine user experience, continued use implies consent, Learn how to disable