cubic-bezier(0,0,1,1)
Same speed, start to end
(0.25,0.1,0.25,1)
Slow start, fast, slow end
cubic-bezier(0.42,0,1,1)
Slow start
cubic-bezier(0,0,0.58,1)
Slow end
cubic-bezier(0.42,0,0.58,1)
Slow start, slow end
(combo of ease-in and ease out)
The keywords (linear, ease, ease-in, ease-out, ease-in-out) are simply shorthands for defining the Bézier curve. The cubic-bezier timing function is often overlooked because using the keywords are easier. After all, who wants to do the mathematical version of the timing function? However, if you seriously want to fine-tune your animations, you need to understand cubic-bezier, which takes four parameters:
cubic-bezier(P1x,P1y,P2x,P2y)
These parameters map a bézier curve, but the function only mentions P1, and P2 with their corresponding X and Y values. For CSS bézier curves, P0 and P3 are always in the same spot. P0 is at (0,0) and P3 is at (1,1) and are not part of the parameters.
The x-axis is the time the animation takes, and the y-axis is the progression of the animation. Based on the graph on the left, you can visualize the speed curve easing quickly in the beginning, slowing down in the middle, and picking up speed at the end.
It's important to remember that there are only two points to work with and acceptable values must be between 0 and 1. So writing something like cubic-bezier(2,-3,5,2), will just default to linear easing!
There is a good guide for newbies which explains this further. There are also two great cubic-bezier calculators on Rob La Placa's or Lea Verou's websites that can help with coding cubic-beziers.
The bézier curve is the magic behind the timing function; it basically describes the acceleration pattern on a graph. The following graphs show the bezier curve for each of our keywords. This curved is created by using two points. The blue dot represents the x-y coordinates (1st & 2nd parameters) of the first point, while the grey dot represents the x-y coordinates (3rd and 4th parameters) of the second point:
|
Linear:
cubic-bezier(0,0,1,1) Same speed, start to end |
Ease:
(0.25,0.1,0.25,1) Slow start, fast, slow end |
Ease-In:
cubic-bezier(0.42,0,1,1) Slow start |
Ease-Out:
cubic-bezier(0,0,0.58,1) Slow end |
Ease-In-Out:
cubic-bezier(0.42,0,0.58,1) Slow start, slow end (combo of ease-in and ease out) |
|
|
|
|
|
|
Note: Okay it's a bit complicated but I do understand the ability to fine-tune the animations with this. Also, take note that the cubic-bezier function will not work in Internet Explorer 9 and earlier versions.
