changeset
[css3-transitions][css3-animations] Make it clear that the comma-separated items in the transition and animation shorthands don't themselves contain comma-separated items (which, if you read the grammar literally, they did). Fixes issue raised in http://lists.w3.org/Archives/Public/www-style/2012Sep/0375.html .
Thu, 20 Sep 2012 10:37:35 -0700
- author
- L. David Baron <dbaron@dbaron.org>
- date
- Thu, 20 Sep 2012 10:37:35 -0700
- changeset 6736
- 096a42f389d8
- parent 6735
- 791d177bd39c
- child 6737
- ef8f9efb1230
[css3-transitions][css3-animations] Make it clear that the comma-separated items in the transition and animation shorthands don't themselves contain comma-separated items (which, if you read the grammar literally, they did). Fixes issue raised in http://lists.w3.org/Archives/Public/www-style/2012Sep/0375.html .
1.1 --- a/css3-animations/Overview.html Thu Sep 20 10:33:20 2012 -0700 1.2 +++ b/css3-animations/Overview.html Thu Sep 20 10:37:35 2012 -0700 1.3 @@ -18,6 +18,9 @@ 1.4 <link href="../default.css" rel=stylesheet type="text/css"> 1.5 <link href="http://www.w3.org/StyleSheets/TR/W3C-ED.css" rel=stylesheet 1.6 type="text/css"> 1.7 + <style type="text/css"> 1.8 + div.prod { margin: 1em 2em; } 1.9 + </style> 1.10 1.11 <body> 1.12 <div class=head> <!--begin-logo--> 1.13 @@ -604,7 +607,8 @@ 1.14 <tr> 1.15 <th><a href="#values">Value</a>: 1.16 1.17 - <td>[ none | IDENT ] [, [ none | IDENT ] ]* 1.18 + <td><single-animation-name> [ ‘<code class=css>,</code>’ 1.19 + <single-animation-name> ]* 1.20 1.21 <tr> 1.22 <th>Initial: 1.23 @@ -647,6 +651,10 @@ 1.24 <td><abbr title="follows order of property value definition">per 1.25 grammar</abbr> 1.26 </table> 1.27 + 1.28 + <div class=prod> <dfn 1.29 + id=ltsingle-animation-namegt><single-animation-name></dfn> = none | 1.30 + <IDENT></div> 1.31 <!-- 1.32 <p> 1.33 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.34 @@ -789,13 +797,8 @@ 1.35 <tr> 1.36 <th><a href="#values">Value</a>: 1.37 1.38 - <td> [ ease | linear | ease-in | ease-out | ease-in-out | step-start | 1.39 - step-end | steps(<number> [, [ start | end ] ]?) | 1.40 - cubic-bezier(<number>, <number>, <number>, 1.41 - <number>) ] [, [ ease | linear | ease-in | ease-out | ease-in-out 1.42 - | step-start | step-end | steps(<number> [, [ start | end ] ]?) | 1.43 - cubic-bezier(<number>, <number>, <number>, 1.44 - <number>) ] ]* 1.45 + <td><single-animation-timing-function> [ ‘<code 1.46 + class=css>,</code>’ <single-animation-timing-function> ]* 1.47 1.48 <tr> 1.49 <th>Initial: 1.50 @@ -839,6 +842,13 @@ 1.51 grammar</abbr> 1.52 </table> 1.53 1.54 + <div class=prod> <dfn 1.55 + id=ltsingle-animation-timing-functiongt><single-animation-timing-function></dfn> 1.56 + = ease | linear | ease-in | ease-out | ease-in-out | step-start | step-end 1.57 + | steps(<number> [, [ start | end ] ]?) | 1.58 + cubic-bezier(<number>, <number>, <number>, 1.59 + <number>)</div> 1.60 + 1.61 <p> For a keyframed animation, the ‘<a 1.62 href="#animation-timing-function"><code 1.63 class=property>animation-timing-function</code></a>’ applies between 1.64 @@ -879,7 +889,8 @@ 1.65 <tr> 1.66 <th><a href="#values">Value</a>: 1.67 1.68 - <td> [ infinite | <number> ] [, [ infinite | <number> ] ]* 1.69 + <td><single-animation-iteration-count> [ ‘<code 1.70 + class=css>,</code>’ <single-animation-iteration-count> ]* 1.71 1.72 <tr> 1.73 <th>Initial: 1.74 @@ -923,6 +934,10 @@ 1.75 grammar</abbr> 1.76 </table> 1.77 1.78 + <div class=prod> <dfn 1.79 + id=ltsingle-animation-iteration-countgt><single-animation-iteration-count></dfn> 1.80 + = infinite | <number></div> 1.81 + 1.82 <h3 id=animation-direction-property><span class=secno>3.6. </span> The 1.83 ‘<a href="#animation-direction"><code 1.84 class=property>animation-direction</code></a>’ Property</h3> 1.85 @@ -944,8 +959,8 @@ 1.86 <tr> 1.87 <th><a href="#values">Value</a>: 1.88 1.89 - <td> [ normal | reverse | alternate | alternate-reverse ] [, [ normal | 1.90 - reverse | alternate | alternate-reverse ] ]* 1.91 + <td><single-animation-direction> [ ‘<code class=css>,</code>’ 1.92 + <single-animation-direction> ]* 1.93 1.94 <tr> 1.95 <th>Initial: 1.96 @@ -989,6 +1004,10 @@ 1.97 grammar</abbr> 1.98 </table> 1.99 1.100 + <div class=prod> <dfn 1.101 + id=ltsingle-animation-directiongt><single-animation-direction></dfn> 1.102 + = normal | reverse | alternate | alternate-reverse</div> 1.103 + 1.104 <dl> 1.105 <dt><dfn id=normal>normal</dfn> 1.106 1.107 @@ -1040,7 +1059,8 @@ 1.108 <tr> 1.109 <th><a href="#values">Value</a>: 1.110 1.111 - <td> [ running | paused ] [, [ running | paused ] ]* 1.112 + <td><single-animation-play-state> [ ‘<code class=css>,</code>’ 1.113 + <single-animation-play-state> ]* 1.114 1.115 <tr> 1.116 <th>Initial: 1.117 @@ -1084,6 +1104,10 @@ 1.118 grammar</abbr> 1.119 </table> 1.120 1.121 + <div class=prod> <dfn 1.122 + id=ltsingle-animation-play-stategt><single-animation-play-state></dfn> 1.123 + = running | paused</div> 1.124 + 1.125 <h3 id=animation-delay-property><span class=secno>3.8. </span> The ‘<a 1.126 href="#animation-delay"><code class=property>animation-delay</code></a>’ 1.127 Property</h3> 1.128 @@ -1236,8 +1260,8 @@ 1.129 <tr> 1.130 <th><a href="#values">Value</a>: 1.131 1.132 - <td> [ none | forwards | backwards | both ] [, [ none | forwards | 1.133 - backwards | both ] ]* 1.134 + <td><single-animation-fill-mode> [ ‘<code class=css>,</code>’ 1.135 + <single-animation-fill-mode> ]* 1.136 1.137 <tr> 1.138 <th>Initial: 1.139 @@ -1281,6 +1305,10 @@ 1.140 grammar</abbr> 1.141 </table> 1.142 1.143 + <div class=prod> <dfn 1.144 + id=ltsingle-animation-fill-modegt><single-animation-fill-mode></dfn> 1.145 + = none | forwards | backwards | both</div> 1.146 + 1.147 <h3 id=animation-shorthand-property><span class=secno>3.10. </span> The 1.148 ‘<a href="#animation"><code class=property>animation</code></a>’ 1.149 Shorthand Property</h3> 1.150 @@ -1289,18 +1317,6 @@ 1.151 class=property>animation</code></a>’ shorthand property combines seven 1.152 of the animation properties into a single property. 1.153 1.154 - <p> Note that order is important in this property. The first value that can 1.155 - be parsed as a <var><time></var> is assigned to the ‘<a 1.156 - href="#animation-duration"><code 1.157 - class=property>animation-duration</code></a>’. The second value that can 1.158 - be parsed as a <var><time></var> is assigned to ‘<a 1.159 - href="#animation-delay"><code 1.160 - class=property>animation-delay</code></a>’. 1.161 - 1.162 - <p class=issue> An alternative proposal is to accept the font shorthand 1.163 - approach of using a "/" character between the values of the same type. 1.164 - e.g. 2s/4s would mean a duration of 2 seconds and a delay of 4 seconds. 1.165 - 1.166 <table class=propdef> 1.167 <tbody> 1.168 <tr> 1.169 @@ -1311,13 +1327,8 @@ 1.170 <tr> 1.171 <th><a href="#values">Value</a>: 1.172 1.173 - <td> [ <animation-name> || <animation-duration> || 1.174 - <animation-timing-function> || <animation-delay> || 1.175 - <animation-iteration-count> || <animation-direction> || 1.176 - <animation-fill-mode> ] [, [ <animation-name> || 1.177 - <animation-duration> || <animation-timing-function> || 1.178 - <animation-delay> || <animation-iteration-count> || 1.179 - <animation-direction> || <animation-fill-mode> ] ]* 1.180 + <td><single-animation> [ ‘<code class=css>,</code>’ 1.181 + <single-animation> ]* 1.182 1.183 <tr> 1.184 <th>Initial: 1.185 @@ -1361,6 +1372,26 @@ 1.186 grammar</abbr> 1.187 </table> 1.188 1.189 + <div class=prod> <dfn 1.190 + id=ltsingle-animationgt><single-animation></dfn> = 1.191 + <single-animation-name> || <time> || 1.192 + <single-animation-timing-function> || <time> || 1.193 + <single-animation-iteration-count> || 1.194 + <single-animation-direction> || <single-animation-fill-mode></div> 1.195 + 1.196 + <p> Note that order is important within the items in this property: the 1.197 + first value that can be parsed as a <var><time></var> is assigned to 1.198 + the transition-duration, and the second value that can be parsed as a 1.199 + <var><time></var> is assigned to transition-delay. 1.200 + 1.201 + <p class=issue> An alternative proposal is to accept the font shorthand 1.202 + approach of using a "/" character between the values of the same type. 1.203 + e.g. 2s/4s would mean a duration of 2 seconds and a delay of 4 seconds. 1.204 + 1.205 + <p class=issue> Need to also explain how order is important in terms of 1.206 + animation-name versus keywords, and probably also adjust the canonical 1.207 + order to match. 1.208 + 1.209 <h2 id=animation-events><span class=secno>4. </span> Animation Events</h2> 1.210 1.211 <p> Several animation related events are available through the <a 1.212 @@ -1678,8 +1709,8 @@ 1.213 1.214 <h2 id=acknowledgments><span class=secno>6. </span>Acknowledgments</h2> 1.215 1.216 - <p>Thanks especially to the feedback from Tab Atkins, Estelle Weyl, and 1.217 - all the rest of the <a 1.218 + <p>Thanks especially to the feedback from Tab Atkins, Carine Bournez, 1.219 + Estelle Weyl, and all the rest of the <a 1.220 href="http://lists.w3.org/Archives/Public/www-style/">www-style</a> 1.221 community. 1.222 1.223 @@ -1750,8 +1781,8 @@ 1.224 <th><a class=property 1.225 href="#animation-direction">animation-direction</a> 1.226 1.227 - <td>[ normal | reverse | alternate | alternate-reverse ] [, [ normal | 1.228 - reverse | alternate | alternate-reverse ] ]* 1.229 + <td><single-animation-direction> [ ‘,’ 1.230 + <single-animation-direction> ]* 1.231 1.232 <td>‘normal’ 1.233 1.234 @@ -1783,8 +1814,8 @@ 1.235 <th><a class=property 1.236 href="#animation-fill-mode">animation-fill-mode</a> 1.237 1.238 - <td>[ none | forwards | backwards | both ] [, [ none | forwards | 1.239 - backwards | both ] ]* 1.240 + <td><single-animation-fill-mode> [ ‘,’ 1.241 + <single-animation-fill-mode> ]* 1.242 1.243 <td>‘none’ 1.244 1.245 @@ -1800,7 +1831,8 @@ 1.246 <th><a class=property 1.247 href="#animation-iteration-count">animation-iteration-count</a> 1.248 1.249 - <td>[ infinite | <number> ] [, [ infinite | <number> ] ]* 1.250 + <td><single-animation-iteration-count> [ ‘,’ 1.251 + <single-animation-iteration-count> ]* 1.252 1.253 <td>‘1’ 1.254 1.255 @@ -1815,7 +1847,8 @@ 1.256 <tr> 1.257 <th><a class=property href="#animation-name">animation-name</a> 1.258 1.259 - <td>[ none | IDENT ] [, [ none | IDENT ] ]* 1.260 + <td><single-animation-name> [ ‘,’ 1.261 + <single-animation-name> ]* 1.262 1.263 <td>‘none’ 1.264 1.265 @@ -1831,7 +1864,8 @@ 1.266 <th><a class=property 1.267 href="#animation-play-state">animation-play-state</a> 1.268 1.269 - <td>[ running | paused ] [, [ running | paused ] ]* 1.270 + <td><single-animation-play-state> [ ‘,’ 1.271 + <single-animation-play-state> ]* 1.272 1.273 <td>‘running’ 1.274 1.275 @@ -1846,13 +1880,7 @@ 1.276 <tr> 1.277 <th><a class=property href="#animation">animation</a> 1.278 1.279 - <td>[ <animation-name> || <animation-duration> || 1.280 - <animation-timing-function> || <animation-delay> || 1.281 - <animation-iteration-count> || <animation-direction> || 1.282 - <animation-fill-mode> ] [, [ <animation-name> || 1.283 - <animation-duration> || <animation-timing-function> || 1.284 - <animation-delay> || <animation-iteration-count> || 1.285 - <animation-direction> || <animation-fill-mode> ] ]* 1.286 + <td><single-animation> [ ‘,’ <single-animation> ]* 1.287 1.288 <td>see individual properties 1.289 1.290 @@ -1868,13 +1896,8 @@ 1.291 <th><a class=property 1.292 href="#animation-timing-function">animation-timing-function</a> 1.293 1.294 - <td>[ ease | linear | ease-in | ease-out | ease-in-out | step-start | 1.295 - step-end | steps(<number> [, [ start | end ] ]?) | 1.296 - cubic-bezier(<number>, <number>, <number>, 1.297 - <number>) ] [, [ ease | linear | ease-in | ease-out | 1.298 - ease-in-out | step-start | step-end | steps(<number> [, [ start 1.299 - | end ] ]?) | cubic-bezier(<number>, <number>, 1.300 - <number>, <number>) ] ]* 1.301 + <td><single-animation-timing-function> [ ‘,’ 1.302 + <single-animation-timing-function> ]* 1.303 1.304 <td>‘ease’ 1.305 1.306 @@ -1980,6 +2003,32 @@ 1.307 1.308 <li>reverse, <a href="#reverse" title=reverse><strong>3.6.</strong></a> 1.309 1.310 + <li><single-animation>, <a href="#ltsingle-animationgt" 1.311 + title="<single-animation>"><strong>3.10.</strong></a> 1.312 + 1.313 + <li><single-animation-direction>, <a 1.314 + href="#ltsingle-animation-directiongt" 1.315 + title="<single-animation-direction>"><strong>3.6.</strong></a> 1.316 + 1.317 + <li><single-animation-fill-mode>, <a 1.318 + href="#ltsingle-animation-fill-modegt" 1.319 + title="<single-animation-fill-mode>"><strong>3.9.</strong></a> 1.320 + 1.321 + <li><single-animation-iteration-count>, <a 1.322 + href="#ltsingle-animation-iteration-countgt" 1.323 + title="<single-animation-iteration-count>"><strong>3.5.</strong></a> 1.324 + 1.325 + <li><single-animation-name>, <a href="#ltsingle-animation-namegt" 1.326 + title="<single-animation-name>"><strong>3.2.</strong></a> 1.327 + 1.328 + <li><single-animation-play-state>, <a 1.329 + href="#ltsingle-animation-play-stategt" 1.330 + title="<single-animation-play-state>"><strong>3.7.</strong></a> 1.331 + 1.332 + <li><single-animation-timing-function>, <a 1.333 + href="#ltsingle-animation-timing-functiongt" 1.334 + title="<single-animation-timing-function>"><strong>3.4.</strong></a> 1.335 + 1.336 <li>style, <a href="#CSSKeyframeRule-style" 1.337 title=style><strong>5.2.2.</strong></a> 1.338 </ul>
2.1 --- a/css3-animations/Overview.src.html Thu Sep 20 10:33:20 2012 -0700 2.2 +++ b/css3-animations/Overview.src.html Thu Sep 20 10:37:35 2012 -0700 2.3 @@ -5,6 +5,9 @@ 2.4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 2.5 <link rel="stylesheet" type="text/css" href="../default.css"> 2.6 <link rel="stylesheet" type="text/css" href="http://www.w3.org/StyleSheets/TR/W3C-ED.css"> 2.7 + <style type="text/css"> 2.8 + div.prod { margin: 1em 2em; } 2.9 + </style> 2.10 </head> 2.11 2.12 <body> 2.13 @@ -441,7 +444,7 @@ 2.14 <td><dfn>animation-name</dfn> 2.15 <tr> 2.16 <th><a href="#values">Value</a>: 2.17 - <td>[ none | IDENT ] [, [ none | IDENT ] ]* 2.18 + <td><single-animation-name> [ ',' <single-animation-name> ]* 2.19 <tr> 2.20 <th>Initial: 2.21 <td>''none'' 2.22 @@ -468,6 +471,10 @@ 2.23 <td><abbr title="follows order of property value definition">per grammar</abbr> 2.24 </table> 2.25 2.26 + <div class="prod"> 2.27 + <dfn><single-animation-name></dfn> = none | <IDENT> 2.28 + </div> 2.29 + 2.30 <!-- 2.31 <p> 2.32 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. 2.33 @@ -580,23 +587,7 @@ 2.34 <td><dfn>animation-timing-function</dfn> 2.35 <tr> 2.36 <th><a href="#values">Value</a>: 2.37 - <td> 2.38 - [ 2.39 - ease | linear | ease-in | ease-out | ease-in-out | 2.40 - step-start | step-end | 2.41 - steps(<number> [, [ start | end ] ]?) | 2.42 - cubic-bezier(<number>, <number>, <number>, 2.43 - <number>) 2.44 - ] 2.45 - [, 2.46 - [ 2.47 - ease | linear | ease-in | ease-out | ease-in-out | 2.48 - step-start | step-end | 2.49 - steps(<number> [, [ start | end ] ]?) | 2.50 - cubic-bezier(<number>, <number>, <number>, 2.51 - <number>) 2.52 - ] 2.53 - ]* 2.54 + <td><single-animation-timing-function> [ ',' <single-animation-timing-function> ]* 2.55 <tr> 2.56 <th>Initial: 2.57 <td>''ease'' 2.58 @@ -623,6 +614,15 @@ 2.59 <td><abbr title="follows order of property value definition">per grammar</abbr> 2.60 </table> 2.61 2.62 + <div class="prod"> 2.63 + <dfn><single-animation-timing-function></dfn> = 2.64 + ease | linear | ease-in | ease-out | ease-in-out | 2.65 + step-start | step-end | 2.66 + steps(<number> [, [ start | end ] ]?) | 2.67 + cubic-bezier(<number>, <number>, <number>, 2.68 + <number>) 2.69 + </div> 2.70 + 2.71 <p> 2.72 For a keyframed animation, 2.73 the 'animation-timing-function' applies between keyframes, 2.74 @@ -654,8 +654,7 @@ 2.75 <td><dfn>animation-iteration-count</dfn> 2.76 <tr> 2.77 <th><a href="#values">Value</a>: 2.78 - <td> [ infinite | <number> ] 2.79 - [, [ infinite | <number> ] ]* 2.80 + <td><single-animation-iteration-count> [ ',' <single-animation-iteration-count> ]* 2.81 <tr> 2.82 <th>Initial: 2.83 <td>''1'' 2.84 @@ -682,6 +681,10 @@ 2.85 <td><abbr title="follows order of property value definition">per grammar</abbr> 2.86 </table> 2.87 2.88 + <div class="prod"> 2.89 + <dfn><single-animation-iteration-count></dfn> = 2.90 + infinite | <number> 2.91 + </div> 2.92 2.93 <h3 id="animation-direction-property"> 2.94 The 'animation-direction' Property</h3> 2.95 @@ -697,8 +700,7 @@ 2.96 <td><dfn>animation-direction</dfn> 2.97 <tr> 2.98 <th><a href="#values">Value</a>: 2.99 - <td> [ normal | reverse | alternate | alternate-reverse ] 2.100 - [, [ normal | reverse | alternate | alternate-reverse ] ]* 2.101 + <td><single-animation-direction> [ ',' <single-animation-direction> ]* 2.102 <tr> 2.103 <th>Initial: 2.104 <td>''normal'' 2.105 @@ -725,6 +727,11 @@ 2.106 <td><abbr title="follows order of property value definition">per grammar</abbr> 2.107 </table> 2.108 2.109 + <div class="prod"> 2.110 + <dfn><single-animation-direction></dfn> = 2.111 + normal | reverse | alternate | alternate-reverse 2.112 + </div> 2.113 + 2.114 <dl> 2.115 <dt><dfn>normal</dfn> 2.116 <dd> 2.117 @@ -769,8 +776,7 @@ 2.118 <td><dfn>animation-play-state</dfn> 2.119 <tr> 2.120 <th><a href="#values">Value</a>: 2.121 - <td> [ running | paused ] 2.122 - [, [ running | paused ] ]* 2.123 + <td><single-animation-play-state> [ ',' <single-animation-play-state> ]* 2.124 <tr> 2.125 <th>Initial: 2.126 <td>''running'' 2.127 @@ -797,6 +803,10 @@ 2.128 <td><abbr title="follows order of property value definition">per grammar</abbr> 2.129 </table> 2.130 2.131 + <div class="prod"> 2.132 + <dfn><single-animation-play-state></dfn> = 2.133 + running | paused 2.134 + </div> 2.135 2.136 <h3 id="animation-delay-property"> 2.137 The 'animation-delay' Property</h3> 2.138 @@ -901,8 +911,7 @@ 2.139 <td><dfn>animation-fill-mode</dfn> 2.140 <tr> 2.141 <th><a href="#values">Value</a>: 2.142 - <td> [ none | forwards | backwards | both ] 2.143 - [, [ none | forwards | backwards | both ] ]* 2.144 + <td><single-animation-fill-mode> [ ',' <single-animation-fill-mode> ]* 2.145 <tr> 2.146 <th>Initial: 2.147 <td>''none'' 2.148 @@ -929,6 +938,10 @@ 2.149 <td><abbr title="follows order of property value definition">per grammar</abbr> 2.150 </table> 2.151 2.152 + <div class="prod"> 2.153 + <dfn><single-animation-fill-mode></dfn> = 2.154 + none | forwards | backwards | both 2.155 + </div> 2.156 2.157 <h3 id="animation-shorthand-property"> 2.158 The 'animation' Shorthand Property 2.159 @@ -936,38 +949,13 @@ 2.160 <p> 2.161 The 'animation' shorthand property combines seven of the animation properties into a single property. 2.162 2.163 - <p> 2.164 - Note that order is important in this property. 2.165 - The first value that can be parsed as a <var><time></var> is assigned to the 'animation-duration'. 2.166 - The second value that can be parsed as a <var><time></var> is assigned to 'animation-delay'. 2.167 - 2.168 - <p class="issue"> 2.169 - An alternative proposal is to accept the font shorthand approach 2.170 - of using a "/" character between the values of the same type. 2.171 - e.g. 2s/4s would mean a duration of 2 seconds and a delay of 4 seconds. 2.172 - 2.173 <table class=propdef> 2.174 <tr> 2.175 <th>Name:</th> 2.176 <td><dfn>animation</dfn> 2.177 <tr> 2.178 <th><a href="#values">Value</a>: 2.179 - <td> 2.180 - [ 2.181 - <animation-name> || <animation-duration> || 2.182 - <animation-timing-function> || <animation-delay> || 2.183 - <animation-iteration-count> || <animation-direction> || 2.184 - <animation-fill-mode> 2.185 - ] 2.186 - [, 2.187 - [ 2.188 - <animation-name> || <animation-duration> || 2.189 - <animation-timing-function> || <animation-delay> || 2.190 - <animation-iteration-count> || <animation-direction> || 2.191 - <animation-fill-mode> 2.192 - ] 2.193 - ]* 2.194 - 2.195 + <td><single-animation> [ ',' <single-animation> ]* 2.196 <tr> 2.197 <th>Initial: 2.198 <td>see individual properties 2.199 @@ -994,6 +982,34 @@ 2.200 <td><abbr title="follows order of property value definition">per grammar</abbr> 2.201 </table> 2.202 2.203 + <div class="prod"> 2.204 + <dfn><single-animation></dfn> = 2.205 + <single-animation-name> || 2.206 + <time> || 2.207 + <single-animation-timing-function> || 2.208 + <time> || 2.209 + <single-animation-iteration-count> || 2.210 + <single-animation-direction> || 2.211 + <single-animation-fill-mode> 2.212 + </div> 2.213 + 2.214 + <p> 2.215 + Note that order is important within the items in this property: 2.216 + the first value that can be parsed as a <var><time></var> is assigned to the 2.217 + transition-duration, 2.218 + and the second value that can be parsed as a <var><time></var> is assigned to 2.219 + transition-delay. 2.220 + </p> 2.221 + 2.222 + <p class="issue"> 2.223 + An alternative proposal is to accept the font shorthand approach 2.224 + of using a "/" character between the values of the same type. 2.225 + e.g. 2s/4s would mean a duration of 2 seconds and a delay of 4 seconds. 2.226 + 2.227 + <p class="issue"> 2.228 + Need to also explain how order is important in terms of animation-name 2.229 + versus keywords, and probably also adjust the canonical order to 2.230 + match. 2.231 2.232 <h2 id="animation-events"> 2.233 Animation Events</h2> 2.234 @@ -1332,6 +1348,7 @@ 2.235 2.236 <p>Thanks especially to the feedback from 2.237 Tab Atkins, 2.238 +Carine Bournez, 2.239 Estelle Weyl, 2.240 and all the rest of the 2.241 <a href="http://lists.w3.org/Archives/Public/www-style/">www-style</a> community.
3.1 --- a/css3-transitions/Overview.html Thu Sep 20 10:33:20 2012 -0700 3.2 +++ b/css3-transitions/Overview.html Thu Sep 20 10:37:35 2012 -0700 3.3 @@ -25,6 +25,7 @@ 3.4 padding: 0.2em 1em; 3.5 border: 1px solid black; 3.6 } 3.7 + div.prod { margin: 1em 2em; } 3.8 </style> 3.9 <link href="http://www.w3.org/StyleSheets/TR/W3C-ED.css" rel=stylesheet 3.10 type="text/css"> 3.11 @@ -353,8 +354,8 @@ 3.12 <tr> 3.13 <td> <em>Value:</em> 3.14 3.15 - <td> none | [ all | <IDENT> ] [ ‘<code class=css>,</code>’ [ 3.16 - all | <IDENT> ] ]* 3.17 + <td> none | <single-transition-property> [ ‘<code 3.18 + class=css>,</code>’ <single-transition-property> ]* 3.19 3.20 <tr> 3.21 <td> <em>Initial:</em> 3.22 @@ -398,6 +399,10 @@ 3.23 grammar</abbr> 3.24 </table> 3.25 3.26 + <div class=prod> <dfn 3.27 + id=ltsingle-transition-propertygt><single-transition-property></dfn> 3.28 + = all | <IDENT></div> 3.29 + 3.30 <p> A value of ‘<code class=property>none</code>’ means that no 3.31 property will transition. Otherwise, a list of properties to be 3.32 transitioned, or the keyword ‘<code class=property>all</code>’ which 3.33 @@ -576,13 +581,8 @@ 3.34 <tr> 3.35 <td> <em>Value:</em> 3.36 3.37 - <td> [ ease | linear | ease-in | ease-out | ease-in-out | step-start | 3.38 - step-end | steps(<integer>[, [ start | end ] ]?) | 3.39 - cubic-bezier(<number>, <number>, <number>, 3.40 - <number>) ] [, [ ease | linear | ease-in | ease-out | ease-in-out 3.41 - | step-start | step-end | steps(<number>[, [ start | end ] ]?) | 3.42 - cubic-bezier(<number>, <number>, <number>, 3.43 - <number>) ] ]* 3.44 + <td> <single-transition-timing-function> [ ‘<code 3.45 + class=css>,</code>’ <single-transition-timing-function> ]* 3.46 3.47 <tr> 3.48 <td> <em>Initial:</em> 3.49 @@ -626,6 +626,13 @@ 3.50 grammar</abbr> 3.51 </table> 3.52 3.53 + <div class=prod> <dfn 3.54 + id=ltsingle-transition-timing-functiongt><single-transition-timing-function></dfn> 3.55 + = ease | linear | ease-in | ease-out | ease-in-out | step-start | step-end 3.56 + | steps(<integer>[, [ start | end ] ]?) | 3.57 + cubic-bezier(<number>, <number>, <number>, 3.58 + <number>)</div> 3.59 + 3.60 <p> The timing functions have the following definitions. 3.61 3.62 <dl> 3.63 @@ -771,14 +778,6 @@ 3.64 shorthand property combines the four properties described above into a 3.65 single property. 3.66 3.67 - <p> Note that order is important in this property. The first value that can 3.68 - be parsed as a time is assigned to the transition-duration. The second 3.69 - value that can be parsed as a time is assigned to transition-delay. 3.70 - 3.71 - <p class=issue> An alternative proposal is to accept the font shorthand 3.72 - approach of using a "/" character between the values of the same type. 3.73 - e.g. 2s/4s would mean a duration of 2 seconds and a delay of 4 seconds. 3.74 - 3.75 <table class=propdef> 3.76 <tbody> 3.77 <tr> 3.78 @@ -789,22 +788,8 @@ 3.79 <tr> 3.80 <td> <em>Value:</em> 3.81 3.82 - <td> [<‘<a href="#transition-property"><code 3.83 - class=property>transition-property</code></a>’> || <‘<a 3.84 - href="#transition-duration"><code 3.85 - class=property>transition-duration</code></a>’> || <‘<a 3.86 - href="#transition-timing-function"><code 3.87 - class=property>transition-timing-function</code></a>’> || 3.88 - <‘<a href="#transition-delay"><code 3.89 - class=property>transition-delay</code></a>’> [, [<‘<a 3.90 - href="#transition-property"><code 3.91 - class=property>transition-property</code></a>’> || <‘<a 3.92 - href="#transition-duration"><code 3.93 - class=property>transition-duration</code></a>’> || <‘<a 3.94 - href="#transition-timing-function"><code 3.95 - class=property>transition-timing-function</code></a>’> || 3.96 - <‘<a href="#transition-delay"><code 3.97 - class=property>transition-delay</code></a>’>]]* 3.98 + <td> <single-transition> [ ‘<code class=css>,</code>’ 3.99 + <single-transition> ]* 3.100 3.101 <tr> 3.102 <td> <em>Initial:</em> 3.103 @@ -848,6 +833,24 @@ 3.104 grammar</abbr> 3.105 </table> 3.106 3.107 + <div class=prod> <dfn 3.108 + id=ltsingle-transitiongt><single-transition></dfn> = [ none | 3.109 + <single-transition-property> ] || <time> || 3.110 + <single-transition-timing-function> || <time></div> 3.111 + 3.112 + <p> Note that order is important within the items in this property: the 3.113 + first value that can be parsed as a time is assigned to the 3.114 + transition-duration, and the second value that can be parsed as a time is 3.115 + assigned to transition-delay. 3.116 + 3.117 + <p class=issue> An alternative proposal is to accept the font shorthand 3.118 + approach of using a "/" character between the values of the same type. 3.119 + e.g. 2s/4s would mean a duration of 2 seconds and a delay of 4 seconds. 3.120 + 3.121 + <p> If there is more than one <single-transition> in the shorthand, 3.122 + and any of the transitions has ‘<code class=css>none</code>’ as the 3.123 + <single-transition-property>, then the declaration is invalid. 3.124 + 3.125 <h2 id=starting><span class=secno>3. </span> Starting of transitions</h2> 3.126 3.127 <p> When the computed value of an animatable property changes, 3.128 @@ -1623,8 +1626,9 @@ 3.129 3.130 <h2 id=acknowledgments><span class=secno>8. </span>Acknowledgments</h2> 3.131 3.132 - <p>Thanks especially to the feedback from Tab Atkins, Aryeh Gregor, Vincent 3.133 - Hardy, Cameron McCormack, Alex Mogilevsky, and all the rest of the <a 3.134 + <p>Thanks especially to the feedback from Tab Atkins, Carine Bournez, Aryeh 3.135 + Gregor, Vincent Hardy, Cameron McCormack, Alex Mogilevsky, and all the 3.136 + rest of the <a 3.137 href="http://lists.w3.org/Archives/Public/www-style/">www-style</a> 3.138 community. 3.139 3.140 @@ -1736,7 +1740,8 @@ 3.141 <th><a class=property 3.142 href="#transition-property">transition-property</a> 3.143 3.144 - <td>none | [ all | <IDENT> ] [ ‘,’ [ all | <IDENT> ] ]* 3.145 + <td>none | <single-transition-property> [ ‘,’ 3.146 + <single-transition-property> ]* 3.147 3.148 <td>all 3.149 3.150 @@ -1751,13 +1756,7 @@ 3.151 <tr> 3.152 <th><a class=property href="#transition">transition</a> 3.153 3.154 - <td>[<‘transition-property’> || 3.155 - <‘transition-duration’> || 3.156 - <‘transition-timing-function’> || 3.157 - <‘transition-delay’> [, [<‘transition-property’> || 3.158 - <‘transition-duration’> || 3.159 - <‘transition-timing-function’> || 3.160 - <‘transition-delay’>]]* 3.161 + <td><single-transition> [ ‘,’ <single-transition> ]* 3.162 3.163 <td>see individual properties 3.164 3.165 @@ -1773,13 +1772,8 @@ 3.166 <th><a class=property 3.167 href="#transition-timing-function">transition-timing-function</a> 3.168 3.169 - <td>[ ease | linear | ease-in | ease-out | ease-in-out | step-start | 3.170 - step-end | steps(<integer>[, [ start | end ] ]?) | 3.171 - cubic-bezier(<number>, <number>, <number>, 3.172 - <number>) ] [, [ ease | linear | ease-in | ease-out | ease-in-out 3.173 - | step-start | step-end | steps(<number>[, [ start | end ] ]?) | 3.174 - cubic-bezier(<number>, <number>, <number>, 3.175 - <number>) ] ]* 3.176 + <td><single-transition-timing-function> [ ‘,’ 3.177 + <single-transition-timing-function> ]* 3.178 3.179 <td>ease 3.180 3.181 @@ -1800,6 +1794,17 @@ 3.182 <li>combined duration, <a href="#combined-duration" 3.183 title="combined duration"><strong>3.</strong></a> 3.184 3.185 + <li><single-transition>, <a href="#ltsingle-transitiongt" 3.186 + title="<single-transition>"><strong>2.5.</strong></a> 3.187 + 3.188 + <li><single-transition-property>, <a 3.189 + href="#ltsingle-transition-propertygt" 3.190 + title="<single-transition-property>"><strong>2.1.</strong></a> 3.191 + 3.192 + <li><single-transition-timing-function>, <a 3.193 + href="#ltsingle-transition-timing-functiongt" 3.194 + title="<single-transition-timing-function>"><strong>2.3.</strong></a> 3.195 + 3.196 <li>transition, <a href="#transition" 3.197 title=transition><strong>2.5.</strong></a> 3.198
4.1 --- a/css3-transitions/Overview.src.html Thu Sep 20 10:33:20 2012 -0700 4.2 +++ b/css3-transitions/Overview.src.html Thu Sep 20 10:37:35 2012 -0700 4.3 @@ -14,6 +14,7 @@ 4.4 padding: 0.2em 1em; 4.5 border: 1px solid black; 4.6 } 4.7 + div.prod { margin: 1em 2em; } 4.8 </style> 4.9 <link rel="stylesheet" type="text/css" href="http://www.w3.org/StyleSheets/TR/W3C-ED.css"> 4.10 </head> 4.11 @@ -200,7 +201,7 @@ 4.12 <em>Value:</em> 4.13 </td> 4.14 <td> 4.15 - none | [ all | <IDENT> ] [ ',' [ all | <IDENT> ] ]* 4.16 + none | <single-transition-property> [ ',' <single-transition-property> ]* 4.17 </td> 4.18 </tr> 4.19 <tr> 4.20 @@ -270,6 +271,10 @@ 4.21 </tbody> 4.22 </table> 4.23 4.24 + <div class="prod"> 4.25 + <dfn><single-transition-property></dfn> = all | <IDENT> 4.26 + </div> 4.27 + 4.28 <p> 4.29 A value of 'none' means that no property will transition. 4.30 Otherwise, a list of properties to be transitioned, or the 4.31 @@ -498,7 +503,7 @@ 4.32 <em>Value:</em> 4.33 </td> 4.34 <td> 4.35 - [ ease | linear | ease-in | ease-out | ease-in-out | step-start | step-end | steps(<integer>[, [ start | end ] ]?) | cubic-bezier(<number>, <number>, <number>, <number>) ] [, [ ease | linear | ease-in | ease-out | ease-in-out | step-start | step-end | steps(<number>[, [ start | end ] ]?) | cubic-bezier(<number>, <number>, <number>, <number>) ] ]* 4.36 + <single-transition-timing-function> [ ',' <single-transition-timing-function> ]* 4.37 </td> 4.38 </tr> 4.39 <tr> 4.40 @@ -567,6 +572,9 @@ 4.41 </tr> 4.42 </tbody> 4.43 </table> 4.44 + <div class="prod"> 4.45 + <dfn><single-transition-timing-function></dfn> = ease | linear | ease-in | ease-out | ease-in-out | step-start | step-end | steps(<integer>[, [ start | end ] ]?) | cubic-bezier(<number>, <number>, <number>, <number>) 4.46 + </div> 4.47 <p> 4.48 The timing functions have the following definitions. 4.49 </p> 4.50 @@ -736,16 +744,6 @@ 4.51 <p> 4.52 The <code class="property">'transition'</code> shorthand property combines the four properties described above into a single property. 4.53 </p> 4.54 - <p> 4.55 - Note that order is important in this property. The first value that can be 4.56 - parsed as a time is assigned to the transition-duration. The second value that 4.57 - can be parsed as a time is assigned to transition-delay. 4.58 - </p> 4.59 - <p class="issue"> 4.60 - An alternative proposal is to accept the font shorthand approach of 4.61 - using a "/" character between the values of the same type. e.g. 2s/4s would 4.62 - mean a duration of 2 seconds and a delay of 4 seconds. 4.63 - </p> 4.64 <table class="propdef"> 4.65 <tbody> 4.66 <tr> 4.67 @@ -761,7 +759,7 @@ 4.68 <em>Value:</em> 4.69 </td> 4.70 <td> 4.71 - [<'transition-property'> || <'transition-duration'> || <'transition-timing-function'> || <'transition-delay'> [, [<'transition-property'> || <'transition-duration'> || <'transition-timing-function'> || <'transition-delay'>]]* 4.72 + <single-transition> [ ',' <single-transition> ]* 4.73 </td> 4.74 </tr> 4.75 <tr> 4.76 @@ -831,6 +829,31 @@ 4.77 </tbody> 4.78 </table> 4.79 4.80 + <div class="prod"> 4.81 + <dfn><single-transition></dfn> = [ none | <single-transition-property> ] || <time> || <single-transition-timing-function> || <time> 4.82 + </div> 4.83 + 4.84 + <p> 4.85 + Note that order is important within the items in this property: 4.86 + the first value that can be parsed as a time is assigned to the 4.87 + transition-duration, 4.88 + and the second value that can be parsed as a time is assigned to 4.89 + transition-delay. 4.90 + </p> 4.91 + 4.92 + <p class="issue"> 4.93 + An alternative proposal is to accept the font shorthand approach of 4.94 + using a "/" character between the values of the same type. e.g. 2s/4s would 4.95 + mean a duration of 2 seconds and a delay of 4 seconds. 4.96 + </p> 4.97 + 4.98 + <p> 4.99 + If there is more than one <single-transition> in the shorthand, 4.100 + and any of the transitions has 4.101 + ''none'' as the <single-transition-property>, 4.102 + then the declaration is invalid. 4.103 + </p> 4.104 + 4.105 <h2 id="starting"> 4.106 Starting of transitions 4.107 </h2> 4.108 @@ -1573,6 +1596,7 @@ 4.109 4.110 <p>Thanks especially to the feedback from 4.111 Tab Atkins, 4.112 +Carine Bournez, 4.113 Aryeh Gregor, 4.114 Vincent Hardy, 4.115 Cameron McCormack,
