This example offers 29 cubic-bezier CSS3 templates, all code sourced from the internet! You can use these common cubic-bezier curve templates or tweak them with a cubic-bezier tool to achieve a custom animation effect. A cubic-bezier is defined by 4 points, with the CSS3 function's default start point at (0,0) and end point at (1,1). Thus, controlling the remaining 2 direction points allows you to create a complete cubic-bezier curve
-webkit-transition: all 500ms cubic-bezier(0.250, 0.250, 0.750, 0.750);
-moz-transition: all 500ms cubic-bezier(0.250, 0.250, 0.750, 0.750);
-o-transition: all 500ms cubic-bezier(0.250, 0.250, 0.750, 0.750);
transition: all 500ms cubic-bezier(0.250, 0.250, 0.750, 0.750);-webkit-transition-timing-function: cubic-bezier(0.250, 0.250, 0.750, 0.750);
-moz-transition-timing-function: cubic-bezier(0.250, 0.250, 0.750, 0.750);
-o-transition-timing-function: cubic-bezier(0.250, 0.250, 0.750, 0.750);
transition-timing-function: cubic-bezier(0.250, 0.250, 0.750, 0.750);
You recently used: