mozilla

Compare Revisions

<timing-function>

Change Revisions

Revision 21953:

Revision 21953 by teoli on

Revision 21954:

Revision 21954 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 21953
Revision 21954
t17      <a href="/@api/deki/files/5781/=TF_with_output_gt_than_1.pnt17      <a href="/@api/deki/files/5781/=TF_with_output_gt_than_1.pn
>g" title="TF_with_output_gt_than_1.png"><img align="left" alt="TF>g" title="TF_with_output_gt_than_1.png"><img align="left" alt="TF
>_with_output_gt_than_1.png" class="internal lwrap" src="/@api/dek>_with_output_gt_than_1.png" class="internal lwrap" src="/@api/dek
>i/files/5781/=TF_with_output_gt_than_1.png?size=thumb" style="wid>i/files/5781/=TF_with_output_gt_than_1.png?size=thumb" style="wid
>th: 120px; height: 160px;"></a><a href="/@api/deki/files/5782/=TF>th: 120px; height: 160px;"></a><a href="/@api/deki/files/5782/=TF
>_with_output_gt_than_1_clipped.png" title="TF_with_output_gt_than>_with_output_gt_than_1_clipped.png" title="TF_with_output_gt_than
>_1_clipped.png"><img align="left" alt="TF_with_output_gt_than_1_c>_1_clipped.png"><img align="left" alt="TF_with_output_gt_than_1_c
>lipped.png" class="internal lwrap" src="/@api/deki/files/5782/=TF>lipped.png" class="internal lwrap" src="/@api/deki/files/5782/=TF
>_with_output_gt_than_1_clipped.png?size=thumb" style="width: 120p>_with_output_gt_than_1_clipped.png?size=thumb" style="width: 120p
>x; height: 160px;"></a>Negative and greater-than-one values are a>x; height: 160px;"></a>The output ratio can be greater than 1.0 (
>llowed leading the animation or transition going further than the>or smaller than 0.0). This will lead to go further than the final
> final, or initial, state, than going back. Also, if the function> state, then to come back, a kind of <em>bouncing</em> effect.
> gives values outside the possible range, like a composant-color  
>value greater than <code>255</code> in the <code>rgb()</code> coo 
>rdinates, the value is clipped to its nearest possible value. 
18    </p>
19    <p>
20      Nevertheless, if the output value goes outside of its possi
 >ble range, like a component of a color going greater than <code>2
 >55</code> or smaller than <code>0</code>, the value is clipped to
 > its nearest possible value (in the case of a color-component <co
 >de>255</code> and <code>0</code> respectively.
21    </p>
22    <p>
23      Some <code>cubic-bezier()</code> curves, e. g. when both or
 >dinates are greater than <code>1.0</code>, show this property.

Back to History