CSS3 animations--Common Bezier curves

Recently, when doing CSS3 animation, I feel that some of the default animation easing effects are not enough to meet the requirements, so think of some of the usual curve of Bezier, used in the future

Curve Reference: http://cubic-bezier.com/,http://easings.net/zh-cn#

The commonly used Bezier curves are as follows:

PS: Not all the easing functions have Bezier curves, most of the easing of jquer are there, but there are a few more drastic changes.

　　

$easeInSine: Cubic-bezier (0.47, 0, 0.745, 0.715); $easeOutSine: Cubic-bezier (0.39, 0.575, 0.565, 1); $easeInOutSine: Cubic-bezier (0.445, 0.05, 0.55, 0.95); $easeInQuad: Cubic-bezier (0.55, 0.085, 0.68, 0.53); $easeOutQuad: Cubic-bezier ( 0.25, 0.46, 0.45, 0.94); $easeInOutQuad: Cubic-bezier (0.455, 0.03, 0.515, 0.955); $easeInCubic: Cubic-bezier (0.55, 0.055, 0.675, 0.19); $easeOutCubic: Cubic-bezier (0.215, 0.61, 0.355, 1); $easeInOutCubic: Cubic-bezier (0.645, 0.045, 0.355, 1); $ Easeinquart:cubic-bezier (0.895, 0.03, 0.685, 0.22); $easeOutQuart: Cubic-bezier (0.165, 0.84, 0.44, 1); $easeInOutQuart: Cubic-bezier (0.77, 0, 0.175, 1); $easeInQuint: Cubic-bezier (0.755, 0.05, 0.855, 0.06); $easeOutQuint: Cubic-bezier (0.23, 1, 0.32, 1); $easeInOutQuint: Cubic-bezier (0.86, 0, 0.07, 1); $easeInExpo: Cubic-bezier (0.95, 0.05, 0.795, 0.035); $ Easeoutexpo:cubic-bezier (0.19, 1, 0.22, 1); $easeInOutExpo: Cubic-bezier (1, 0, 0, 1); $easeInCirc: Cubic-bezier (0.6, 0.04 , 0.98, 0.335); $easeOutCirc: Cubic-bezier (0.075, 0.82, 0.165, 1); $easeInOutCirc: Cubic-bezier (0.785, 0.135, 0.15, 0.86); $easeInBack: Cubic-bezier (0.6,-0.28, 0.735, 0.045); $ Easeoutback:cubic-bezier (0.175, 0.885, 0.32, 1.275); $easeInOutBack: Cubic-bezier (0.68,-0.55, 0.265, 1.55);

For the time being, if later useful to other functions may be supplemented

CSS3 animations--Common Bezier curves