1.1 --- a/css-transitions/Overview.bs Mon Jan 26 20:37:22 2015 -0800
1.2 +++ b/css-transitions/Overview.bs Mon Jan 26 21:06:35 2015 -0800
1.3 @@ -150,90 +150,18 @@
1.4 <p>
1.5 The 'transition-property' property specifies the name of the CSS property to which the transition is applied.
1.6 </p>
1.7 - <table class="propdef">
1.8 - <tbody>
1.9 - <tr>
1.10 - <th>
1.11 - Name:
1.12 - </th>
1.13 - <td>
1.14 - <dfn id="transition-property">transition-property</dfn>
1.15 - </td>
1.16 - </tr>
1.17 - <tr>
1.18 - <th>
1.19 - Value:
1.20 - </th>
1.21 - <td>
1.22 - none | <<single-transition-property>>#
1.23 - </td>
1.24 - </tr>
1.25 - <tr>
1.26 - <th>
1.27 - Initial:
1.28 - </th>
1.29 - <td>
1.30 - all
1.31 - </td>
1.32 - </tr>
1.33 - <tr>
1.34 - <th>
1.35 - Applies to:
1.36 - </th>
1.37 - <td>
1.38 - all elements, :before and :after pseudo elements
1.39 - </td>
1.40 - </tr>
1.41 - <tr>
1.42 - <th>
1.43 - Inherited:
1.44 - </th>
1.45 - <td>
1.46 - no
1.47 - </td>
1.48 - </tr>
1.49 - <tr>
1.50 - <th>
1.51 - Animatable:
1.52 - </th>
1.53 - <td>
1.54 - no
1.55 - </td>
1.56 - </tr>
1.57 - <tr>
1.58 - <th>
1.59 - Percentages:
1.60 - </th>
1.61 - <td>
1.62 - N/A
1.63 - </td>
1.64 - </tr>
1.65 - <tr>
1.66 - <th>
1.67 - Media:
1.68 - </th>
1.69 - <td>
1.70 - visual
1.71 - </td>
1.72 - </tr>
1.73 - <tr>
1.74 - <th>
1.75 - Computed value:
1.76 - </th>
1.77 - <td>
1.78 - Same as specified value.
1.79 - </td>
1.80 - </tr>
1.81 - <tr>
1.82 - <th>
1.83 - Canonical order:
1.84 - </th>
1.85 - <td>
1.86 - <abbr title="follows order of property value definition">per grammar</abbr>
1.87 - </td>
1.88 - </tr>
1.89 - </tbody>
1.90 - </table>
1.91 + <pre class="propdef">
1.92 + Name: transition-property
1.93 + Value: none | <<single-transition-property>>#
1.94 + Initial: all
1.95 + Applies to: all elements, :before and :after pseudo elements
1.96 + Inherited: no
1.97 + Animatable: no
1.98 + Percentages: N/A
1.99 + Media: visual
1.100 + Computed value: Same as specified value.
1.101 + Canonical order: <abbr title="follows order of property value definition">per grammar</abbr>
1.102 + </pre>
1.103
1.104 <div class="prod">
1.105 <dfn type id="single-transition-property"><single-transition-property></dfn> = all | <<custom-ident>>;
1.106 @@ -298,90 +226,18 @@
1.107 <p>
1.108 The 'transition-duration' property defines the length of time that a transition takes.
1.109 </p>
1.110 - <table class="propdef">
1.111 - <tbody>
1.112 - <tr>
1.113 - <th>
1.114 - Name:
1.115 - </th>
1.116 - <td>
1.117 - <dfn id="transition-duration">transition-duration</dfn>
1.118 - </td>
1.119 - </tr>
1.120 - <tr>
1.121 - <th>
1.122 - Value:
1.123 - </th>
1.124 - <td>
1.125 - <<time>>#
1.126 - </td>
1.127 - </tr>
1.128 - <tr>
1.129 - <th>
1.130 - Initial:
1.131 - </th>
1.132 - <td>
1.133 - 0s
1.134 - </td>
1.135 - </tr>
1.136 - <tr>
1.137 - <th>
1.138 - Applies to:
1.139 - </th>
1.140 - <td>
1.141 - all elements, :before and :after pseudo elements
1.142 - </td>
1.143 - </tr>
1.144 - <tr>
1.145 - <th>
1.146 - Inherited:
1.147 - </th>
1.148 - <td>
1.149 - no
1.150 - </td>
1.151 - </tr>
1.152 - <tr>
1.153 - <th>
1.154 - Animatable:
1.155 - </th>
1.156 - <td>
1.157 - no
1.158 - </td>
1.159 - </tr>
1.160 - <tr>
1.161 - <th>
1.162 - Percentages:
1.163 - </th>
1.164 - <td>
1.165 - N/A
1.166 - </td>
1.167 - </tr>
1.168 - <tr>
1.169 - <th>
1.170 - Media:
1.171 - </th>
1.172 - <td>
1.173 - interactive
1.174 - </td>
1.175 - </tr>
1.176 - <tr>
1.177 - <th>
1.178 - Computed value:
1.179 - </th>
1.180 - <td>
1.181 - Same as specified value.
1.182 - </td>
1.183 - </tr>
1.184 - <tr>
1.185 - <th>
1.186 - Canonical order:
1.187 - </th>
1.188 - <td>
1.189 - <abbr title="follows order of property value definition">per grammar</abbr>
1.190 - </td>
1.191 - </tr>
1.192 - </tbody>
1.193 - </table>
1.194 + <pre class="propdef">
1.195 + Name: <dfn id="transition-duration">transition-duration</dfn>
1.196 + Value: <<time>>#
1.197 + Initial: 0s
1.198 + Applies to: all elements, :before and :after pseudo elements
1.199 + Inherited: no
1.200 + Animatable: no
1.201 + Percentages: N/A
1.202 + Media: interactive
1.203 + Computed value: Same as specified value.
1.204 + Canonical order: <abbr title="follows order of property value definition">per grammar</abbr>
1.205 + </pre>
1.206 <p>
1.207 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.
1.208 </p>
1.209 @@ -461,90 +317,18 @@
1.210 <p class="caption">
1.211 Bézier Timing Function Control Points
1.212 </p>
1.213 - <table class="propdef">
1.214 - <tbody>
1.215 - <tr>
1.216 - <th>
1.217 - Name:
1.218 - </th>
1.219 - <td>
1.220 - <dfn id="transition-timing-function">transition-timing-function</dfn>
1.221 - </td>
1.222 - </tr>
1.223 - <tr>
1.224 - <th>
1.225 - Value:
1.226 - </th>
1.227 - <td>
1.228 - <<single-transition-timing-function>>#
1.229 - </td>
1.230 - </tr>
1.231 - <tr>
1.232 - <th>
1.233 - Initial:
1.234 - </th>
1.235 - <td>
1.236 - ease
1.237 - </td>
1.238 - </tr>
1.239 - <tr>
1.240 - <th>
1.241 - Applies to:
1.242 - </th>
1.243 - <td>
1.244 - all elements, :before and :after pseudo elements
1.245 - </td>
1.246 - </tr>
1.247 - <tr>
1.248 - <th>
1.249 - Inherited:
1.250 - </th>
1.251 - <td>
1.252 - no
1.253 - </td>
1.254 - </tr>
1.255 - <tr>
1.256 - <th>
1.257 - Animatable:
1.258 - </th>
1.259 - <td>
1.260 - no
1.261 - </td>
1.262 - </tr>
1.263 - <tr>
1.264 - <th>
1.265 - Percentages:
1.266 - </th>
1.267 - <td>
1.268 - N/A
1.269 - </td>
1.270 - </tr>
1.271 - <tr>
1.272 - <th>
1.273 - Media:
1.274 - </th>
1.275 - <td>
1.276 - interactive
1.277 - </td>
1.278 - </tr>
1.279 - <tr>
1.280 - <th>
1.281 - Computed value:
1.282 - </th>
1.283 - <td>
1.284 - Same as specified value.
1.285 - </td>
1.286 - </tr>
1.287 - <tr>
1.288 - <th>
1.289 - Canonical order:
1.290 - </th>
1.291 - <td>
1.292 - <abbr title="follows order of property value definition">per grammar</abbr>
1.293 - </td>
1.294 - </tr>
1.295 - </tbody>
1.296 - </table>
1.297 + <pre class="propdef">
1.298 + Name: <dfn id="transition-timing-function">transition-timing-function</dfn>
1.299 + Value: <<single-transition-timing-function>>#
1.300 + Initial: ease
1.301 + Applies to: all elements, :before and :after pseudo elements
1.302 + Inherited: no
1.303 + Animatable: no
1.304 + Percentages: N/A
1.305 + Media: interactive
1.306 + Computed value: Same as specified value.
1.307 + Canonical order: <abbr title="follows order of property value definition">per grammar</abbr>
1.308 + </pre>
1.309 <div class="prod">
1.310 <dfn type id="single-transition-timing-function"><single-transition-timing-function></dfn> = ''ease'' | ''linear'' | ''ease-in'' | ''ease-out'' | ''ease-in-out'' | ''step-start'' | ''step-end'' | <a title="steps()" function>steps</a>(<<integer>>[, [ ''start'' | ''end'' ] ]?) | <a title="cubic-bezier()" function>cubic-bezier</a>(<<number>>, <<number>>, <<number>>, <<number>>)
1.311 </div>
1.312 @@ -609,180 +393,36 @@
1.313 <p>
1.314 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.
1.315 </p>
1.316 - <table class="propdef">
1.317 - <tbody>
1.318 - <tr>
1.319 - <th>
1.320 - Name:
1.321 - </th>
1.322 - <td>
1.323 - <dfn id="transition-delay">transition-delay</dfn>
1.324 - </td>
1.325 - </tr>
1.326 - <tr>
1.327 - <th>
1.328 - Value:
1.329 - </th>
1.330 - <td>
1.331 - <<time>>#
1.332 - </td>
1.333 - </tr>
1.334 - <tr>
1.335 - <th>
1.336 - Initial:
1.337 - </th>
1.338 - <td>
1.339 - 0s
1.340 - </td>
1.341 - </tr>
1.342 - <tr>
1.343 - <th>
1.344 - Applies to:
1.345 - </th>
1.346 - <td>
1.347 - all elements, :before and :after pseudo elements
1.348 - </td>
1.349 - </tr>
1.350 - <tr>
1.351 - <th>
1.352 - Inherited:
1.353 - </th>
1.354 - <td>
1.355 - no
1.356 - </td>
1.357 - </tr>
1.358 - <tr>
1.359 - <th>
1.360 - Animatable:
1.361 - </th>
1.362 - <td>
1.363 - no
1.364 - </td>
1.365 - </tr>
1.366 - <tr>
1.367 - <th>
1.368 - Percentages:
1.369 - </th>
1.370 - <td>
1.371 - N/A
1.372 - </td>
1.373 - </tr>
1.374 - <tr>
1.375 - <th>
1.376 - Media:
1.377 - </th>
1.378 - <td>
1.379 - interactive
1.380 - </td>
1.381 - </tr>
1.382 - <tr>
1.383 - <th>
1.384 - Computed value:
1.385 - </th>
1.386 - <td>
1.387 - Same as specified value.
1.388 - </td>
1.389 - </tr>
1.390 - <tr>
1.391 - <th>
1.392 - Canonical order:
1.393 - </th>
1.394 - <td>
1.395 - <abbr title="follows order of property value definition">per grammar</abbr>
1.396 - </td>
1.397 - </tr>
1.398 - </tbody>
1.399 - </table><!-- ======================================================================================================= -->
1.400 + <pre class="propdef">
1.401 + Name: <dfn id="transition-delay">transition-delay</dfn>
1.402 + Value: <<time>>#
1.403 + Initial: 0s
1.404 + Applies to: all elements, :before and :after pseudo elements
1.405 + Inherited: no
1.406 + Animatable: no
1.407 + Percentages: N/A
1.408 + Media: interactive
1.409 + Computed value: Same as specified value.
1.410 + Canonical order: <abbr title="follows order of property value definition">per grammar</abbr>
1.411 + </pre><!-- ======================================================================================================= -->
1.412 <h3 id="transition-shorthand-property"><span id="the-transition-shorthand-property-">
1.413 The 'transition' Shorthand Property
1.414 </span></h3>
1.415 <p>
1.416 The 'transition' shorthand property combines the four properties described above into a single property.
1.417 </p>
1.418 - <table class="propdef">
1.419 - <tbody>
1.420 - <tr>
1.421 - <th>
1.422 - Name:
1.423 - </th>
1.424 - <td>
1.425 - <dfn id="transition">transition</dfn>
1.426 - </td>
1.427 - </tr>
1.428 - <tr>
1.429 - <th>
1.430 - Value:
1.431 - </th>
1.432 - <td>
1.433 - <<single-transition>>#
1.434 - </td>
1.435 - </tr>
1.436 - <tr>
1.437 - <th>
1.438 - Initial:
1.439 - </th>
1.440 - <td>
1.441 - see individual properties
1.442 - </td>
1.443 - </tr>
1.444 - <tr>
1.445 - <th>
1.446 - Applies to:
1.447 - </th>
1.448 - <td>
1.449 - all elements, :before and :after pseudo elements
1.450 - </td>
1.451 - </tr>
1.452 - <tr>
1.453 - <th>
1.454 - Inherited:
1.455 - </th>
1.456 - <td>
1.457 - no
1.458 - </td>
1.459 - </tr>
1.460 - <tr>
1.461 - <th>
1.462 - Animatable:
1.463 - </th>
1.464 - <td>
1.465 - no
1.466 - </td>
1.467 - </tr>
1.468 - <tr>
1.469 - <th>
1.470 - Percentages:
1.471 - </th>
1.472 - <td>
1.473 - N/A
1.474 - </td>
1.475 - </tr>
1.476 - <tr>
1.477 - <th>
1.478 - Media:
1.479 - </th>
1.480 - <td>
1.481 - interactive
1.482 - </td>
1.483 - </tr>
1.484 - <tr>
1.485 - <th>
1.486 - Computed value:
1.487 - </th>
1.488 - <td>
1.489 - see individual properties
1.490 - </td>
1.491 - </tr>
1.492 - <tr>
1.493 - <th>
1.494 - Canonical order:
1.495 - </th>
1.496 - <td>
1.497 - <abbr title="follows order of property value definition">per grammar</abbr>
1.498 - </td>
1.499 - </tr>
1.500 - </tbody>
1.501 - </table>
1.502 + <pre class="propdef">
1.503 + Name: <dfn id="transition">transition</dfn>
1.504 + Value: <<single-transition>>#
1.505 + Initial: see individual properties
1.506 + Applies to: all elements, :before and :after pseudo elements
1.507 + Inherited: no
1.508 + Animatable: no
1.509 + Percentages: N/A
1.510 + Media: interactive
1.511 + Computed value: see individual properties
1.512 + Canonical order: <abbr title="follows order of property value definition">per grammar</abbr>
1.513 + </pre>
1.514
1.515 <div class="prod">
1.516 <dfn type id="single-transition"><single-transition></dfn> = [ ''none'' | <<single-transition-property>> ] || <<time>> || <<single-transition-timing-function>> || <<time>>
