changeset
css3-animations ED: negative transition-duration values are invalid (bug 16806), handling of !important (bug 14792), fix property syntax defs, fix animation-delay referenced as 'foo' in prop index
Thu, 12 Jul 2012 14:50:44 -0700
- author
- Sylvain Galineau <sylvaing@microsoft.com>
- date
- Thu, 12 Jul 2012 14:50:44 -0700
- changeset 6222
- cd865eec928e
- parent 6221
- b29bb1b84342
- child 6223
- 8f1870702065
css3-animations ED: negative transition-duration values are invalid (bug 16806), handling of !important (bug 14792), fix property syntax defs, fix animation-delay referenced as 'foo' in prop index
| 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 Jul 12 14:42:27 2012 -0700 1.2 +++ b/css3-animations/Overview.html Thu Jul 12 14:50:44 2012 -0700 1.3 @@ -15,14 +15,14 @@ 1.4 1.5 <h1>CSS Animations</h1> 1.6 1.7 - <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 28 June 2012</h2> 1.8 + <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 12 July 2012</h2> 1.9 1.10 <dl> 1.11 <dt>This version: 1.12 1.13 <dd><a 1.14 - href="http://www.w3.org/TR/2012/ED-css3-animations-20120628/">http://dev.w3.org/csswg/css3-animations/</a> 1.15 - <!--http://www.w3.org/TR/2012/WD-css3-animations-20120628/--> 1.16 + href="http://www.w3.org/TR/2012/ED-css3-animations-20120712/">http://dev.w3.org/csswg/css3-animations/</a> 1.17 + <!--http://www.w3.org/TR/2012/WD-css3-animations-20120712/--> 1.18 1.19 <dt>Latest version: 1.20 1.21 @@ -413,12 +413,13 @@ 1.22 class=css>100%</code>’ keyframe using the computed values of the 1.23 properties being animated. 1.24 1.25 - <p> The <dfn id=keyframe-declaration>keyframe declaration</dfn> for a 1.26 - keyframe rule consists of properties and values. Properties that are 1.27 + <p> The <dfn id=keyframe-declaration-block>keyframe declaration block</dfn> 1.28 + for a keyframe rule consists of properties and values. Properties that are 1.29 unable to be animated are ignored in these rules, with the exception of 1.30 ‘<a href="#animation-timing-function"><code 1.31 class=property>animation-timing-function</code></a>’, the behavior of 1.32 - which is described below. 1.33 + which is described below. In addition, keyframe rule declarations 1.34 + qualified with !important are ignored. 1.35 1.36 <p class=issue> Need to describe what happens if a property is not present 1.37 in all keyframes. 1.38 @@ -591,7 +592,7 @@ 1.39 <tr> 1.40 <th><a href="#values">Value</a>: 1.41 1.42 - <td>[ none | <user-ident> ]# 1.43 + <td>[ none | IDENT ] [, [ none | IDENT ] ]* 1.44 1.45 <tr> 1.46 <th>Initial: 1.47 @@ -630,50 +631,50 @@ 1.48 grammar</abbr> 1.49 </table> 1.50 <!-- 1.51 - <p> 1.52 - 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.53 - 1.54 - <div class="example"> 1.55 - <p style="display:none"> 1.56 - Example(s): 1.57 - 1.58 - <pre> 1.59 - @keyframes 'border-bloat' { 1.60 - from { 1.61 - border-width: 0; 1.62 - } 1.63 - to { 1.64 - border-width: 10px; 1.65 - } 1.66 - } 1.67 + <p> 1.68 + 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.69 + 1.70 + <div class="example"> 1.71 + <p style="display:none"> 1.72 + Example(s): 1.73 + 1.74 + <pre> 1.75 + @keyframes 'border-bloat' { 1.76 + from { 1.77 + border-width: 0; 1.78 + } 1.79 + to { 1.80 + border-width: 10px; 1.81 + } 1.82 + } 1.83 1.84 - @keyframes 'border-diet' { 1.85 - from { 1.86 - border-width: 4px; 1.87 - } 1.88 - to { 1.89 - border-width: 2px; 1.90 - } 1.91 - } 1.92 + @keyframes 'border-diet' { 1.93 + from { 1.94 + border-width: 4px; 1.95 + } 1.96 + to { 1.97 + border-width: 2px; 1.98 + } 1.99 + } 1.100 1.101 - div { 1.102 - animation-name: 'border-bloat', 'border-diet'; 1.103 - animation-duration: 10s, 4s; 1.104 - } 1.105 - </pre> 1.106 - <p> 1.107 - The above example has two animations executing on the same property, 'border-width'. The animations are additive. That is, the 1.108 - resulting value for the property will be the addition of the values from the 1.109 - two animations. 1.110 - 1.111 - <p> 1.112 - At time '0s' the element's border will be 4px wide (0px from 'border-bloat' plus 4px from 'border-diet'). 1.113 - At time '4s' the element's border will be 6px wide (4px from 'border-bloat' plus 2px from 'border-diet'). 1.114 - At time '10s' the element's border will be 10px wide (10px from 'border-bloat' and no addition from 1.115 - 'border-diet' as it is no longer executing). 1.116 - 1.117 - </div> 1.118 - --> 1.119 + div { 1.120 + animation-name: 'border-bloat', 'border-diet'; 1.121 + animation-duration: 10s, 4s; 1.122 + } 1.123 + </pre> 1.124 + <p> 1.125 + The above example has two animations executing on the same property, 'border-width'. The animations are additive. That is, the 1.126 + resulting value for the property will be the addition of the values from the 1.127 + two animations. 1.128 + 1.129 + <p> 1.130 + At time '0s' the element's border will be 4px wide (0px from 'border-bloat' plus 4px from 'border-diet'). 1.131 + At time '4s' the element's border will be 6px wide (4px from 'border-bloat' plus 2px from 'border-diet'). 1.132 + At time '10s' the element's border will be 10px wide (10px from 'border-bloat' and no addition from 1.133 + 'border-diet' as it is no longer executing). 1.134 + 1.135 + </div> 1.136 + --> 1.137 1.138 <h3 id=animation-duration-property><span class=secno>3.3. </span> The ‘<a 1.139 href="#animation-duration"><code 1.140 @@ -693,7 +694,7 @@ 1.141 <tr> 1.142 <th><a href="#values">Value</a>: 1.143 1.144 - <td><time># 1.145 + <td> <time> [, <time>]* 1.146 1.147 <tr> 1.148 <th>Initial: 1.149 @@ -733,16 +734,16 @@ 1.150 </table> 1.151 1.152 <p> The initial value is ‘<code class=css>0s</code>’, meaning that the 1.153 - animation takes no time. A negative value for ‘<a 1.154 - href="#animation-duration"><code 1.155 - class=property>animation-duration</code></a>’ is treated as ‘<code 1.156 - class=css>0s</code>’. In this case ‘<a 1.157 - href="#animation-fill-mode"><code 1.158 + animation takes no time. When the duration is ‘<code 1.159 + class=css>0s</code>’ ‘<a href="#animation-fill-mode"><code 1.160 class=property>animation-fill-mode</code></a>’ still applies, so an 1.161 animation that fills backwards will show the value of the 0% keyframe 1.162 during any delay period, and an animation that fills forwards will retain 1.163 the value specified at the 100% keyframe, even if the animation was 1.164 - instantaneous. Also, animation events are still fired. 1.165 + instantaneous. Also, animation events are still fired. A negative ‘<a 1.166 + href="#animation-duration"><code 1.167 + class=property>animation-duration</code></a>’ value renders the 1.168 + declaration invalid. 1.169 1.170 <h3 id=animation-timing-function-property><span class=secno>3.4. </span> 1.171 The ‘<a href="#animation-timing-function"><code 1.172 @@ -766,9 +767,13 @@ 1.173 <tr> 1.174 <th><a href="#values">Value</a>: 1.175 1.176 - <td>[ ease | linear | ease-in | ease-out | ease-in-out | step-start | 1.177 - step-end | steps(<number> [, [ start | end ] ]) | 1.178 - cubic-bezier(<number>, <number>, <number>, <number>) ]# 1.179 + <td> [ ease | linear | ease-in | ease-out | ease-in-out | step-start | 1.180 + step-end | steps(<number> [, [ start | end ] ]?) | 1.181 + cubic-bezier(<number>, <number>, <number>, 1.182 + <number>) ] [, [ ease | linear | ease-in | ease-out | ease-in-out 1.183 + | step-start | step-end | steps(<number> [, [ start | end ] ]?) | 1.184 + cubic-bezier(<number>, <number>, <number>, 1.185 + <number>) ] ]* 1.186 1.187 <tr> 1.188 <th>Initial: 1.189 @@ -847,7 +852,7 @@ 1.190 <tr> 1.191 <th><a href="#values">Value</a>: 1.192 1.193 - <td>[ infinite | <number> ]# 1.194 + <td> [ infinite | <number> ] [, [ infinite | <number> ] ]* 1.195 1.196 <tr> 1.197 <th>Initial: 1.198 @@ -907,7 +912,8 @@ 1.199 <tr> 1.200 <th><a href="#values">Value</a>: 1.201 1.202 - <td>[ normal | reverse | alternate | alternate-reverse ]# 1.203 + <td> [ normal | reverse | alternate | alternate-reverse ] [, [ normal | 1.204 + reverse | alternate | alternate-reverse ] ]* 1.205 1.206 <tr> 1.207 <th>Initial: 1.208 @@ -997,7 +1003,7 @@ 1.209 <tr> 1.210 <th><a href="#values">Value</a>: 1.211 1.212 - <td>[ running | paused ]# 1.213 + <td> [ running | paused ] [, [ running | paused ] ]* 1.214 1.215 <tr> 1.216 <th>Initial: 1.217 @@ -1036,37 +1042,41 @@ 1.218 grammar</abbr> 1.219 </table> 1.220 1.221 - <h3 id=animation-delay-property><span class=secno>3.8. </span> The ‘<code 1.222 - class=property>animation-delay</code>’ Property</h3> 1.223 + <h3 id=animation-delay-property><span class=secno>3.8. </span> The ‘<a 1.224 + href="#animation-delay"><code class=property>animation-delay</code></a>’ 1.225 + Property</h3> 1.226 1.227 - <p> The ‘<code class=property>animation-delay</code>’ property defines 1.228 - when the animation will start. It allows an animation to begin execution 1.229 - some time after it is applied. An ‘<code 1.230 - class=property>animation-delay</code>’ value of ‘<code 1.231 + <p> The ‘<a href="#animation-delay"><code 1.232 + class=property>animation-delay</code></a>’ property defines when the 1.233 + animation will start. It allows an animation to begin execution some time 1.234 + after it is applied. An ‘<a href="#animation-delay"><code 1.235 + class=property>animation-delay</code></a>’ value of ‘<code 1.236 class=css>0s</code>’ means the animation will execute as soon as it is 1.237 applied. Otherwise, the value specifies an offset from the moment the 1.238 animation is applied, and the animation will delay execution by that 1.239 offset. 1.240 1.241 - <p> If the value for ‘<code class=property>animation-delay</code>’ is a 1.242 - negative time offset then the animation will execute the moment it is 1.243 - applied, but will appear to have begun execution at the specified offset. 1.244 - That is, the animation will appear to begin part-way through its play 1.245 - cycle. In the case where an animation has implied starting values and a 1.246 - negative ‘<code class=property>animation-delay</code>’, the starting 1.247 - values are taken from the moment the animation is applied. 1.248 + <p> If the value for ‘<a href="#animation-delay"><code 1.249 + class=property>animation-delay</code></a>’ is a negative time offset 1.250 + then the animation will execute the moment it is applied, but will appear 1.251 + to have begun execution at the specified offset. That is, the animation 1.252 + will appear to begin part-way through its play cycle. In the case where an 1.253 + animation has implied starting values and a negative ‘<a 1.254 + href="#animation-delay"><code 1.255 + class=property>animation-delay</code></a>’, the starting values are 1.256 + taken from the moment the animation is applied. 1.257 1.258 <table class=propdef> 1.259 <tbody> 1.260 <tr> 1.261 <th>Name: 1.262 1.263 - <td><dfn id=foo>foo</dfn> 1.264 + <td><dfn id=animation-delay>animation-delay</dfn> 1.265 1.266 <tr> 1.267 - <th><a href="#values">animation-delay</a>: 1.268 + <th><a href="#values">Value</a>: 1.269 1.270 - <td><time># 1.271 + <td> <time> [, <time>]* 1.272 1.273 <tr> 1.274 <th>Initial: 1.275 @@ -1115,10 +1125,11 @@ 1.276 default, an animation will not affect property values between the time it 1.277 is applied (the ‘<a href="#animation-name"><code 1.278 class=property>animation-name</code></a>’ property is set on an element) 1.279 - and the time it begins execution (which is determined by the ‘<code 1.280 - class=property>animation-delay</code>’ property). Also, by default an 1.281 - animation does not affect property values after the animation ends 1.282 - (determined by the ‘<a href="#animation-duration"><code 1.283 + and the time it begins execution (which is determined by the ‘<a 1.284 + href="#animation-delay"><code class=property>animation-delay</code></a>’ 1.285 + property). Also, by default an animation does not affect property values 1.286 + after the animation ends (determined by the ‘<a 1.287 + href="#animation-duration"><code 1.288 class=property>animation-duration</code></a>’ property). The ‘<a 1.289 href="#animation-fill-mode"><code 1.290 class=property>animation-fill-mode</code></a>’ property can override 1.291 @@ -1128,9 +1139,10 @@ 1.292 class=property>animation-fill-mode</code></a>’ is ‘<code 1.293 class=css>backwards</code>’, then the animation will apply the property 1.294 values defined in the keyframe that will start the first iteration of the 1.295 - animation, during the period defined by ‘<code 1.296 - class=property>animation-delay</code>’. These are either the values of 1.297 - the ‘<code class=css>from</code>’ keyframe (when ‘<a 1.298 + animation, during the period defined by ‘<a 1.299 + href="#animation-delay"><code 1.300 + class=property>animation-delay</code></a>’. These are either the values 1.301 + of the ‘<code class=css>from</code>’ keyframe (when ‘<a 1.302 href="#animation-direction"><code 1.303 class=property>animation-direction</code></a>’ is ‘<a 1.304 href="#normal"><code class=css>normal</code></a>’ or ‘<a 1.305 @@ -1177,7 +1189,8 @@ 1.306 <tr> 1.307 <th><a href="#values">Value</a>: 1.308 1.309 - <td>[ none | forwards | backwards | both ]# 1.310 + <td> [ none | forwards | backwards | both ] [, [ none | forwards | 1.311 + backwards | both ] ]* 1.312 1.313 <tr> 1.314 <th>Initial: 1.315 @@ -1228,8 +1241,9 @@ 1.316 be parsed as a <var><time></var> is assigned to the ‘<a 1.317 href="#animation-duration"><code 1.318 class=property>animation-duration</code></a>’. The second value that can 1.319 - be parsed as a <var><time></var> is assigned to ‘<code 1.320 - class=property>animation-delay</code>’. 1.321 + be parsed as a <var><time></var> is assigned to ‘<a 1.322 + href="#animation-delay"><code 1.323 + class=property>animation-delay</code></a>’. 1.324 1.325 <p class=issue> An alternative proposal is to accept the font shorthand 1.326 approach of using a "/" character between the values of the same type. 1.327 @@ -1245,19 +1259,13 @@ 1.328 <tr> 1.329 <th><a href="#values">Value</a>: 1.330 1.331 - <td>[ <‘<a href="#animation-name"><code 1.332 - class=property>animation-name</code></a>’> || <‘<a 1.333 - href="#animation-duration"><code 1.334 - class=property>animation-duration</code></a>’> || <‘<a 1.335 - href="#animation-timing-function"><code 1.336 - class=property>animation-timing-function</code></a>’> || <‘<code 1.337 - class=property>animation-delay</code>’> || <‘<a 1.338 - href="#animation-iteration-count"><code 1.339 - class=property>animation-iteration-count</code></a>’> || <‘<a 1.340 - href="#animation-direction"><code 1.341 - class=property>animation-direction</code></a>’> || <‘<a 1.342 - href="#animation-fill-mode"><code 1.343 - class=property>animation-fill-mode</code></a>’> ]# 1.344 + <td> [ <animation-name> || <animation-duration> || 1.345 + <animation-timing-function> || <animation-delay> || 1.346 + <animation-iteration-count> || <animation-direction> || 1.347 + <animation-fill-mode> ] [, [ <animation-name> || 1.348 + <animation-duration> || <animation-timing-function> || 1.349 + <animation-delay> || <animation-iteration-count> || 1.350 + <animation-direction> || <animation-fill-mode> ] ]* 1.351 1.352 <tr> 1.353 <th>Initial: 1.354 @@ -1356,8 +1364,9 @@ 1.355 <dd> The amount of time the animation has been running, in seconds, when 1.356 this event fired, excluding any time the animation was paused. For an 1.357 "animationstart" event, the elapsedTime is zero unless there was a 1.358 - negative value for ‘<code class=property>animation-delay</code>’, in 1.359 - which case the event will be fired with an <a 1.360 + negative value for ‘<a href="#animation-delay"><code 1.361 + class=property>animation-delay</code></a>’, in which case the event 1.362 + will be fired with an <a 1.363 href="#AnimationEvent-elapsedTime"><code>elapsedTime</code></a> of (-1 * 1.364 delay). 1.365 </dl> 1.366 @@ -1670,10 +1679,13 @@ 1.367 <tr> 1.368 <th><a class=property href="#animation">animation</a> 1.369 1.370 - <td>[ <‘animation-name’> || <‘animation-duration’> || 1.371 - <‘animation-timing-function’> || <‘animation-delay’> || 1.372 - <‘animation-iteration-count’> || 1.373 - <‘animation-direction’> || <‘animation-fill-mode’> ]# 1.374 + <td>[ <animation-name> || <animation-duration> || 1.375 + <animation-timing-function> || <animation-delay> || 1.376 + <animation-iteration-count> || <animation-direction> || 1.377 + <animation-fill-mode> ] [, [ <animation-name> || 1.378 + <animation-duration> || <animation-timing-function> || 1.379 + <animation-delay> || <animation-iteration-count> || 1.380 + <animation-direction> || <animation-fill-mode> ] ]* 1.381 1.382 <td>see individual properties 1.383 1.384 @@ -1686,10 +1698,26 @@ 1.385 <td>visual 1.386 1.387 <tr> 1.388 + <th><a class=property href="#animation-delay">animation-delay</a> 1.389 + 1.390 + <td><time> [, <time>]* 1.391 + 1.392 + <td>‘0s’ 1.393 + 1.394 + <td>all elements 1.395 + 1.396 + <td>no 1.397 + 1.398 + <td>as specified 1.399 + 1.400 + <td>visual 1.401 + 1.402 + <tr> 1.403 <th><a class=property 1.404 href="#animation-direction">animation-direction</a> 1.405 1.406 - <td>[ normal | reverse | alternate | alternate-reverse ]# 1.407 + <td>[ normal | reverse | alternate | alternate-reverse ] [, [ normal | 1.408 + reverse | alternate | alternate-reverse ] ]* 1.409 1.410 <td>‘normal’ 1.411 1.412 @@ -1705,7 +1733,7 @@ 1.413 <th><a class=property 1.414 href="#animation-duration">animation-duration</a> 1.415 1.416 - <td><time># 1.417 + <td><time> [, <time>]* 1.418 1.419 <td>‘0s’ 1.420 1.421 @@ -1721,7 +1749,8 @@ 1.422 <th><a class=property 1.423 href="#animation-fill-mode">animation-fill-mode</a> 1.424 1.425 - <td>[ none | forwards | backwards | both ]# 1.426 + <td>[ none | forwards | backwards | both ] [, [ none | forwards | 1.427 + backwards | both ] ]* 1.428 1.429 <td>‘none’ 1.430 1.431 @@ -1737,7 +1766,7 @@ 1.432 <th><a class=property 1.433 href="#animation-iteration-count">animation-iteration-count</a> 1.434 1.435 - <td>[ infinite | <number> ]# 1.436 + <td>[ infinite | <number> ] [, [ infinite | <number> ] ]* 1.437 1.438 <td>‘1’ 1.439 1.440 @@ -1752,7 +1781,7 @@ 1.441 <tr> 1.442 <th><a class=property href="#animation-name">animation-name</a> 1.443 1.444 - <td>[ none | <user-ident> ]# 1.445 + <td>[ none | IDENT ] [, [ none | IDENT ] ]* 1.446 1.447 <td>‘none’ 1.448 1.449 @@ -1768,7 +1797,7 @@ 1.450 <th><a class=property 1.451 href="#animation-play-state">animation-play-state</a> 1.452 1.453 - <td>[ running | paused ]# 1.454 + <td>[ running | paused ] [, [ running | paused ] ]* 1.455 1.456 <td>‘running’ 1.457 1.458 @@ -1785,8 +1814,12 @@ 1.459 href="#animation-timing-function">animation-timing-function</a> 1.460 1.461 <td>[ ease | linear | ease-in | ease-out | ease-in-out | step-start | 1.462 - step-end | steps(<number> [, [ start | end ] ]) | 1.463 - cubic-bezier(<number>, <number>, <number>, <number>) ]# 1.464 + step-end | steps(<number> [, [ start | end ] ]?) | 1.465 + cubic-bezier(<number>, <number>, <number>, 1.466 + <number>) ] [, [ ease | linear | ease-in | ease-out | 1.467 + ease-in-out | step-start | step-end | steps(<number> [, [ start 1.468 + | end ] ]?) | cubic-bezier(<number>, <number>, 1.469 + <number>, <number>) ] ]* 1.470 1.471 <td>‘ease’ 1.472 1.473 @@ -1797,21 +1830,6 @@ 1.474 <td>as specified 1.475 1.476 <td>visual 1.477 - 1.478 - <tr> 1.479 - <th><a class=property href="#foo">foo</a> 1.480 - 1.481 - <td><time># 1.482 - 1.483 - <td>‘0s’ 1.484 - 1.485 - <td>all elements 1.486 - 1.487 - <td>no 1.488 - 1.489 - <td>as specified 1.490 - 1.491 - <td>visual 1.492 </table> 1.493 <!--end-properties--> 1.494 <h2 class=no-num id=index>Index</h2> 1.495 @@ -1826,6 +1844,9 @@ 1.496 <li>animation, <a href="#animation" 1.497 title=animation><strong>3.10.</strong></a> 1.498 1.499 + <li>animation-delay, <a href="#animation-delay" 1.500 + title=animation-delay><strong>3.8.</strong></a> 1.501 + 1.502 <li>animation-direction, <a href="#animation-direction" 1.503 title=animation-direction><strong>3.6.</strong></a> 1.504 1.505 @@ -1885,13 +1906,11 @@ 1.506 <li>elapsedTime, <a href="#AnimationEvent-elapsedTime" 1.507 title=elapsedTime><strong>4.1.2.</strong></a> 1.508 1.509 - <li>foo, <a href="#foo" title=foo><strong>3.8.</strong></a> 1.510 - 1.511 <li>initAnimationEvent, <a href="#initanimationevent" 1.512 title=initAnimationEvent><strong>4.1.3.</strong></a> 1.513 1.514 - <li>keyframe declaration, <a href="#keyframe-declaration" 1.515 - title="keyframe declaration"><strong>3.</strong></a> 1.516 + <li>keyframe declaration block, <a href="#keyframe-declaration-block" 1.517 + title="keyframe declaration block"><strong>3.</strong></a> 1.518 1.519 <li>keyframe selector, <a href="#keyframe-selector" 1.520 title="keyframe selector"><strong>3.</strong></a>
2.1 --- a/css3-animations/Overview.src.html Thu Jul 12 14:42:27 2012 -0700 2.2 +++ b/css3-animations/Overview.src.html Thu Jul 12 14:50:44 2012 -0700 2.3 @@ -547,14 +547,14 @@ 2.4 2.5 <p> 2.6 The initial value is ''0s'', 2.7 - meaning that the animation takes no time. 2.8 - A negative value for 'animation-duration' renders the declaration invalid. 2.9 + meaning that the animation takes no time. 2.10 When the duration is ''0s'' 'animation-fill-mode' still applies, 2.11 so an animation that fills backwards 2.12 will show the value of the 0% keyframe during any delay period, 2.13 and an animation that fills forwards will retain the value specified at the 100% keyframe, 2.14 even if the animation was instantaneous. 2.15 Also, animation events are still fired. 2.16 + A negative 'animation-duration' value renders the declaration invalid. 2.17 2.18 2.19 <h3 id="animation-timing-function-property"> 2.20 @@ -797,9 +797,9 @@ 2.21 <table class=propdef> 2.22 <tr> 2.23 <th>Name:</th> 2.24 - <td><dfn>foo</dfn> 2.25 + <td><dfn>animation-delay</dfn> 2.26 <tr> 2.27 - <th><a href="#values">animation-delay</a>: 2.28 + <th><a href="#values">Value</a>: 2.29 <td> <time> [, <time>]* 2.30 <tr> 2.31 <th>Initial:
