Web Development

Creating CSS animations using a sprite sheet

CSS animations are cool, especially with @keyframes which provides great control over your animation. But CSS animation itself do not provide UI or animation graphics, they just animate DOM elements between two states. Hence, there are lot’s of limitations to CSS animations. SVG might kick in at some point to make things little bit easier but it can be really nasty.

So the alternative it to used png based sprite sheet. Think about cinema film. We have single strip of film with many frames in it. Each frame represent distinct motion breakpoint. Normally to see continuous motion, frame rate should be 24. That 24 frames must be shown at equal interval in just one shown. Any frames more than that is just adding more smoothness to the animation.

Show to create web projector for sprite film. Before we move ahead, let me show you how a spire film looks like.

We have 500px X 72px sized sprite sheet of smurf (whatever) with 10 frames. Hence we have 50px X 72px size frame.

Now think like this, if we could just flash each frame at equal interval, we could see the animation. What we can do is, pull the sprite film to the left, that way we could see the animation. In CSS world, that is like creating 50px X 72px div and setting spire as it’s background…