Skip to content

CSS Flip-book Animation – Automated With SCSS Functions

Tutorial

Required Assets: CSS animated ball from state 1 to state 2 Mario type sprite with next button animator Running dino animation SCSS code CSS build where user can edit frames per second attribute and see the effect?

CSS Flipbook Animation

A Sass Mixin to CSS Animate a Sprite Sheet How to animate a sprite sheet using CSS to create a ‘flipbook’ or classical style animation. This SASS mixin can be easily configured to output multiple sprites at different durations and resolutions. (Skip straight to the code)

Most Other Animation on the Web Generally speaking, when we encounter computer animations on the web, be they web-interfaces, games, videos, or most any other place where you encounter moving graphics, what we’re looking at is created using a process of defining two or more keyframes and having the computer transition between those states. This can be as simple as an object fading in by transitioning from a zero opacity state to a one hundred percent opacity, or as complex as a 3D animation with thousands of nodes moving in space. The former is generally being generated in real-time, while the latter may have required supercomputers to pre-render.

Frames Per Second (FPS) We tend to think of these transitions as being smooth movements between point A and point B. In reality, behind the scenes, the computer is calculating the position of the graphic along the transition timeline and rendering it to the viewer at 60 frames per second. Far too fast for our brains to see the static images and so we interpret as a fluid movement. So how many frames per second do we really need? The human visual system can process 10 to 12 images per second and perceive them individually, while higher rates are perceived as motion.

Traditional Animation This is how traditional animation was done for years, where animators would, by hand, redraw the same image with incremental changes between state A and state B. Traditionally, animation would be 24 frames per second, where an identical image would hold two consecutive frames, resulting in only 12 drawings per second. If there was fast movement, resulting in greater differences between stills, the frames would not be doubled thereby having 24 drawings per second.

Sprite Sheets, Not Quite Early video games never felt ‘animated’ but they conveyed the motion and were easy enough to run on the low graphic capabilities of the machines at the time. They created movement through sprites, essentially low frame rate static states as in traditional animation that were shown in this isn’t too dissimilar from how early videos implemented animations through the use of sprite sheets...

Create An Animated Sprite with CSS Sometimes it’s still prudent to just use static images to create animation. If you’re going to be looping through a short sequence that involves many changing parts, the tradeoff in load time may be worth the performance gain. Not too dissimilar from an animated gif, the advantage of doing it as an animated CSS background is that you can toggle play/pause states through adding and removing a class. This can have practical applications, for example, in story-telling, in interfaces, and for accessibility requirements.

The Code The following is a Sass mixin to generate animated sprites from an SVG sprite sheet. The mixin generates a class that will have an animated sprite as the background image. Four values can be passed to the mixin: Name Number of frames Dimensions of sprite File path From these, a class will be created that assumes a frame rate of 12fps and that the cells are spaced equally.