CSS3 animation example: Teaching resource icon

 

This animation was constructed by creating a vector shape in Adobe Illustrator and saving as an .ai file. Next the file was imported into Adobe After Effects, rendered to 3d space with some lighting added to create the gradient and shadow. I exported my After Effects file as a .psd sequence: 6fps. The .psd files were zipped, and uploaded to an online sprite generator where I was able to manipulate my graphics into a single sprite and save out as a jpg file along with the relevant css code for presenting my animation.

Scroll to Top