Understanding CSS cubic-bezier

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.

You may also like...

  • http://danro.net danro

    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?

    • DruDro

      they go to zero fine

  • Rob

    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)

  • http://danleatherman.com/ Dan Leatherman

    Rob, this is a really great resource, thanks for sharing!

  • http://caseybritt.com Casey

    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.

  • Rob

    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).

  • http://thor-studio.com Matt

    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.

  • http://www.xlsmile.com Serge

    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!

  • James

    This is extremely useful information and the tool helps to make things very clear. Thanks!

  • http://www.webdesignerlancaster.co.uk/ Lee

    Use:

    -moz-
    -webkit-

    with:-

    transition-timing-function: cubic-bezier(1,0,1,0);

    in you CSS, have a play with the figures.

  • http://skylinedesign.co.ke Huston

    Thanks for this. The cubic-bezier builder is also awesome to play with and very helpful at the same time. Cheers!

  • Drywall

    Thanks for this. Your builder is awesome, although I’d love to see it support values outside 0,1 as many browsers now support negative values, values >1, etc and it’d be nice to be able to work with those too.

    Also, I’d love it if the builder could take numeric input as a starting point, so I can start with what I have and adjust.

    • roblaplaca

      @985375b83529b48d8e7c6b8357a6216a:disqus Thanks! Ya, it’s long overdue for an update. I’ll have something new in the next week or two.

  • DruDro

    Great! To make it greater, add cells, more cells, and dashed lines going from the points P1 and P2 down to the axes

  • http://www.facebook.com/mirciulica1995 Mircea Pop

    Thank you!

  • http://www.gapdifferent.it/ Giulio Antonio Pallante

    wow :D love it!

  • Vishmay Patel

    awesome example bro, it helped me a lot to understand what is cubic-bezier. Thanks a lot….

  • Kumar Harsh Srivastava

    Thanks a lot, for the explaination, and for pointing to the builder.

  • Kumar Harsh Srivastava

    @roblaplaca:disqus : The values are allowed to cross the [0,1] interval now in the CSS specs. Would you update your demo?

  • donatto

    thanks

  • makin

    nice