The Fight

The task: To teach myself a new technology – I set out to create a short animation using nothing but HTML5 and CSS3

My role: As a college student we were giving an assignment to learn a new technology and this was my project. Using nothing but HTML and CSS, I used Keyframes and CSS animations and transforms to move various pieces of stick figures to look like they were fighting.

Each character’s movements are maintained in separate stylesheets to keep things organized and allow myself to search the code for a particular part of the movement easier.

The final product is a fight that last about 20 seconds, between two of my co-workers. This project ended up being something I just wanted to have fun with and really enjoy doing. The two of them formed a mock rivalry in the office so I used this to play on that.

View the project