Skip to main content

Creating Animated Music Videos with CSS3 and HTML5

Presentation: external link
Average rating: ****.
(4.42, 12 ratings)

When Rachel Nabors transitioned to web design from comics four years ago, the first thing she wanted to do was animate a cartoon in the browser. But instead of learning Flash, she was more interested in mastering CSS and JavaScript.

For a long time animating with JavaScript was limiting and resource intensive. There was no simple way to incorporate audio. But things have drastically changed in the past year with widespread adoption of CSS3 animations and HTML5 audio. You can do much without using JavaScript at all, and when you do use JavaScript, you can accomplish so much more!

In this talk, Rachel will show you the basic techniques any front-end developer or ambitious designer can use to reproduce classic animation techniques like walkcycles and “cut-outs.” Then she shows you how to combine them all into a cohesive whole.

Whether or not the browser is the next animation platform, you’re sure to come away with a deeper understanding of bleeding edge CSS and how to control its interactions with audio and JavaScript.

Photo of Rachel Nabors

Rachel Nabors

Rachel Nabors is an interaction developer, award-winning cartoonist, and host of the Infinite Canvas Screencast. She deftly blends the art of traditional storytelling with digital media to “tell better stories through code” at her company Tin Magpie. You can catch her as @RachelNabors on Twitter and at


For exhibition and sponsorship opportunities at Fluent conference, contact Sharon Cordesse at (707) 827-7065 or

Download the Fluent Sponsor/Exhibitor Prospectus

For information on trade opportunities with O'Reilly conferences contact Jaimey Walking Bear at mediapartners

View a complete list of Fluent 2013 contacts