Sprite Sheet Animation with CSS3

Sometimes i miss the days with my old love Flash. Making small timeline animations to pimp a project was always easy and fun. Since the fall of flash the web is more static then before and it is much more complicated to create nice animations. Today i had to port a bird animation from a old project somehow to the new html/css/js version. I had the source fla file with some animated birds. There was no code, only timeline stuff.

First step: extract the movieclips and export them as sprite maps. This can be done since Flash CS6 directly out of the library.

Now let’s animate the bird with pure CSS3 using the steps() feature of a css animation.

See the Pen sprite sheet animation by Mad Flanderz (@madflanderz) on CodePen.

Last step is to let the birds fly around the screen. This can be easily done with GASP and the Bezier Plugin. Some random values for the bezier points and there are the flying birds:

See the Pen RR flying birds by Mad Flanderz (@madflanderz) on CodePen.

Comments are closed.