Kathleen logo Sarkady  

Web development is like baking. You could make the most beautiful cake in the world, but if it's made with bad ingredients or without the consumer in mind, no one is going to eat it. I am a front-end developer who focuses on combining the right ingredients to create memorable experiences. I keep users coming back for more.

CSS3 Animation

Deliverables: A 20 second animation using only HTML5 and CSS3
Tools: HTML5 | CSS3
Links: The Animation

the fight

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.

html sample

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.

css sample

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.

final project

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.