comparison: css3-transitions/Overview.src.html
css3-transitions/Overview.src.html
- changeset 7301
- 3249d55edb05
- parent 7300
- 6b5583cd39bb
- child 7302
- 5f9fb679d334
equal
deleted
inserted
replaced
| 7300:6b5583cd39bb | 7301:3249d55edb05 |
|---|---|
| 93 <h2 id="transitions"><a id="transitions-">Transitions</a></h2> | 93 <h2 id="transitions"><a id="transitions-">Transitions</a></h2> |
| 94 <p> | 94 <p> |
| 95 Normally when the value of a CSS property changes, the rendered result is instantly updated, with the affected elements immediately changing from the old property value to the new property value. This section describes a way to specify transitions using new CSS properties. These properties are used to animate smoothly from the old state to the new state over time. | 95 Normally when the value of a CSS property changes, the rendered result is instantly updated, with the affected elements immediately changing from the old property value to the new property value. This section describes a way to specify transitions using new CSS properties. These properties are used to animate smoothly from the old state to the new state over time. |
| 96 </p> | 96 </p> |
| 97 <p> | 97 <p> |
| 98 For example, suppose that transitions of one second have been defined on the <code class="property">'left'</code> and | 98 For example, suppose that transitions of one second have been defined on the 'left' and |
| 99 <code class="property">'background-color'</code> properties. The following diagram illustrates the effect of updating those properties on an element, in this case moving it to the right and changing the background from red to blue. This assumes other transition parameters still have their default values. | 99 'background-color' properties. The following diagram illustrates the effect of updating those properties on an element, in this case moving it to the right and changing the background from red to blue. This assumes other transition parameters still have their default values. |
| 100 </p> | 100 </p> |
| 101 <div class="figure"> | 101 <div class="figure"> |
| 102 <img src="transition1.png" alt=""> | 102 <img src="transition1.png" alt=""> |
| 103 </div> | 103 </div> |
| 104 <p class="caption"> | 104 <p class="caption"> |
| 105 Transitions of <code class="property">'left'</code> and <code class="property">'background-color'</code> | 105 Transitions of 'left' and 'background-color' |
| 106 </p> | 106 </p> |
| 107 <p> | 107 <p> |
| 108 Transitions are a presentational effect. The computed value of a property transitions over time from the old value to the new value. Therefore if a script queries the computed style of a property as it is transitioning, it will see an intermediate value that represents the current animated value of the property. | 108 Transitions are a presentational effect. The computed value of a property transitions over time from the old value to the new value. Therefore if a script queries the computed style of a property as it is transitioning, it will see an intermediate value that represents the current animated value of the property. |
| 109 </p> | 109 </p> |
| 110 <p> | 110 <p> |
| 121 <pre> | 121 <pre> |
| 122 div { | 122 div { |
| 123 transition-property: opacity; | 123 transition-property: opacity; |
| 124 transition-duration: 2s; | 124 transition-duration: 2s; |
| 125 } | 125 } |
| 126 </pre>The above example defines a transition on the <code class="property">'opacity'</code> property that, when a new value is assigned to it, will cause a smooth change between the old value and the new value over a period of two seconds. | 126 </pre>The above example defines a transition on the 'opacity' property that, when a new value is assigned to it, will cause a smooth change between the old value and the new value over a period of two seconds. |
| 127 </div> | 127 </div> |
| 128 <p> | 128 <p> |
| 129 Each of the transition properties accepts a comma-separated list, allowing multiple transitions to be defined, each acting on a different property. In this case, the individual transitions take their parameters from the same index in all the lists. For example: | 129 Each of the transition properties accepts a comma-separated list, allowing multiple transitions to be defined, each acting on a different property. In this case, the individual transitions take their parameters from the same index in all the lists. For example: |
| 130 </p> | 130 </p> |
| 131 <div class="example"> | 131 <div class="example"> |
| 136 div { | 136 div { |
| 137 transition-property: opacity, left; | 137 transition-property: opacity, left; |
| 138 transition-duration: 2s, 4s; | 138 transition-duration: 2s, 4s; |
| 139 } | 139 } |
| 140 | 140 |
| 141 </pre>This will cause the <code class="property">'opacity'</code> property to transition over a period of two seconds and the left property to transition over a period of four seconds. | 141 </pre>This will cause the 'opacity' property to transition over a period of two seconds and the left property to transition over a period of four seconds. |
| 142 </div> | 142 </div> |
| 143 | 143 |
| 144 <p id="list-matching"> | 144 <p id="list-matching"> |
| 145 In the case where the lists of values in transition properties | 145 In the case where the lists of values in transition properties |
| 146 do not have the same length, the length of the | 146 do not have the same length, the length of the |
| 166 <pre> | 166 <pre> |
| 167 div { | 167 div { |
| 168 transition-property: opacity, left, top, width; | 168 transition-property: opacity, left, top, width; |
| 169 transition-duration: 2s, 1s; | 169 transition-duration: 2s, 1s; |
| 170 } | 170 } |
| 171 </pre>The above example defines a transition on the <code class="property">'opacity'</code> property of 2 seconds duration, a | 171 </pre>The above example defines a transition on the 'opacity' property of 2 seconds duration, a |
| 172 transition on the <code class="property">'left'</code> property of 1 | 172 transition on the 'left' property of 1 |
| 173 second duration, a transition on the <code class="property">'top'</code> property of 2 seconds duration and a | 173 second duration, a transition on the 'top' property of 2 seconds duration and a |
| 174 transition on the <code class="property">'width'</code> property of 1 | 174 transition on the 'width' property of 1 |
| 175 second duration. | 175 second duration. |
| 176 | 176 |
| 177 </div> | 177 </div> |
| 178 | 178 |
| 179 <!-- ======================================================================================================= --> | 179 <!-- ======================================================================================================= --> |
| 180 <h3 id="transition-property-property"><a id="the-transition-property-property-"> | 180 <h3 id="transition-property-property"><a id="the-transition-property-property-"> |
| 181 The <code class="property">'transition-property'</code> Property | 181 The 'transition-property' Property |
| 182 </a></h3> | 182 </a></h3> |
| 183 <p> | 183 <p> |
| 184 The <code class="property">'transition-property'</code> property specifies the name of the CSS property to which the transition is applied. | 184 The 'transition-property' property specifies the name of the CSS property to which the transition is applied. |
| 185 </p> | 185 </p> |
| 186 <div class="issue"> | 186 <div class="issue"> |
| 187 We may ultimately want to support a keypath syntax for this property. A keypath syntax would enable different transitions to be specified for components of a property. For example the blur of a shadow could have a different transition than the color of a shadow. | 187 We may ultimately want to support a keypath syntax for this property. A keypath syntax would enable different transitions to be specified for components of a property. For example the blur of a shadow could have a different transition than the color of a shadow. |
| 188 </div> | 188 </div> |
| 189 <table class="propdef"> | 189 <table class="propdef"> |
| 324 covers all properties. | 324 covers all properties. |
| 325 </p> | 325 </p> |
| 326 | 326 |
| 327 <!-- ======================================================================================================= --> | 327 <!-- ======================================================================================================= --> |
| 328 <h3 id="transition-duration-property"><a id="the-transition-duration-property-"> | 328 <h3 id="transition-duration-property"><a id="the-transition-duration-property-"> |
| 329 The <code class="property">'transition-duration'</code> Property | 329 The 'transition-duration' Property |
| 330 </a></h3> | 330 </a></h3> |
| 331 <p> | 331 <p> |
| 332 The <code class="property">'transition-duration'</code> property defines the length of time that a transition takes. | 332 The 'transition-duration' property defines the length of time that a transition takes. |
| 333 </p> | 333 </p> |
| 334 <table class="propdef"> | 334 <table class="propdef"> |
| 335 <tbody> | 335 <tbody> |
| 336 <tr> | 336 <tr> |
| 337 <td> | 337 <td> |
| 414 </td> | 414 </td> |
| 415 </tr> | 415 </tr> |
| 416 </tbody> | 416 </tbody> |
| 417 </table> | 417 </table> |
| 418 <p> | 418 <p> |
| 419 This property specifies how long the transition from the old value to the new value should take. By default the value is ''0s'', meaning that the transition is immediate (i.e. there will be no animation). A negative value for <code class="property">transition-duration</code> renders the declaration invalid. | 419 This property specifies how long the transition from the old value to the new value should take. By default the value is ''0s'', meaning that the transition is immediate (i.e. there will be no animation). A negative value for 'transition-duration' renders the declaration invalid. |
| 420 </p> | 420 </p> |
| 421 | 421 |
| 422 <!-- ======================================================================================================= | 422 <!-- ======================================================================================================= |
| 423 --> | 423 --> |
| 424 | 424 |
| 425 <h3 id="transition-timing-function-property"><a id="transition-timing-function_tag"> | 425 <h3 id="transition-timing-function-property"><a id="transition-timing-function_tag"> |
| 426 The <code class="property">'transition-timing-function'</code> Property | 426 The 'transition-timing-function' Property |
| 427 </a></h3> | 427 </a></h3> |
| 428 <p> | 428 <p> |
| 429 The <code class="property">'transition-timing-function'</code> property | 429 The 'transition-timing-function' property |
| 430 describes how the intermediate values used during a transition will be | 430 describes how the intermediate values used during a transition will be |
| 431 calculated. It allows for a transition to change speed over its | 431 calculated. It allows for a transition to change speed over its |
| 432 duration. These effects are commonly called <em>easing</em> functions. | 432 duration. These effects are commonly called <em>easing</em> functions. |
| 433 In either case, a mathematical function that provides a smooth curve is | 433 In either case, a mathematical function that provides a smooth curve is |
| 434 used. | 434 used. |
| 475 <p> | 475 <p> |
| 476 A <a | 476 A <a |
| 477 href="http://en.wikipedia.org/wiki/B%C3%A9zier_curve#Cubic_B.C3.A9zier_curves">cubic | 477 href="http://en.wikipedia.org/wiki/B%C3%A9zier_curve#Cubic_B.C3.A9zier_curves">cubic |
| 478 Bézier curve</a> is defined by four control points, P<sub>0</sub> | 478 Bézier curve</a> is defined by four control points, P<sub>0</sub> |
| 479 through P<sub>3</sub> (see Figure 1). P<sub>0</sub> and P<sub>3</sub> | 479 through P<sub>3</sub> (see Figure 1). P<sub>0</sub> and P<sub>3</sub> |
| 480 are always set to (0,0) and (1,1). The <code class="property">'transition-timing-function'</code> property is used | 480 are always set to (0,0) and (1,1). The 'transition-timing-function' property is used |
| 481 to specify the values for points P<sub>1</sub> and P<sub>2</sub>. These | 481 to specify the values for points P<sub>1</sub> and P<sub>2</sub>. These |
| 482 can be set to preset values using the keywords listed below, or can be | 482 can be set to preset values using the keywords listed below, or can be |
| 483 set to specific values using the <code class="css">'cubic-bezier'</code> function. | 483 set to specific values using the ''cubic-bezier'' function. |
| 484 In the <code class="css">'cubic-bezier'</code> function, P<sub>1</sub> and | 484 In the ''cubic-bezier'' function, P<sub>1</sub> and |
| 485 P<sub>2</sub> are each specified by both an X and Y value. | 485 P<sub>2</sub> are each specified by both an X and Y value. |
| 486 </p> | 486 </p> |
| 487 <div class="figure"> | 487 <div class="figure"> |
| 488 <img src="TimingFunction.png" alt="The Bézier timing function is a | 488 <img src="TimingFunction.png" alt="The Bézier timing function is a |
| 489 smooth curve from point P0 = (0,0) to point P3 = (1,1). The | 489 smooth curve from point P0 = (0,0) to point P3 = (1,1). The |
| 650 in the range [0, 1] or the definition is invalid. The y values can | 650 in the range [0, 1] or the definition is invalid. The y values can |
| 651 exceed this range. | 651 exceed this range. |
| 652 </dd> | 652 </dd> |
| 653 </dl><!-- ======================================================================================================= --> | 653 </dl><!-- ======================================================================================================= --> |
| 654 <h3 id="transition-delay-property"><a id="the-transition-delay-property-"> | 654 <h3 id="transition-delay-property"><a id="the-transition-delay-property-"> |
| 655 The <code class="property">'transition-delay'</code> Property | 655 The 'transition-delay' Property |
| 656 </a></h3> | 656 </a></h3> |
| 657 <p> | 657 <p> |
| 658 The <code class="property">'transition-delay'</code> property defines when the transition will start. It allows a transition to begin execution some some period of time from when it is applied. A <code class="property">'transition-delay'</code> value of ''0s'' means the transition will execute as soon as the property is changed. Otherwise, the value specifies an offset from the moment the property is changed, and the transition will delay execution by that offset. | 658 The 'transition-delay' property defines when the transition will start. It allows a transition to begin execution some some period of time from when it is applied. A 'transition-delay' value of ''0s'' means the transition will execute as soon as the property is changed. Otherwise, the value specifies an offset from the moment the property is changed, and the transition will delay execution by that offset. |
| 659 </p> | 659 </p> |
| 660 <p> | 660 <p> |
| 661 If the value for <code class="property">'transition-delay'</code> is a negative time offset then the transition will execute the moment the property is changed, but will appear to have begun execution at the specified offset. That is, the transition will appear to begin part-way through its play cycle. In the case where a transition has implied starting values and a negative <code class="property">'transition-delay'</code>, the starting values are taken from the moment the property is changed. | 661 If the value for 'transition-delay' is a negative time offset then the transition will execute the moment the property is changed, but will appear to have begun execution at the specified offset. That is, the transition will appear to begin part-way through its play cycle. In the case where a transition has implied starting values and a negative 'transition-delay', the starting values are taken from the moment the property is changed. |
| 662 </p> | 662 </p> |
| 663 <table class="propdef"> | 663 <table class="propdef"> |
| 664 <tbody> | 664 <tbody> |
| 665 <tr> | 665 <tr> |
| 666 <td> | 666 <td> |
| 743 </td> | 743 </td> |
| 744 </tr> | 744 </tr> |
| 745 </tbody> | 745 </tbody> |
| 746 </table><!-- ======================================================================================================= --> | 746 </table><!-- ======================================================================================================= --> |
| 747 <h3 id="transition-shorthand-property"><a id="the-transition-shorthand-property-"> | 747 <h3 id="transition-shorthand-property"><a id="the-transition-shorthand-property-"> |
| 748 The <code class="property">'transition'</code> Shorthand Property | 748 The 'transition' Shorthand Property |
| 749 </a></h3> | 749 </a></h3> |
| 750 <p> | 750 <p> |
| 751 The <code class="property">'transition'</code> shorthand property combines the four properties described above into a single property. | 751 The 'transition' shorthand property combines the four properties described above into a single property. |
| 752 </p> | 752 </p> |
| 753 <table class="propdef"> | 753 <table class="propdef"> |
| 754 <tbody> | 754 <tbody> |
| 755 <tr> | 755 <tr> |
| 756 <td> | 756 <td> |
| 1328 <li> | 1328 <li> |
| 1329 <strong>list of above types</strong>: If the lists have the | 1329 <strong>list of above types</strong>: If the lists have the |
| 1330 same number of items, each item in the list is interpolated using the | 1330 same number of items, each item in the list is interpolated using the |
| 1331 rules above. Otherwise the interpolation is determined by the property | 1331 rules above. Otherwise the interpolation is determined by the property |
| 1332 rules. If the property extends its list by repeating values, then this | 1332 rules. If the property extends its list by repeating values, then this |
| 1333 repeated form will be used in the interpolation (<code class="property">'background-position'</code> | 1333 repeated form will be used in the interpolation ('background-position' |
| 1334 is an example of a property that would transition between lists of different lengths). If | 1334 is an example of a property that would transition between lists of different lengths). If |
| 1335 the property does not allow extending its list, then no interpolation | 1335 the property does not allow extending its list, then no interpolation |
| 1336 will occur. | 1336 will occur. |
| 1337 </li> | 1337 </li> |
| 1338 <li> | 1338 <li> |
