Lately I took the time and tried CSS3 frame-by-frame animations with SVGs. In the past, I avoided a double-track solution as we are still optimizing for IE7 and IE8, but with pin sharp displays time for not-so-new-anymore ideas has come.
I worked on a scalable fullscreen quiz-game, and used a SVG sprite for the animation:
- SVG sprite with CSS3-animations (IE10+)
- SVG sprite without animation (IE9) – yes, I also was a bit disappointed of lacking support
- PNG fallback, also without animation (IE7, IE8, Android Gingerbread)
Now, we’ll talk about the setup for the keyframes-animation, a fallback solution with Motio sprite-plugin when lacking CSS3-animation support and PNG-fallbacks for IE7 and IE8.
Animation setup using CSS
I work with Compass/SCSS, you’ll need to update the alpha version (currently 1.0.0) in order to be able to use the keyframes-mixin.
My sprite holds 4 keyframes, most important specifics for CSS:
- Frame-by-frame animations require step-start as animation-timing-function.
- If you’d like to stop your animation on the last frame, use forwards as animation-fill-mode.
- If your animation should play over and over again, use infinite for animation-iteration-count.
- The time it takes to play the animation once from start to end is defined in animation-duration.
- Set width and height to the size of your animation (not to the size of your sprite).
- Set background-size to the full size of your sprite.
- I did that once and searched quite a while: Don’t use quotes around the animation name.
.fraudoudou-animation { background: url(path/to/svg) top left no-repeat; background-size: 60em 15em; width: 15em; height: 15em; @include animation-timing-function(step-start); @include animation-duration(2s); @include animation-iteration-count(infinite); @include animation-name(anim-fraudoudou-music); }
And setup the keyframe-animation itself. Note that it’s important to define the keyframes at the top of your stylesheet – after font-face-declarations but before everything else. Compass’ mixin comes in handy for the vendor prefixes:
@include keyframes(anim-fraudoudou-music) { 0% { background-position: 0 0; } 25% { background-position: -15em 0; } 50% { background-position: -30em 0; } 75% { background-position: -45em 0; } }
Fallbacks
For browsers, that do not support either CSS3-animations or SVG, we need some adaptions. In the example, I use Modernizr to check wheter these properties are supported or not. Modernizr populates the HTML-tag with classes depending on the browser’s skills.
As fallback for browsers lacking CSS3-animations support, I load the plugin Motio. I was lazy and used jQuery for this example, but it’s actually not required by Motio.
$(function() { var $asset = $(".fraudoudou"), $html = $("html"); var initSpriteAnimation = function() { $asset.motio({frames: 4, fps: 2}); }; //CSS3-animations are not supported: load Motio for sprite-animations. if($html.hasClass("no-cssanimations")) { $.getScript( "http://examples.fraudoudou.at/libs/jquery.motio-2.2.1.min.js", initSpriteAnimation ); } //the class no-svg indicates lacking SVG support if($html.hasClass("no-svg")) { } });
For browser that do not support SVG, we add a PNG file. Thanks to Modernizr, we can use the namespace no-svg:
.no-svg .fraudoudou { background-image: url(path/to/png); width: 250px; height:250px; }
Example
All the above code snippets are from an example I tested on the current Chrome, Firefox and Safari as well as IE 7-11. Speaking of the example:
- Link to example
- Download as ZIP with SCSS files
- View on Codepen (actually that does not quite make sense, since Codepen requires IE 10+)

Frau Doudou is a web developer living in Munich. She loves working on creative solutions for sneaky web-problems – challenge accepted!
Feel free to ask questions and contact her on Twitter.