Recreating CSS3 transitions Cubic-Bezier curve

Viewed 5739

In CSS3 transitions, you can specify a timing function as 'cubic-bezier:(0.25, 0.3, 0.8, 1.0)' In that string, you are only specifying the XY for points P1 and P2 along the curve, as P0 and P3 are always (0.0, 0.0), and (1.0, 1.0) respectively.

According to Apple's site: x [is] expressed as a fraction of the overall duration and y expressed as a fraction of the overall change

My question is how can this be mapped back to a traditional 1 dimensional T value in javascript?

--

From Apple docs on animating with transitions
enter image description here

3 Answers
Related