Guideline: How to Make CSS3 Sprite Sheet Animation

You’ve probably attracted by the animations presented in the new overpink’s website. If you haven’t, you’ve either been living under a rock or inside a McDonald’s big tasty. Today I’ll gonna show you the main steps to achieve this CSS-based animation.

There’s a lot of modern techniques not only the one I’ll explain, but the good news is that all of them are sharing the same concept of production.

This one will be a simple guide for the workflow and it’s CSS snippet that I’ve used.

1. Illustrations

• This is your first step which should start with simple paper sketching for your idea and your message.
• Now it’s time for Adobe Illustrator to redraw this sketch, make sure that every element of your design will be in a separate layer

  

  for example: if it’s a car illustration.. then all of the shapes that makes the body of the car should be in a separate layer, the front wheel and the rear wheel also should be in separate layers.

• The last thing to do is to save your illustrator file.

2. Animation

• It’s the magic time, open Adobe After Effects, make your composition with 15 frame per second or 20 frame per second for more quality (the more frames per second, the more smoothing in animation.. but more and more in file size!).
• Next, Import your illustrator file, go to File > Import > File (Ctrl+I) and select your illustrator file, choose from the Import As drop down menu “Composition – Retain Layer Size”, Your illustration will be imported as a composition including all of your layers.

  

  Now use your skills to animate your illustration, or you can google it, there’s hundreds of tutorials for this step.

• After finishing your animation, it’s time for exporting all of this frames in PNG Sequence, go to Composition > Add to Render Queue (Ctrl+M), click on Output Module and change the Format to PNG Sequence and the Channels to RGB + Alpha and Click OK, then choose your output location and start your render.

  

  Now you have exported 15 PNG file if  your animation time was 1 second for example, and they are ready to be collected in one Sprite Sheet.

  

3. Sprite Sheet

• Sprite sheet is a one image file that consist of rows and columns of all the frames side by side in sequence, this sprite sheet image will be used as a background for a div, this div size should identically equal the frame size, and using jQuery or CSS3 we will change this image’s position frame by frame in sequence.. simple huh!.

  

• Now, lets start making this sprite sheet using Adobe Photoshop and a magical JSX script that will save you the pain of doing this process manually.
• Open your Photoshop and start import your PNG files by going to File > Scripts > Load Files into Stack, browse and select your PNG files then click OK and let Photoshop do his job.

  

• It’s time for using the JS script “LayersToSprite.jxs”, made by Zak Zidik and modified by Ryan Hill, you can find it here,
  In Photoshop go to File > Scripts > Browse, and choose the downloaded JSX, a popup window will ask you about how many columns the sprite sheet should be.. Choose 1 column (1 column is required for our CSS snippet). 

  

• Next, Save the resulted image in PNG, try to compress this file as you can without loosing it’s quality, there is a lot of tools to do this mission, I like this one http://tinypng.com it’s perfect and simple.

4. CSS Animation

• This technique based on the CSS3 Animation and keyframes properties, lets say that our single frame size is 200px width and 100px height, and our animation loop consist of 10 frames, then our sprite sheet image should be 200px width and 1000px in height, by default the animation will start from frame 1 and it will take 9 steps to achieve the last frame.
  
  You: Hossam, shut the fuck up and let the code speak!
  Me: o.O

Questions?