Thu, 20 Sep 2012 10:33:20 -0700
[css3-animatiions] Add Percentages: lines and incorrectly reorder Computed Value: and Animatable: lines to make the preprocessor happy.
css3-animations/Overview.html | file | annotate | diff | comparison | revisions | |
css3-animations/Overview.src.html | file | annotate | diff | comparison | revisions |
1.1 --- a/css3-animations/Overview.html Thu Sep 20 10:14:24 2012 -0700 1.2 +++ b/css3-animations/Overview.html Thu Sep 20 10:33:20 2012 -0700 1.3 @@ -1,12 +1,23 @@ 1.4 <!DOCTYPE html> 1.5 1.6 <html lang=en> 1.7 - <head> 1.8 + <head profile="http://dublincore.org/documents/2008/08/04/dc-html/ "> 1.9 <title>CSS Animations</title> 1.10 + 1.11 + <link href="http://purl.org/dc/terms/" rel=schema.DC> 1.12 + <meta content="CSS Animations" name=DC.title> 1.13 + <meta content=text name=DC.type> 1.14 + <meta content=2012-09-20 name=DC.issued> 1.15 + <meta content="http://dev.w3.org/csswg/css3-animations/" name=DC.creator> 1.16 + <meta content=W3C name=DC.publisher> 1.17 + <meta content="http://www.w3.org/TR/2012/ED-css3-animations-20120920/" 1.18 + name=DC.identifier> 1.19 + <link href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright" 1.20 + rel=DC.rights> 1.21 <meta content="text/html; charset=utf-8" http-equiv=Content-Type> 1.22 <link href="../default.css" rel=stylesheet type="text/css"> 1.23 <link href="http://www.w3.org/StyleSheets/TR/W3C-ED.css" rel=stylesheet 1.24 - type="text/css"> 1.25 + type="text/css"> 1.26 1.27 <body> 1.28 <div class=head> <!--begin-logo--> 1.29 @@ -15,26 +26,25 @@ 1.30 1.31 <h1>CSS Animations</h1> 1.32 1.33 - <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 8 August 2012</h2> 1.34 + <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 20 September 1.35 + 2012</h2> 1.36 1.37 <dl> 1.38 <dt>This version: 1.39 1.40 <dd><a 1.41 - href="http://www.w3.org/TR/2012/ED-css3-animations-20120808/">http://dev.w3.org/csswg/css3-animations/</a> 1.42 - <!--http://www.w3.org/TR/2012/WD-css3-animations-20120808/--> 1.43 + href="http://www.w3.org/TR/2012/ED-css3-animations-20120920/">http://dev.w3.org/csswg/css3-animations/</a> 1.44 + <!--http://www.w3.org/TR/2012/WD-css3-animations-20120920/--> 1.45 1.46 <dt>Latest version: 1.47 1.48 <dd><a 1.49 href="http://www.w3.org/TR/css3-animations/">http://www.w3.org/TR/css3-animations/</a> 1.50 - 1.51 1.52 <dt>Editor's draft: 1.53 1.54 <dd><a 1.55 href="http://dev.w3.org/csswg/css3-animations/">http://dev.w3.org/csswg/css3-animations/</a> 1.56 - 1.57 1.58 <dt>Previous version: 1.59 1.60 @@ -612,9 +622,14 @@ 1.61 <td>no 1.62 1.63 <tr> 1.64 - <th>Computed Value: 1.65 - 1.66 - <td>As specified 1.67 + <th>Animatable: 1.68 + 1.69 + <td>no 1.70 + 1.71 + <tr> 1.72 + <th>Percentages: 1.73 + 1.74 + <td>N/A 1.75 1.76 <tr> 1.77 <th>Media: 1.78 @@ -622,9 +637,9 @@ 1.79 <td>visual 1.80 1.81 <tr> 1.82 - <th>Animatable: 1.83 - 1.84 - <td>no 1.85 + <th>Computed Value: 1.86 + 1.87 + <td>As specified 1.88 1.89 <tr> 1.90 <th>Canonical Order: 1.91 @@ -633,50 +648,50 @@ 1.92 grammar</abbr> 1.93 </table> 1.94 <!-- 1.95 - <p> 1.96 - It is possible for elements to have multiple animations running that change the same property or properties. In this case the animations combine in a manner defined by the property. For example, animations on 'opacity' will add together and animations on 'transform' will have their transformation matrices multiplied. 1.97 - 1.98 - <div class="example"> 1.99 - <p style="display:none"> 1.100 - Example(s): 1.101 - 1.102 - <pre> 1.103 - @keyframes 'border-bloat' { 1.104 - from { 1.105 - border-width: 0; 1.106 - } 1.107 - to { 1.108 - border-width: 10px; 1.109 - } 1.110 - } 1.111 - 1.112 - @keyframes 'border-diet' { 1.113 - from { 1.114 - border-width: 4px; 1.115 - } 1.116 - to { 1.117 - border-width: 2px; 1.118 - } 1.119 - } 1.120 - 1.121 - div { 1.122 - animation-name: 'border-bloat', 'border-diet'; 1.123 - animation-duration: 10s, 4s; 1.124 - } 1.125 - </pre> 1.126 - <p> 1.127 - The above example has two animations executing on the same property, 'border-width'. The animations are additive. That is, the 1.128 - resulting value for the property will be the addition of the values from the 1.129 - two animations. 1.130 - 1.131 - <p> 1.132 - At time '0s' the element's border will be 4px wide (0px from 'border-bloat' plus 4px from 'border-diet'). 1.133 - At time '4s' the element's border will be 6px wide (4px from 'border-bloat' plus 2px from 'border-diet'). 1.134 - At time '10s' the element's border will be 10px wide (10px from 'border-bloat' and no addition from 1.135 - 'border-diet' as it is no longer executing). 1.136 - 1.137 - </div> 1.138 - --> 1.139 + <p> 1.140 + It is possible for elements to have multiple animations running that change the same property or properties. In this case the animations combine in a manner defined by the property. For example, animations on 'opacity' will add together and animations on 'transform' will have their transformation matrices multiplied. 1.141 + 1.142 + <div class="example"> 1.143 + <p style="display:none"> 1.144 + Example(s): 1.145 + 1.146 + <pre> 1.147 + @keyframes 'border-bloat' { 1.148 + from { 1.149 + border-width: 0; 1.150 + } 1.151 + to { 1.152 + border-width: 10px; 1.153 + } 1.154 + } 1.155 + 1.156 + @keyframes 'border-diet' { 1.157 + from { 1.158 + border-width: 4px; 1.159 + } 1.160 + to { 1.161 + border-width: 2px; 1.162 + } 1.163 + } 1.164 + 1.165 + div { 1.166 + animation-name: 'border-bloat', 'border-diet'; 1.167 + animation-duration: 10s, 4s; 1.168 + } 1.169 + </pre> 1.170 + <p> 1.171 + The above example has two animations executing on the same property, 'border-width'. The animations are additive. That is, the 1.172 + resulting value for the property will be the addition of the values from the 1.173 + two animations. 1.174 + 1.175 + <p> 1.176 + At time '0s' the element's border will be 4px wide (0px from 'border-bloat' plus 4px from 'border-diet'). 1.177 + At time '4s' the element's border will be 6px wide (4px from 'border-bloat' plus 2px from 'border-diet'). 1.178 + At time '10s' the element's border will be 10px wide (10px from 'border-bloat' and no addition from 1.179 + 'border-diet' as it is no longer executing). 1.180 + 1.181 + </div> 1.182 + --> 1.183 1.184 <h3 id=animation-duration-property><span class=secno>3.3. </span> The ‘<a 1.185 href="#animation-duration"><code 1.186 @@ -714,9 +729,14 @@ 1.187 <td>no 1.188 1.189 <tr> 1.190 - <th>Computed Value: 1.191 - 1.192 - <td>as specified 1.193 + <th>Animatable: 1.194 + 1.195 + <td>no 1.196 + 1.197 + <tr> 1.198 + <th>Percentages: 1.199 + 1.200 + <td>N/A 1.201 1.202 <tr> 1.203 <th>Media: 1.204 @@ -724,9 +744,9 @@ 1.205 <td>visual 1.206 1.207 <tr> 1.208 - <th>Animatable: 1.209 - 1.210 - <td>no 1.211 + <th>Computed Value: 1.212 + 1.213 + <td>as specified 1.214 1.215 <tr> 1.216 <th>Canonical Order: 1.217 @@ -793,9 +813,14 @@ 1.218 <td>no 1.219 1.220 <tr> 1.221 - <th>Computed Value: 1.222 - 1.223 - <td>as specified 1.224 + <th>Animatable: 1.225 + 1.226 + <td>no 1.227 + 1.228 + <tr> 1.229 + <th>Percentages: 1.230 + 1.231 + <td>N/A 1.232 1.233 <tr> 1.234 <th>Media: 1.235 @@ -803,9 +828,9 @@ 1.236 <td>visual 1.237 1.238 <tr> 1.239 - <th>Animatable: 1.240 - 1.241 - <td>no 1.242 + <th>Computed Value: 1.243 + 1.244 + <td>as specified 1.245 1.246 <tr> 1.247 <th>Canonical Order: 1.248 @@ -872,9 +897,14 @@ 1.249 <td>no 1.250 1.251 <tr> 1.252 - <th>Computed Value: 1.253 - 1.254 - <td>as specified 1.255 + <th>Animatable: 1.256 + 1.257 + <td>no 1.258 + 1.259 + <tr> 1.260 + <th>Percentages: 1.261 + 1.262 + <td>N/A 1.263 1.264 <tr> 1.265 <th>Media: 1.266 @@ -882,9 +912,9 @@ 1.267 <td>visual 1.268 1.269 <tr> 1.270 - <th>Animatable: 1.271 - 1.272 - <td>no 1.273 + <th>Computed Value: 1.274 + 1.275 + <td>as specified 1.276 1.277 <tr> 1.278 <th>Canonical Order: 1.279 @@ -933,9 +963,14 @@ 1.280 <td>no 1.281 1.282 <tr> 1.283 - <th>Computed Value: 1.284 - 1.285 - <td>as specified 1.286 + <th>Animatable: 1.287 + 1.288 + <td>no 1.289 + 1.290 + <tr> 1.291 + <th>Percentages: 1.292 + 1.293 + <td>N/A 1.294 1.295 <tr> 1.296 <th>Media: 1.297 @@ -943,9 +978,9 @@ 1.298 <td>visual 1.299 1.300 <tr> 1.301 - <th>Animatable: 1.302 - 1.303 - <td>no 1.304 + <th>Computed Value: 1.305 + 1.306 + <td>as specified 1.307 1.308 <tr> 1.309 <th>Canonical Order: 1.310 @@ -1023,9 +1058,14 @@ 1.311 <td>no 1.312 1.313 <tr> 1.314 - <th>Computed Value: 1.315 - 1.316 - <td>as specified 1.317 + <th>Animatable: 1.318 + 1.319 + <td>no 1.320 + 1.321 + <tr> 1.322 + <th>Percentages: 1.323 + 1.324 + <td>N/A 1.325 1.326 <tr> 1.327 <th>Media: 1.328 @@ -1033,9 +1073,9 @@ 1.329 <td>visual 1.330 1.331 <tr> 1.332 - <th>Animatable: 1.333 - 1.334 - <td>no 1.335 + <th>Computed Value: 1.336 + 1.337 + <td>as specified 1.338 1.339 <tr> 1.340 <th>Canonical Order: 1.341 @@ -1096,9 +1136,14 @@ 1.342 <td>no 1.343 1.344 <tr> 1.345 - <th>Computed Value: 1.346 - 1.347 - <td>as specified 1.348 + <th>Animatable: 1.349 + 1.350 + <td>no 1.351 + 1.352 + <tr> 1.353 + <th>Percentages: 1.354 + 1.355 + <td>N/A 1.356 1.357 <tr> 1.358 <th>Media: 1.359 @@ -1106,9 +1151,9 @@ 1.360 <td>visual 1.361 1.362 <tr> 1.363 - <th>Animatable: 1.364 - 1.365 - <td>no 1.366 + <th>Computed Value: 1.367 + 1.368 + <td>as specified 1.369 1.370 <tr> 1.371 <th>Canonical Order: 1.372 @@ -1210,9 +1255,14 @@ 1.373 <td>no 1.374 1.375 <tr> 1.376 - <th>Computed Value: 1.377 - 1.378 - <td>as specified 1.379 + <th>Animatable: 1.380 + 1.381 + <td>no 1.382 + 1.383 + <tr> 1.384 + <th>Percentages: 1.385 + 1.386 + <td>N/A 1.387 1.388 <tr> 1.389 <th>Media: 1.390 @@ -1220,9 +1270,9 @@ 1.391 <td>visual 1.392 1.393 <tr> 1.394 - <th>Animatable: 1.395 - 1.396 - <td>no 1.397 + <th>Computed Value: 1.398 + 1.399 + <td>as specified 1.400 1.401 <tr> 1.402 <th>Canonical Order: 1.403 @@ -1285,9 +1335,14 @@ 1.404 <td>see individual properties 1.405 1.406 <tr> 1.407 - <th>Computed Value: 1.408 - 1.409 - <td>see individual properties 1.410 + <th>Animatable: 1.411 + 1.412 + <td>no 1.413 + 1.414 + <tr> 1.415 + <th>Percentages: 1.416 + 1.417 + <td>N/A 1.418 1.419 <tr> 1.420 <th>Media: 1.421 @@ -1295,9 +1350,9 @@ 1.422 <td>visual 1.423 1.424 <tr> 1.425 - <th>Animatable: 1.426 - 1.427 - <td>no 1.428 + <th>Computed Value: 1.429 + 1.430 + <td>see individual properties 1.431 1.432 <tr> 1.433 <th>Canonical Order: 1.434 @@ -1402,7 +1457,6 @@ 1.435 <dt><code>cancelableArg</code> of type <code>boolean</code> 1.436 1.437 <dd> Specifies whether or not the event's default action can be prevented. 1.438 - 1.439 1.440 <dt><code>animationNameArg</code> of type <code>DOMString</code> 1.441 1.442 @@ -1518,7 +1572,6 @@ 1.443 floating point number between 0 and 1. If the value in the CSS style is 1.444 ‘<code class=css>from</code>’ this value will be 0, and if the value 1.445 in the CSS style is ‘<code class=css>to</code>’ this value will be 1. 1.446 - 1.447 1.448 <dt><code><dfn id=CSSKeyframeRule-style>style</dfn></code> of type 1.449 <code>CSSStyleDeclaration</code> 1.450 @@ -1646,7 +1699,7 @@ 1.451 Transitions.</cite></a> 3 April 2012. W3C Working Draft. (Work in 1.452 progress.) URL: <a 1.453 href="http://www.w3.org/TR/2012/WD-css3-transitions-20120403/">http://www.w3.org/TR/2012/WD-css3-transitions-20120403/</a> 1.454 - </dd> 1.455 + </dd> 1.456 <!----> 1.457 </dl> 1.458 <!--end-normative--> 1.459 @@ -1689,7 +1742,7 @@ 1.460 1.461 <td>no 1.462 1.463 - <td> 1.464 + <td>N/A 1.465 1.466 <td>visual 1.467 1.468 @@ -1706,7 +1759,7 @@ 1.469 1.470 <td>no 1.471 1.472 - <td> 1.473 + <td>N/A 1.474 1.475 <td>visual 1.476 1.477 @@ -1722,7 +1775,7 @@ 1.478 1.479 <td>no 1.480 1.481 - <td> 1.482 + <td>N/A 1.483 1.484 <td>visual 1.485 1.486 @@ -1739,7 +1792,7 @@ 1.487 1.488 <td>no 1.489 1.490 - <td> 1.491 + <td>N/A 1.492 1.493 <td>visual 1.494 1.495 @@ -1755,7 +1808,7 @@ 1.496 1.497 <td>no 1.498 1.499 - <td> 1.500 + <td>N/A 1.501 1.502 <td>visual 1.503 1.504 @@ -1770,7 +1823,7 @@ 1.505 1.506 <td>no 1.507 1.508 - <td> 1.509 + <td>N/A 1.510 1.511 <td>visual 1.512 1.513 @@ -1786,7 +1839,7 @@ 1.514 1.515 <td>no 1.516 1.517 - <td> 1.518 + <td>N/A 1.519 1.520 <td>visual 1.521 1.522 @@ -1807,7 +1860,7 @@ 1.523 1.524 <td>see individual properties 1.525 1.526 - <td> 1.527 + <td>N/A 1.528 1.529 <td>visual 1.530 1.531 @@ -1829,7 +1882,7 @@ 1.532 1.533 <td>no 1.534 1.535 - <td> 1.536 + <td>N/A 1.537 1.538 <td>visual 1.539 </table>
2.1 --- a/css3-animations/Overview.src.html Thu Sep 20 10:14:24 2012 -0700 2.2 +++ b/css3-animations/Overview.src.html Thu Sep 20 10:33:20 2012 -0700 2.3 @@ -452,14 +452,17 @@ 2.4 <th>Inherited: 2.5 <td>no 2.6 <tr> 2.7 - <th>Computed Value: 2.8 - <td>As specified 2.9 + <th>Animatable: 2.10 + <td>no 2.11 + <tr> 2.12 + <th>Percentages: 2.13 + <td>N/A 2.14 <tr> 2.15 <th>Media: 2.16 <td>visual 2.17 <tr> 2.18 - <th>Animatable: 2.19 - <td>no 2.20 + <th>Computed Value: 2.21 + <td>As specified 2.22 <tr> 2.23 <th>Canonical Order: 2.24 <td><abbr title="follows order of property value definition">per grammar</abbr> 2.25 @@ -536,14 +539,17 @@ 2.26 <th>Inherited: 2.27 <td>no 2.28 <tr> 2.29 - <th>Computed Value: 2.30 - <td>as specified 2.31 + <th>Animatable: 2.32 + <td>no 2.33 + <tr> 2.34 + <th>Percentages: 2.35 + <td>N/A 2.36 <tr> 2.37 <th>Media: 2.38 <td>visual 2.39 <tr> 2.40 - <th>Animatable: 2.41 - <td>no 2.42 + <th>Computed Value: 2.43 + <td>as specified 2.44 <tr> 2.45 <th>Canonical Order: 2.46 <td><abbr title="follows order of property value definition">per grammar</abbr> 2.47 @@ -601,14 +607,17 @@ 2.48 <th>Inherited: 2.49 <td>no 2.50 <tr> 2.51 - <th>Computed Value: 2.52 - <td>as specified 2.53 + <th>Animatable: 2.54 + <td>no 2.55 + <tr> 2.56 + <th>Percentages: 2.57 + <td>N/A 2.58 <tr> 2.59 <th>Media: 2.60 <td>visual 2.61 <tr> 2.62 - <th>Animatable: 2.63 - <td>no 2.64 + <th>Computed Value: 2.65 + <td>as specified 2.66 <tr> 2.67 <th>Canonical Order: 2.68 <td><abbr title="follows order of property value definition">per grammar</abbr> 2.69 @@ -657,14 +666,17 @@ 2.70 <th>Inherited: 2.71 <td>no 2.72 <tr> 2.73 - <th>Computed Value: 2.74 - <td>as specified 2.75 + <th>Animatable: 2.76 + <td>no 2.77 + <tr> 2.78 + <th>Percentages: 2.79 + <td>N/A 2.80 <tr> 2.81 <th>Media: 2.82 <td>visual 2.83 <tr> 2.84 - <th>Animatable: 2.85 - <td>no 2.86 + <th>Computed Value: 2.87 + <td>as specified 2.88 <tr> 2.89 <th>Canonical Order: 2.90 <td><abbr title="follows order of property value definition">per grammar</abbr> 2.91 @@ -697,14 +709,17 @@ 2.92 <th>Inherited: 2.93 <td>no 2.94 <tr> 2.95 - <th>Computed Value: 2.96 - <td>as specified 2.97 + <th>Animatable: 2.98 + <td>no 2.99 + <tr> 2.100 + <th>Percentages: 2.101 + <td>N/A 2.102 <tr> 2.103 <th>Media: 2.104 <td>visual 2.105 <tr> 2.106 - <th>Animatable: 2.107 - <td>no 2.108 + <th>Computed Value: 2.109 + <td>as specified 2.110 <tr> 2.111 <th>Canonical Order: 2.112 <td><abbr title="follows order of property value definition">per grammar</abbr> 2.113 @@ -766,14 +781,17 @@ 2.114 <th>Inherited: 2.115 <td>no 2.116 <tr> 2.117 - <th>Computed Value: 2.118 - <td>as specified 2.119 + <th>Animatable: 2.120 + <td>no 2.121 + <tr> 2.122 + <th>Percentages: 2.123 + <td>N/A 2.124 <tr> 2.125 <th>Media: 2.126 <td>visual 2.127 <tr> 2.128 - <th>Animatable: 2.129 - <td>no 2.130 + <th>Computed Value: 2.131 + <td>as specified 2.132 <tr> 2.133 <th>Canonical Order: 2.134 <td><abbr title="follows order of property value definition">per grammar</abbr> 2.135 @@ -815,14 +833,17 @@ 2.136 <th>Inherited: 2.137 <td>no 2.138 <tr> 2.139 - <th>Computed Value: 2.140 - <td>as specified 2.141 + <th>Animatable: 2.142 + <td>no 2.143 + <tr> 2.144 + <th>Percentages: 2.145 + <td>N/A 2.146 <tr> 2.147 <th>Media: 2.148 <td>visual 2.149 <tr> 2.150 - <th>Animatable: 2.151 - <td>no 2.152 + <th>Computed Value: 2.153 + <td>as specified 2.154 <tr> 2.155 <th>Canonical Order: 2.156 <td><abbr title="follows order of property value definition">per grammar</abbr> 2.157 @@ -892,14 +913,17 @@ 2.158 <th>Inherited: 2.159 <td>no 2.160 <tr> 2.161 - <th>Computed Value: 2.162 - <td>as specified 2.163 + <th>Animatable: 2.164 + <td>no 2.165 + <tr> 2.166 + <th>Percentages: 2.167 + <td>N/A 2.168 <tr> 2.169 <th>Media: 2.170 <td>visual 2.171 <tr> 2.172 - <th>Animatable: 2.173 - <td>no 2.174 + <th>Computed Value: 2.175 + <td>as specified 2.176 <tr> 2.177 <th>Canonical Order: 2.178 <td><abbr title="follows order of property value definition">per grammar</abbr> 2.179 @@ -954,14 +978,17 @@ 2.180 <th>Inherited: 2.181 <td>see individual properties 2.182 <tr> 2.183 - <th>Computed Value: 2.184 - <td>see individual properties 2.185 + <th>Animatable: 2.186 + <td>no 2.187 + <tr> 2.188 + <th>Percentages: 2.189 + <td>N/A 2.190 <tr> 2.191 <th>Media: 2.192 <td>visual 2.193 <tr> 2.194 - <th>Animatable: 2.195 - <td>no 2.196 + <th>Computed Value: 2.197 + <td>see individual properties 2.198 <tr> 2.199 <th>Canonical Order: 2.200 <td><abbr title="follows order of property value definition">per grammar</abbr>