Make a kinetic typography video with CSS | Tutorial

 Web Design
May 142013
 

 HTML5_Logo_512

Sam Hampton-Smith shows how to use CSS3 transitions and animations to create a kinetic typography motion graphic piece, timed to match an HTML5 audio clip

Kinetic typography is a popular way to add impact to a song or audio clip by accentuating the lyrics or script to emphasize phrases, build suspense or help tell a story. The usual method is to set type in Photoshop or Illustrator and use After Effects or Apple Motion to animate words, revealing them in time to the music.

In this tutorial, we’ll use kinetic typography to create a simple conceptual art piece, timed to a song provided by power pop band, Be Like Pablo. Rather than using After Effects, we’ll take advantage of CSS3 animations and transitions to create the piece with standard web tools: HTML5 and CSS3 for the animation and audio and a smattering of JavaScript (we’re using jQuery but you could use straight JS if you prefer) to add classes to various elements at appropriate times.

MORE: Make a kinetic typography video with CSS | Tutorial | .net magazine.