I am constantly working to expand my knowledge of coding languages. To do this, I create projects that utilize different languages and will really test and stretch what I know. As HTML5 and CSS3 were emerging, I created a project that would allow me to learn the new features of these languages.

My goal was to create a short animation using nothing but HTML5 and CSS3 - no javascript. To complete this, I read through A Book Apart's HTML5 and CSS3 books to learn new properties and syntax and completed a variety of tutorials until I felt confident enough to write the animation using my own code.

This is a snippet of the animation's HTML. Each movement is contained in the styling of a div and each component of the fight has its own stylesheet. All of "Caron's" movements are contained in one spreadsheet, Dan's movements are contained in another, etc. This was especially important because these files contain about 1000 lines of CSS alone. If they were not split up, it would be nearly impossible to navigate and edit.

This snippet of CSS shows Caron's reaction to Dan's punch 14 seconds in. I utilized CSS3's animation and transformation features. For the sake of learning, I wrote this code to work in webkit browsers and Firefox as opposed to complete cross-browser compatibility.

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.

*This animation is best viewed in Chrome, Safari, or Firefox.