Oh Wow That’s Neat – 08: Cubic-Bezier.com

I don’t really come across much about the use of CSS3 cubic-bezier() functions for easing in animations. It is a timing function that can be used in place of the easing keyword for CSS animations.

The beauty of using a cubic-bezier() timing function is that it allows you to to create an acceleration curve so that you have ultimate control over the easing in your animation. It’s not something that is easy to write on your own. This is where Cubic-Bezier.com, created by the talented Lea Verou comes into play.

You can use this tool to quickly manipulate and preview your cubic-bezier() easing functions. You can also use it to save and share your easing functions with others. When you are happy with the result you can simply copy the code and paste it into your CSS. It really helps to understand how these timing functions work visually and it makes working with them much easier.