A Short Presentation on CSS Animations
Jag Talon Oct 6 Originally published at jagtalon.com on Oct 06, 2018
This was originally published on jagtalon.com.
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.
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.
I recently made a short, unconference-style talk about it at work which showcases what you can do with CSS Animations right now. Note that this is not meant to be a comprehensive tutorial, and I go through things pretty quickly. But check it out: I recorded a version of that talk for you. If you'd like to learn the details, check out the links below.
- CSS Animations Pocket Guide and Designing Interface Animation by Val Head
- CSS Animation for Beginners by Thoughtbot
- Designing Safer Web Animation For Motion Sensitivity by Val Head
- DevTools Challenger by Firefox and Rachel Nabors
- Animation at Work by Rachel Nabors
- Animating like you just don’t care with Element.animate by Brian Birtles