Some awesome CSS functions (P1)
The Css language grows year after year and brings many great features to the browser. Especially the cubic-bezier() function.
A Bezier curve is a parametric curve used in computer graphics. If you ever work with vector graphic programs like AI (Adobe Illustrator) or CodeIDRAW, it is easy for you to encounter this model. This curve is formed with four points as illustrated in the following figure:
Bezier Curve in CSS3 Transition:
Bezier Curve is also applied in Transition with cubic-bezier value. It is a noting value in a set of timing function values because we are able to create the transition movement with custom speed. As followed syntax:
transition-timing-function: cubic-bezier(P1x, P1y, P2x, P2y);
Illutrasting values by Bezier curve:
And if 5 values ease, ease-in, ease-out, ease-in-out and linear are translated in cubic benzier format, then they are alternately shown as followed:
ease-in: cubic-bezier(0.42, 0.0, 1.0, 1.0)
ease-out: cubic-bezier(0.0, 0.0, 0.58, 1.0)
ease-in-out: cubic-bezier(0.42, 0.0, 0.58, 1.0)
Luckily, there is one tool that we can use to help us out, named cubic-bezier.com. It is recommendable that you should click on the link and do some researches on the pages.
Hope you enjoy our informations.
Translator: Sang Doan