One of the most often overlooked features of CSS transitions is the ability to specify a cubic-bezier timing function. This is because you get a bunch of easing options out of the standards-based box: ease, ease-in, ease-out, ease-in-out, linear.
These canned presets are alright, but if you want your animations to be the best they can be, you need to understand cubic-bezier. How an animation eases is a good way to set tone, and even distinguish a brand. If you don’t animate intuitively your product won’t “feel” right. Think about how Apple adds polish to their products by meticulously choosing how their animations look.
One reason I think cubic-bezier is overlooked is because it’s unintuitive at first glance. Digging into the documentation you see that it takes four parameters:
cubic-bezier(P1x,P1y,P2x,P2y)
Great… what do these do? Well, these map to points, and these points are part of a Bézier curve:
So there are 4 points, but the function only mentions P1, and P2 with their corresponding X and Y values?
For CSS Bézier Curves, P0 and P3 are always in the same spot. P0 is at (0,0) and P3 is at (1,1). An important thing to note is that the points that get passed in the cubic-bezier function can only be between 0 and 1. So if you decide to try something like cubic-bezier(2,3,5,2), you’ll be banished to linear easing, the worst of all easing functions. That’s like a font-family falling back to Comic Sans.
Also notice that the x-axis is the time the animation takes, and the y-axis is the property being changed. Based on the graph above you can visualize it easing quickly in the beginning, slowing down in the middle, and picking up speed at the end.
I’m a visual-spatial kinda guy, so I needed to make a tool so I could see these curves in action. So world, say hello to the cubic-bezier builder.
This is awesome, and totally useful. Thanks for posting.
Question- is there a reason the points along the Y-axis have a minimum of .01? Shouldn’t they go all the way to zero?
Thanks!
Good catch. The range of the values can be between 0 and 1. I originally made the tool for a presentation only targeted for Safari so I was lazy with my cross-browser testing. I’ll likely have it cross-browser compatible by the end of the week (Chrome, Safari, Firefox 4)
Rob, this is a really great resource, thanks for sharing!
Wow, this is killer. So glad I found this article and the tool attached. I’ve been typing in random numbers for a few hours not knowing what was going on.
Haha nice. Yah, I started the same way. The way I think of it now is that it’s similar to a hex code for color. You could say “red” or you could say #f00. They are exposing the underlying math to give us some more flexibility, which is cool. (same thing with matrix() for CSS Transforms).
Thank you! I decided after the tons of times I have come to use this bezier-maker, I ought to at least say thanks. This tool rocks. For some reason my brain always balks when I try to keep the bezier numbers organized. This lovely, perfect little solution is the sort of thing that makes web development fun.
Thanks, Rob a lot for the post and especially for the tool. I still find it confusing to figure out what exactly postfixes “in”/”out” mean in the ease function. Anyway, the builder does its job and it’s bloody awesome!