Animating Type

One of the reasons Flash appealed to me was the ability to animate type using the simple timeline. I still play with Flash occasionally to create typographic storytelling such as “Go the Fuck to Sleep,” which based on Adam Mansbach’s satirical children book, and a video résumé created for a graduate course called Professional Design Practices. Although I still have tremendous love for Flash as an easy-to-use tool for animation and its native support for vector graphic, Flash is officially dead. Fortunately, CSS is picking up animation for the web and it looks promising.

CSS Animations

The W3C’s spec for CSS animations has come a long way. We can use some of its features today to add movements to our typography. Although CSS animations required some coding skills, they are quite easy to comprehend. If you know your HTML and CSS, you can learn to use simple animations to bring your typography to life in no time.

At the time of this writing, CSS animations work in most modern browsers, including Chrome, Firefox, and Opera, without prefixes. For older browsers, I recommend using auto prefixes.

Fade-In Text

To illustrate how easy it is to create an animation with CSS, let’s create a simple fade-in text. Here’s the HTML markup to fade in the word “PROWEBTYPE:”

<span class="fade pro">PRO</span><span class="fade web">WEB</span><span class="fade type">TYPE</span>

To create CSS animation, you need to define the sequence using the @keyframe rule:

@keyframes fadeIn { 
  from {opacity:0;}
    to {opacity:1;} 
}

In the code above, you have created a @keyframe with the name “fadeIn.” Then you declare your sequence with the keywords from and to. For more precise control of your sequence, you can declare them in percentages: 0%, 25%, 50%, 75% and 100%. Next, you need to apply the animation to your HTML elements:

.fade {
  opacity:0; 		
  animation:fadeIn ease-in 1;
  animation-fill-mode:forwards;
  animation-duration:1s;
}

.fade.pro {
  animation-delay: 0.7s;
}

.fade.web {
  animation-delay: 1.2s;
}

.fade.type {
  animation-delay: 2s;
	}	

First, you need to make the “fade” class invisible (opacity:0;) to start out. Second, you reference the animation name (“fadeIn”) and tell it to ease-in only 1 time: animation:fadeIn ease-in 1;. Third, the next rule (animation-fill-mode:forwards;) makes sure the fade-in stops at the last keyframe. Forth, the animation-duration property specifies how long it takes for an animation to complete one cycle. Finally, the last three rules use animation-delay to tell when each HTML element should begin. That’s it. Check out the demo or download it.

More Resources

If you are excited about CSS animations and want to learn more, read Val Head’s The CSS Animations Pocket Guide and the Mozilla Developer Network’s “CSS Reference.” If you want to play around, check out Justin Aguilar’s excellent “CSS Animation Cheat Sheet.” I created two typographic demos (slide down and expand open) based on his cheat sheet.