O'Reilly

Create a Brilliant Sprited, CSS-Powered Firefox Animation

By on  
Firefox Animation

Mozilla recently formally announced Firefox OS and its partners at Mobile World Congress and I couldn't be more excited.  Firefox OS is going to change the lives of people in developing countries, hopefully making a name for itself in the US as well.  The partners website also  launched with an awesome Firefox animation that I couldn't pass up the opportunity to write about -- let me show you how it was created!

Before we get to the code, let's have a look at the image:

The image is a whopping 7020x156 pixels; one large sprite. Only one HTML element is required for the animation:

<div id="foxtail"></div>

With the DIV in place, we can use some basic CSS to add a background image and dimensions:

#foxtail {
	background: url(foxtail.png) 0 0 no-repeat;
	width: 156px;
	height: 156px;
}

The last step is periodically updating the background-position of the DIV to provide the appearance of animation via the sprite.  The animation can be created with only CSS, as shared by Luke Stevenson:

@keyframes animate-tail {  
    0% {background-position: -6864px 0; }
    100% {background-position: 0 0;}
}

#foxtail {
  animation: animate-tail 3.75s steps(44) infinite;
}

A beautiful work of art by Luke -- using CSS steps to move to each position! The animation can run infinitely, resetting to the original background position and starting over. In the case that you need to support older browsers, we can use a bit of jQuery and a sprite animation utility called Spritely:

jQuery("#foxtail").sprite({ fps: 12, no_of_frames: 44, rewind: true });

Spritely's API allows for simple sprite animations with maximum control of speed and replay.

I could waste time saying how hot this animation is but no need -- you can already see that!  Luke's awesome contribution allows us to avoid jQuery bloat and JavaScript all together, but there's still a solution available for older browsers.

O'Reilly Velocity Conference
Save 20% with discount code AFF20

Recent Features

  • Introducing MooTools Templated

    One major problem with creating UI components with the MooTools JavaScript framework is that there isn't a great way of allowing customization of template and ease of node creation. As of today, there are two ways of creating: new Element Madness The first way to create UI-driven...

  • Creating Scrolling Parallax Effects with CSS

    Introduction For quite a long time now websites with the so called "parallax" effect have been really popular. In case you have not heard of this effect, it basically includes different layers of images that are moving in different directions or with different speed. This leads to a...

Incredible Demos

Discussion

  1. Duncan

    Wow, this is great! It’s kinda hard designing all the seperate frames though, but really worth the time.

    Could you convince me why I should use this technique of animation a sprite, instead of compiling it as a .gif-image? (Other than the sometimes bad quality of gifs).

  2. schadeck

    I would say that you could make the animation interactive using javascript, and open up impressive possibilities. You can’t say that with an animated gif.

  3. Pavel Linhart

    Duncan:

    Sometimes you need an animation with alpha channel, something a gif can’t offer.
    Also, the png could be smaller than the gif animation.

  4. I just recreated the same animation using CSS3 keyframe animations – http://jsfiddle.net/lucanos/9vkYy/

    Sure, it won’t work in browsers which do not support CSS3. But I guess you could always use Modernizr to detect those and then use Spritely instead.

    First time I have really played with them. Thanks for the inspiration, David!

    • Excellent work Luke! I’ve updated this post!

  5. haha nice one dude! :P

  6. Jeremy P

    Great article! thank
    In the same way, https://github.com/jeremypetrequin/jsMovieclip allows you to create animation with sprite, and has a lot of functionnality too!

  7. Good work! I have allowed myself to translate it into Spanish and write an article on my blog:

    http://www.xn--apaados-6za.es/tenemos-que-apanar/internet-tutoriales-y-trucos/369-animacion-logo-firefox-os-sprited-jquery.html

    Thanks

  8. Tony Brown

    Really nice, I love it!

  9. Very creative. I hope one day we will be able to create same type of animations with HTML5 and CSS without having to use images.

  10. Elliot

    Thanks, but I wish there was more explanation. What is @keyframes ?

  11. @Elliot

    http://www.w3.org/TR/css3-animations/#keyframes
    https://developer.mozilla.org/en-US/docs/CSS/@keyframes

    ——————————————-

    Hey all,

    I love SASS w/Compass.

    While our animator was building sprites, sometimes a tweak (or many) was necessary, and we wanted to be able to just flip a few pictures, WITHOUT building new sprites, and be able to test easily on all browsers. So I built this algorithm recently with the Compass Animation plugin (https://github.com/ericam/compass-animation).

    **In hind sight I think this was over-engineered and the ‘steps(x)’ syntax could have worked instead of building a ton of keyframe blocks. Still a cool bit of logic I want share with the world.**

    // characterAnimation Mixin
    $i: 1
    =characterAnimation($animationName, $numberOfCells, $folderName)
      +keyframes($animationName)
        $percentageSteper: 100/$numberOfCells
        0%
          background-image: url(#{$imgPath + 'animations/' + $folderName + '-animation/' + 1 + '.png'})
        @while $i <= $numberOfCells
          $percentageStep: $i*$percentageSteper
          #{$percentageStep + '%'}
            background-image: url(#{$imgPath + 'animations/' + $folderName + '-animation/' + $i + '.png'})
            $i: $i + 1
        $i: 1
    
    // Call Mixin
    +characterAnimation('carltonDance', 9, 'carlton')
    
  12. Sry forgot to wrap in tags

    // characterAnimation Mixin
    $i: 1
    =characterAnimation($animationName, $numberOfCells, $folderName)
    +keyframes($animationName)
    $percentageSteper: 100/$numberOfCells
    0%
    background-image: url(#{$imgPath + ‘animations/’ + $folderName + ‘-animation/’ + 1 + ‘.png’})
    @while $i <= $numberOfCells
    $percentageStep: $i*$percentageSteper
    #{$percentageStep + '%'}
    background-image: url(#{$imgPath + 'animations/' + $folderName + '-animation/' + $i + '.png'})
    $i: $i + 1
    $i: 1

    // Call Mixin
    +characterAnimation('carltonDance', 9, 'carlton')

  13. Kevin S

    Hey, I inserted the code on my website just like you wrote it.
    And the fox is displayed, but it is not animated. Maybe you can tell me, what I did wrong.

    See for yourself: http://smu.bplaced.net/Unnamed.html

    (I a just getting started and try stuff out, but I’d very much like to know what’s the problem here. Please don’t rip my head off)

    • You need to prefix some of the animation properties, like keyframes, animation-name, etc.

  14. Kevin S

    Sweet, I got it now. Thanks a lot.

  15. Plazmic Flame

    Can someone make this into an animated gif?!?! Would love to have this as a live wallpaper on my Android!!

  16. Thanks for the explanation here!

    Anyone know if there’s an easy way in PS to export frames to a single image (like the one in this anim) with the same distance between each frame? Or any other way to accomplish that in more or less automatic fashion from a layered PS file?

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!

Recently on David Walsh Blog

  • Open Files from Command Line on OS X

    I'm as much of a fan of application UIs as anyone else but I'm finding myself working more and more from the command line lately.  Much of that is becoming obsessed with media manipulation but I'm forcing myself to use less UIs so that I...

  • Get Stock Quotes From Command Line

    When I conned my way into my first professional programming gig, I didn't really think much about money -- just that I was getting my foot in the door.  But as my career has gone on, I've been more aware of money, investing, and retirement.  I've recently...

  • Geolocation API

    One interesting aspect of web development is geolocation; where is your user viewing your website from? You can base your language locale on that data or show certain products in your store based on the user's location. Let's examine how you can...

  • Create an Image Preview from a Video

    Visuals are everything when it comes to media.  When I'm trying to decide whether to watch a video on Netflix, it would be awesome to see a trailer of some kind, but alas that isn't available.  When I'm looking to download a video on my computer,...

  • New:  Webdesigner News!

    A new and exciting website has recently been launched for web designers and developers. You likely spend hours every morning browsing through hundreds of posts on your RSS feeds, hoping to stumble across relevant stories. Webdesigner News was built to provide web designers and developers with...