Deliverables: A 20 second animation using only HTML5 and CSS3
Tools: HTML5 | CSS3
Links: The Animation
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.
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.