Learn CSS3 cubic-bezier like a Boss. (cubic-bezier timing function simplified for beginners)

So, You know how to use easing in animation and transition. you've probably used properties like, linear, ease, ease-in, ease-out, ease-in-out and probably you have seen something like cubic bezier and tried some web search and found some good articles, well, great! but this post is aimed at people who didn't figure out the main concept of cubic bezier timing functions. It's like a swiss knife that wil improve your CSS3 animations dramatically. Keep calm and relax, it's not hard, and yes not that much technical or mathematical either. A great and detailed article on CSS timing functions including a very good explaination on cubic-bezier was published recently in Smashing magazine, if you want technical and detailed explaination, feel free to read that article instead of reading this.

anyways, let's start the easy way, what if, you didn't require to understand cubic bezier, yes possible. Fortuntely one of the greatest legends Lea Verou created a graphical tool with care, to create custom cubic bezier.

cubic-bezier.com

Cool! Isn't it? okay, if you still want to know a little more, please continue reading, if you don't already know, cubic bezier consists of four points on a two dimentional axis, so, each point has two values , X and Y . fortunately, you don't need to think about all four of them, the first point is Always fixed at (0,0) which marks the beginning, and the last point is, yes you guessed it right always fixed at (1,1), marks the ending. You've probably made another guess, yes, the values in cubic bezier is almost the same as the values of CSS Opacity, values range (well almost) between 0 and 1. So, we are left with two points that means four values, and the cubic bezier function takes four values! okay, let's take a look at the syntax :

cubic-bezier(X1,Y1,X2,Y2)

you just need to plot the other two points in the function. well, that doesn't simlify cubic bezier. Well let's change the syntax. but before we do so, take a look at the figure below,

See, cubic bezier curve is a time-progression graph! bingo, if we simplify the syntax, it would look something like this,

   cubic-bezier(time1,progression1,time2,progression2)

so, you can actually specify amount of progression for two point of time, as it's a continuous graph, the change is smooth by nature.

the time1 and time2 cannot be more or less than the 0-1 range, but the progression can, and when it does, something magical happens. yes!! you can reverse the animation or even get the animation out of it's normal change limit. Confused?, try the helium experiment, taken from the smashingMagazine article mentioned earlier :

See the Pen vbqBh by Stephen Greig (@stephengreig) on CodePen.

So, you can mention the amount of progression with the second and fourth values for the first and third part of the total animation running time. That's the best thing about cubic-bezier. The possibilities are uncountable.

well, you'll find a lot more interesting things to do with cubic bezier on the internet. Looking forward to see all your bezier experiments. add comments below if you like or dislike it.

last but not the least :

Self help is the best help. Don't forget to research and push things to the limit.