CSS Sprite Animations

Creating animations using sprites is now easier than ever thanks to the CSS3 animation property. Animating on hover is a great way to impress your users and maybe get some more clicks where you want them. The trick consists in creating a horizontal sprite and animating the background-position property.

Create or Download Sprites

A sprite with frames laid out horizontally is required for the technique. You can either download one or create it yourself.

Tips for creating sprites for CSS

  • Define a frame size and be sure to position each state precisely using pixel values. Create a first frame and then start duplicating to the right for the rest.
  • Make small changes from frame to frame. Avoid moving big shapes more than 10px from one frame to the next for a fluid animation.
  • Add enough frames for the animation to be fluid but not so much that file size becomes an issue. Less than 20 frames are usually enough.
  • Use solid colors so that you can save the file in PNG format without colors looking washed out. This gives good quality and light files.

Here's the sprite I created for the Twitter Profile link on this website:

Flying Twitter bird CSS sprite

The credit for the idea goes to minimalmonkey.com which has a simpler but great Twitter bird animation.

The CSS for Sprite Animation

The following is the code necessary for animating on hover. For an always-on animation simply move the animation rules from the hover pseudo-element to the element itself.

.animation {
	    background-image: url(sprite.png);
	    height: 150px; /* width and height of each frame */
	    width: 150px;
}
.animation:hover {
	-webkit-animation: sprite-animation .6s steps(12,end) infinite; /* steps = number of frames */
	animation: sprite-animation .6s steps(12,end) infinite;
}
@-webkit-keyframes sprite-animation { /* Safari & Chrome */
	    from { background-position: 0 0; }
	    to { background-position: -1800px 0; } /* negative of sprite sheet width */
}
@keyframes sprite-animation {
	    from { background-position: 0 0; }
	    to { background-position: -1800px 0; } /* negative of sprite sheet width */
}

This is for twelve 150x150 frames. Change the values according to the comments for any other frame number/size.

Be sure to know what will happen if the animation doesn't load. Either use a first frame which looks nice when still, or move the background to the correct position using background-position. This way if the animation doesn't load you'll have this:

Twitter bird

and not this:

Twitter bird wingless

Result

Here's the flying Twitter bird animation:

There are some more in the "Follow Codeitdown" section, in the sidebar of this website. Don't just watch them. Be sure to follow for more great tutorials/articles!

Controlling animations with jQuery

This is an optional step. Some things can't be done with CSS alone and pausing/playing animations at will is one of them. The only control CSS offers over the playing/pausing of the animation is :hover. To play/pause the animation using an external trigger you'll need just a bit of jQuery/Javascript. The following plays an animation:

 $(".animation").css({"-webkit-animation-play-state":"running","animation-play-state":"running"});

And the following pauses it:

$(".animation").css({"-webkit-animation-play-state":"paused","animation-play-state":"paused"});

Here we use the CSS animation-play-state property which was precisely created to allow JS control.

For more advanced control to, for example, change the animation, see Controlling CSS Animations and Transitions with JavaScript in CSS-Tricks.

One comment

Leave a Reply

Allowed tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>