mozilla

Compare Revisions

<timing-function>

Change Revisions

Revision 21947:

Revision 21947 by teoli on

Revision 21948:

Revision 21948 by teoli on

Title:
timing-function
timing-function
Slug:
CSS/timing-function
CSS/timing-function
Tags:
css, "CSS Reference", animation, transitions
css, "CSS Reference", animation, transitions
Content:

Revision 21947
Revision 21948
n60      These cubic Bézier curves are valid for use by CSS :n60      These cubic Bézier curves are valid for use in CSS :
n63<code>cubic-bezier(0.1,0.7,1.0,0.1)    </code>The canonical Bézien63<code>cubic-bezier(0.1, 0.7, 1.0, 0.1)   </code>The canonical Béz
>r curve with four &lt;number&gt; in the [0,1] range.>ier curve with four &lt;number&gt; in the [0,1] range.
64cubic-bezier(0,0,1,1)            Using &lt;integer&gt; is valid a64cubic-bezier(0, 0, 1, 1)           Using &lt;integer&gt; is valid
>s any &lt;integer&gt; is also a &lt;number&gt;.> as any &lt;integer&gt; is also a &lt;number&gt;.
65cubic-bezier(-0.2, 0.6, -0.1, 0) Negative values for abscissas ar65cubic-bezier(-0.2, 0.6, -0.1, 0)   Negative values for abscissas 
>e valid, leading to bouncing effects.>are valid, leading to bouncing effects.
66cubic-bezier(1.1, 0, 4, 0)       Values &gt; 1.0 for abscissas ar66cubic-bezier(1.1, 0, 4, 0)         Values &gt; 1.0 for abscissas 
>e also valid>are also valid.
tt68    <p>
69      These cubic Bézier curves definitions are invalid :
70    </p>
71    <pre>
72cubic-bezier(0.1, red, 1.0, green) Though the animated output typ
 >e may be a color, Bézier curves work w/ numerical ratios.
73cubic-bezier(0.1, 4,   0.6, 2.45)  Ordinates must be in the [0, 1
 >] range or the curve is not a function of time.
74cubic-bezier(0.3, 2.1)             The two points must be defined
 >, there is no default value.
75cubic-bezier(0.3, -1.9, 2.1, -0.2) Ordinates must be in the [0, 1
 >] range or the curve is not a function of time.
76</pre>
77    <p>
78      A few visualisation of cubic Bézier curves :
79    </p>

Back to History