CSS Animation Tests

Summer of 2011

Inspired by the works of Anthony Calzadilla, I created two CSS animation pieces: Toasts Sword-Fighting and Flying Breadpig.

Process

Planning and typing out the animations in CSS (by hand!) proved to be an arduous task.

The toast animation was straightforward. Create an SVG of a toastman, split him into parts (body, eyebrow, and sword), position him on the stage, and then set the start & end points of the animation. Then I just copied the toastman and flipped the parameters in order to animate his opponent.

The few parts that made up the toast man.

Breadpig proved to be the next level-up in difficulty since there were multiple start and end points for the entire animation: the pig would tense up, jump, fly, and his facial expression would change while this happened. Planning on paper helped as much as it could for this animation, but in the end it was trial and error (in setting the CSS animation parameters) that lead to the final result. CSSEdit proved useful for the trial and error stage of my production since it provided live-updates to each change that I made.

The many parts that made up Breadpig.

Retrospect

The resulting animations were very basic for the amount of work that went into it. Today, hand-typing CSS animations isn’t necessary given tools such as Adobe Edge Animate, where CSS and Javascript animation instructions are generated for you.

Nonetheless, my CSS Animation Tests proved to be a fun nugget of experimentation with new browser technology. I hope to do similar work in the future since these personal projects are a time-honored tradition where programmers try out a new tech. The only difficult part is coming up with a project that is simple enough to finish on time (by concentrating on the new tech instead of adding on more functionality, which sidetracks me), but fun and creative enough to show off. Rarely do such project ideas pop up into my head. An assured way for me to come across these ideas is to dive deep into the literature written about the new tech and review artworks that others have made with it.