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

February 26, 2014 | 1 Minute Read

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.

Check it Out

Check it out for yourself here.

More Info

You can get more info about why and how Lea Verou created Cubic-Bezier.com here.

Found any of this Stuff Helpful?

If you found any this helpful and want to show some love, you can always buy me a coffee!