SVG CSS3-frame-by-frame-animations with fallback

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.