October 6, 2018

A Short Presentation on CSS Animations

One of the things that genuinely got me excited about the web was CSS Animations. I was impressed at how you could use just a tiny bit of CSS to create some wonderful-looking interfaces.

I love how minimal it is, too. You don't need to deal with third-party libraries, and you don't need to write any JavaScript at all. It's also progressive enhancement: If a browser didn't support it, the page wouldn't break. It would simply ignore the animation properties.

Animations on the web—whether you decide to do them with CSS Transitions, with CSS Animations, or with JavaScript—shouldn't be thought of as superfluous. It can be a good, maybe even a necessary addition to an interface to get our brains to understand what's going on.

Folks keep throwing around the word “delight” when referring to animation and cute interactions. Cool and great for those guys. Guess what though? Animation can be used functionally too. It's not just an embellished detail.

Animation leverages an overlooked dimension — time! An invisible fabric which stitches space together. You don't have to be a math dork to understand this.

- Transitional Interfaces by Pasquale D’Silva

I recently made a short, unconference-style talk about it at work which showcases what you can do with CSS Animations right now. I recorded a version of that talk for you.

More Reading: