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.

About Boogie

Leave a Reply