Jiri Skalka

Multimedia Designer

Jiri Skalka - Multimedia Design

CSS3 animation workshop – Battle Snail


On the 10th of November, our class took part in a CSS3 animation workshop. The task was to make a storyboard for our animation to help us to know how many steps we would need.
Probably the hardest part of this work was to come up with an idea that would be complex enough so that I could include as many animation principles as possible.
I managed to make all the sprite sheets on time, however, I had problems with exporting them in the right size, and therefore I did not complete the animation on time and couldn’t participate in the contest at the end of the workshop.

I made 35 pictures, 32 of them are in 3 sprite sheets.

Animation principles:
1) Squash and stretch
3) Staging
5) Follow through and overlapping
6) Slow in and Slow out
7) Arcs
8) Secondary action
9) Timing
10) Exaggeration
11) Solid drawings
12) Appeal

I wanted my animation to be 500px X 500px. First I created new file in Adobe Illustrator that was big enough to fit all the steps of one part of the animation. Then I divided in a number of tiles equal to the number of steps I wanted and started working on the images. When I was done, I exported them to the same folder I had my html file in. Lastly, I coded all the parts of the animation in, made sure each part of the animation was overlapping the other parts as it should with z-index and put the whole thing in the middle of the page.

Here is the final animation: Battle Snail