Previous Lecture Complete and continue  

  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.
  4. Subscribe to Web Animations Weekly: If anything you learn today changes, this newsletter is the first place you'll hear about it.

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

Slides

CSS Animations and Transitions Cheat Sheet.pdf