At first blush, animation doesn’t seem like a “style” in the same sense that
border-radius is a style. The taxonomy is a little broken, but so it goes with technology. CSS 3 gives us APIs and performance that let us bring the web to life with interfaces that would make Minority Report jealous. This article discusses how to optimize for performance and eye-catching motion.
All hail the GPU
@keyframes, we can allocate our resources more efficiently and let the browser optimize our animations.
The prefix problem
One CSS rule isn’t cool anymore. You know what’s cool? A billion CSS rules. That’s the current state of affairs with CSS 3, anyways. This problem extends to
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27
This is our reality. We’re actually expected to do this. This is currently what is necessary to have our animations run in all modern browsers.
Believe it or not, nobody really wants to write all this out. Thankfully there are a number of tools to ease the pain, but the current situation is innately broken. Be kind to yourself, use these tools to automate this problem away.
Easing formulae are a crucial component of any compelling animation. A while back I discovered something kind of cool about easing formulae: If you animate different properties synchronously with different easing formulae, you can get some very natural and intriguing motion. Most animations that we see on the web use the same easing formula for X and Y, so things move in a straight line. However, if we mix and match formulae — say,
easeFrom for X and
animation-timing-function property allows for this:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
Definitely experiment with different easing formulae combinations. I’ve built a little tool to make this easier.
Automation is awesome
Getting an animation to look just right involves a lot of iteration and tweaking. CSS is absolutely not conducive to this. Neither Chrome Dev Tools nor Firebug currently allow you to easily modify
@keyframes dynamically, so we are mostly left to modify the source code and reload for every minor change. This problem is exacerbated by the vendor prefix problem that was discussed previously. There is a lot of boilerplate in CSS animations, and we shouldn’t have to deal with any of that when designing an animation.
I think it is critically important to have powerful, high-level tools for this sort of thing. Animations should be made graphically, not programmatically. There are a number of tools being developed that do exactly this, which is totally awesome. We are essentially rebuilding in HTML 5 what the Flash world has enjoyed for over a decade with their authoring environment.
I think there needs to be good open source tools for this as well, which is why I am developing Stylie. Stylie is an app that makes creating CSS 3
@keyframes animations a drag-and-drop experience. It uses Rekapi to generate optimized, cross-browser CSS that you can copy and paste into your stylesheets.
Choose the best approaches