Before we start...

Before we start:

  1. Download Firefox Developer Edition if you don't already have it. It has some super awesome animation tools to check out.
  2. Be sure you have Chrome installed on your computer. We use it for performance testing.
  3. Get a (free) CodePen account if you haven't got one already. You can follow along with me doing the examples if you like! To save your work, just click "fork" and a copy will be saved to your account for you to tweak and play with for all time.

All the exercises are equipped with jQuery and -prefix-free. I use jQuery because it's familiar to people, and -prefix-free lets me focus on teaching proper syntax without wasting your time on prefixes. In your development environment, you can automate adding CSS prefixes with something like autoprefixer.

You will Learn

  • CSS Transitions
  • CSS Animations
  • Sequencing Animations
  • How to Design Performant Animations
  • And some handy browser tools for working with animations


CSS Animations and Transitions Cheat Sheet.pdf
Complete and Continue