Mon, 01 Oct 2012 10:31:12 -0700
[css3-animations] Resolution: !important user and author rules override animations (bug 15249)
jackalmage@5911 | 1 | <!DOCTYPE html> |
dino@937 | 2 | <html lang="en"> |
dino@937 | 3 | <head> |
jackalmage@5911 | 4 | <title>CSS Animations</title> |
jackalmage@5911 | 5 | <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> |
jackalmage@5911 | 6 | <link rel="stylesheet" type="text/css" href="../default.css"> |
jackalmage@5911 | 7 | <link rel="stylesheet" type="text/css" href="http://www.w3.org/StyleSheets/TR/W3C-ED.css"> |
dbaron@6736 | 8 | <style type="text/css"> |
dbaron@6736 | 9 | div.prod { margin: 1em 2em; } |
dbaron@6736 | 10 | </style> |
dino@937 | 11 | </head> |
dino@937 | 12 | |
dino@937 | 13 | <body> |
dino@937 | 14 | |
dino@937 | 15 | <div class="head"> |
dino@937 | 16 | <!--logo--> |
dino@937 | 17 | |
simon@2533 | 18 | <h1>CSS Animations</h1> |
dino@937 | 19 | |
dino@937 | 20 | <h2 class="no-num no-toc">[LONGSTATUS] [DATE]</h2> |
dino@937 | 21 | <dl> |
jackalmage@5911 | 22 | <dt>This version: |
jackalmage@5911 | 23 | <dd><a href="[VERSION]">http://dev.w3.org/csswg/css3-animations/</a> |
jackalmage@5911 | 24 | <!--http://www.w3.org/TR/[YEAR]/WD-[SHORTNAME]-[CDATE]/--> |
jackalmage@5911 | 25 | <dt>Latest version: |
jackalmage@5911 | 26 | <dd><a |
jackalmage@5911 | 27 | href="http://www.w3.org/TR/css3-animations/">[LATEST]</a> |
jackalmage@5911 | 28 | <dt>Editor's draft: |
jackalmage@5911 | 29 | <dd><a href="http://dev.w3.org/csswg/[SHORTNAME]/">http://dev.w3.org/csswg/[SHORTNAME]/</a> |
dbaron@3965 | 30 | |
jackalmage@5911 | 31 | <dt>Previous version: |
jackalmage@5911 | 32 | <dd><a href="http://www.w3.org/TR/2012/WD-css3-animations-20120403/"> |
jackalmage@5911 | 33 | http://www.w3.org/TR/2012/WD-css3-animations-20120403/</a> |
jackalmage@5911 | 34 | <dt id="editors-list">Editors: |
jackalmage@5911 | 35 | <dd><a href="mailto:dino@apple.com">Dean Jackson</a> (<a |
jackalmage@5911 | 36 | href="http://www.apple.com/">Apple Inc</a>) |
jackalmage@5911 | 37 | <dd><a href="mailto:hyatt@apple.com">David Hyatt</a> (<a |
jackalmage@5911 | 38 | href="http://www.apple.com/">Apple Inc</a>) |
jackalmage@5911 | 39 | <dd><a href="mailto:cmarrin@apple.com">Chris Marrin</a> (<a |
jackalmage@5911 | 40 | href="http://www.apple.com/">Apple Inc</a>) |
jackalmage@5911 | 41 | <dd><a href="mailto:sylvaing@microsoft.com">Sylvain Galineau</a> |
jackalmage@5911 | 42 | (<a class=org href="http://www.microsoft.com/">Microsoft</a>) |
jackalmage@5911 | 43 | <dd class=vcard><a class=fn href="http://dbaron.org/">L. David Baron</a> |
jackalmage@5911 | 44 | (<a class=org href="http://www.mozilla.org/">Mozilla</a>) |
dbaron@3965 | 45 | |
jackalmage@5911 | 46 | <dt>Issues list: |
jackalmage@5911 | 47 | <dd><a href="https://www.w3.org/Bugs/Public/buglist.cgi?query_format=advanced&product=CSS&component=Animations&resolution=---&cmdtype=doit">in Bugzilla</a> |
dbaron@3965 | 48 | |
jackalmage@5911 | 49 | <dt>Discussion: |
jackalmage@5911 | 50 | <dd><a href="http://lists.w3.org/Archives/Public/www-style/">www-style@w3.org</a> with subject line “<kbd>[[SHORTNAME]] <var>… message topic …</var></kbd>” |
dbaron@5229 | 51 | |
jackalmage@5911 | 52 | <dt>Test suite: |
jackalmage@5911 | 53 | <dd>none yet |
dino@937 | 54 | </dl> |
dino@937 | 55 | |
dino@937 | 56 | <!--copyright--> |
dino@937 | 57 | |
dino@937 | 58 | <hr title="Separator for header"> |
dino@937 | 59 | </div> |
dino@937 | 60 | |
jackalmage@5911 | 61 | <h2 class="no-num no-toc" id="abstract"> |
jackalmage@5911 | 62 | Abstract</h2> |
dino@937 | 63 | |
jackalmage@5911 | 64 | <p> |
jackalmage@5911 | 65 | This CSS module describes a way for authors to animate the values of CSS properties over time, |
jackalmage@5911 | 66 | using keyframes. |
jackalmage@5911 | 67 | The behavior of these keyframe animations can be controlled by specifying their duration, |
jackalmage@5911 | 68 | number of repeats, |
jackalmage@5911 | 69 | and repeating behavior. |
dino@937 | 70 | |
jackalmage@5911 | 71 | |
jackalmage@5911 | 72 | <h2 class="no-num no-toc" id="status"> |
jackalmage@5911 | 73 | Status of this document</h2> |
dino@937 | 74 | <!--status--> |
dino@937 | 75 | |
dino@937 | 76 | |
jackalmage@5911 | 77 | <h2 class="no-num no-toc" id="contents"> |
jackalmage@5911 | 78 | Table of contents</h2> |
dino@937 | 79 | <!--toc--> |
dino@937 | 80 | |
dino@937 | 81 | |
jackalmage@5911 | 82 | <h2 id="introduction"> |
jackalmage@5911 | 83 | Introduction</h2> |
dino@937 | 84 | |
jackalmage@5911 | 85 | <p><em>This section is not normative.</em> |
dino@937 | 86 | |
jackalmage@5911 | 87 | <p> |
jackalmage@5911 | 88 | CSS Transitions [[CSS3-TRANSITIONS]] |
jackalmage@5911 | 89 | provide a way to interpolate CSS property values |
jackalmage@5911 | 90 | when they change as a result of underlying property changes. |
jackalmage@5911 | 91 | This provides an easy way to do simple animation, |
jackalmage@5911 | 92 | but the start and end states of the animation are controlled by the existing property values, |
jackalmage@5911 | 93 | and transitions provide little control to the author on how the animation progresses. |
jackalmage@5911 | 94 | |
jackalmage@5911 | 95 | <p> |
jackalmage@5911 | 96 | This proposal introduces <dfn>defined animations</dfn>, |
jackalmage@5911 | 97 | in which the author can specify the changes in CSS properties over time as a set of keyframes. |
jackalmage@5911 | 98 | Animations are similar to transitions |
jackalmage@5911 | 99 | in that they change the presentational value of CSS properties over time. |
jackalmage@5911 | 100 | The principal difference is that |
jackalmage@5911 | 101 | while transitions trigger <em>implicitly</em> when property values change, |
jackalmage@5911 | 102 | animations are <em>explicitly</em> executed when the animation properties are applied. |
jackalmage@5911 | 103 | Because of this, |
jackalmage@5911 | 104 | animations require explicit values for the properties being animated. |
jackalmage@5911 | 105 | These values are specified using animation keyframes, described below. |
jackalmage@5911 | 106 | |
jackalmage@5911 | 107 | <p> |
jackalmage@5911 | 108 | Many aspects of the animation can be controlled, |
jackalmage@5911 | 109 | including how many times the animation iterates, |
jackalmage@5911 | 110 | whether or not it alternates between the begin and end values, |
jackalmage@5911 | 111 | and whether or not the animation should be running or paused. |
jackalmage@5911 | 112 | An animation can also delay its start time. |
simon@1671 | 113 | |
simon@1719 | 114 | |
jackalmage@5911 | 115 | <h2 id="animations"> |
jackalmage@5911 | 116 | Animations</h2> |
simon@1719 | 117 | |
jackalmage@5911 | 118 | <p> |
jackalmage@5911 | 119 | CSS Animations affect computed property values. |
jackalmage@5911 | 120 | During the execution of an animation, |
jackalmage@5911 | 121 | the computed value for a property is controlled by the animation. |
jackalmage@5911 | 122 | This overrides the value specified in the normal styling system. |
sylvaing@6806 | 123 | Animations override all normal rules, but are overriden by |
sylvaing@6806 | 124 | !important rules. |
simon@1719 | 125 | |
jackalmage@5911 | 126 | <p> |
jackalmage@5911 | 127 | If at one point in time there are multiple animations specifying behavior for the same property, |
jackalmage@5911 | 128 | the animation whose name occurs last in the value of 'animation-name' |
jackalmage@5911 | 129 | will override the other animations at that point. |
jackalmage@5911 | 130 | |
simon@1719 | 131 | |
jackalmage@5911 | 132 | <p> |
jackalmage@5911 | 133 | An animation does not affect the computed value before the application of the animation, |
jackalmage@5911 | 134 | before the animation delay has expired, |
jackalmage@5911 | 135 | and after the end of the animation. |
jackalmage@5911 | 136 | |
simon@1719 | 137 | |
jackalmage@5911 | 138 | <div class="figure"> |
jackalmage@5911 | 139 | <img src="sandwich.png" alt=""> |
jackalmage@5911 | 140 | |
jackalmage@5911 | 141 | <p class="caption"> |
jackalmage@5911 | 142 | Computation of animated property values |
jackalmage@5911 | 143 | </div> |
simon@1719 | 144 | |
jackalmage@5911 | 145 | <p> |
jackalmage@5911 | 146 | The diagram above shows how property values are computed. |
jackalmage@5911 | 147 | The intrinsic style is shown at the top of the diagram. |
jackalmage@5911 | 148 | The computed value is derived from intrinsic style |
jackalmage@5911 | 149 | at the times when an animation is not running |
jackalmage@5911 | 150 | and also when an animation is delayed |
jackalmage@5911 | 151 | (see below for specification of animation delay). |
jackalmage@5911 | 152 | During an animation, |
jackalmage@5911 | 153 | the computed style is derived from the animated value. |
jackalmage@5911 | 154 | |
simon@1719 | 155 | |
jackalmage@5911 | 156 | <p> |
jackalmage@5911 | 157 | The start time of an animation is the latter of two moments: |
jackalmage@5911 | 158 | the time at which the style is resolved that specifies the animation, |
jackalmage@5911 | 159 | or the time the document's load event is fired. |
jackalmage@5911 | 160 | Therefore, an animation specified in the document style sheet |
jackalmage@5911 | 161 | will begin at the document load. |
jackalmage@5911 | 162 | An animation specified on an element by modifying the style after the document has loaded |
jackalmage@5911 | 163 | will start when the style is resolved. |
jackalmage@5911 | 164 | That may be immediately in the case of a pseudo style rule such as hover, |
jackalmage@5911 | 165 | or may be when the scripting engine returns control to the browser |
jackalmage@5911 | 166 | (in the case of style applied by script). |
jackalmage@5911 | 167 | |
simon@1719 | 168 | |
jackalmage@5911 | 169 | <p> |
jackalmage@5911 | 170 | An animation applies to an element |
jackalmage@5911 | 171 | if the element has a value for 'animation-name' that references a valid keyframes rule. |
jackalmage@5911 | 172 | Once an animation has started |
jackalmage@5911 | 173 | it continues until it ends |
jackalmage@5911 | 174 | or the 'animation-name' is removed. |
jackalmage@5911 | 175 | The values used for the keyframes and animation properties are snapshotted at the time the animation starts. |
jackalmage@5911 | 176 | Changing them during the execution of the animation has no effect. |
jackalmage@5911 | 177 | Note also that changing the value of 'animation-name' does not necessarily restart an animation |
jackalmage@5911 | 178 | (e.g., if a list of animations are applied and one is removed from the list, |
jackalmage@5911 | 179 | only that animation will stop; |
jackalmage@5911 | 180 | The other animations will continue). |
jackalmage@5911 | 181 | In order to restart an animation, |
jackalmage@5911 | 182 | it must be removed then reapplied. |
jackalmage@5911 | 183 | |
simon@1719 | 184 | |
jackalmage@5911 | 185 | <p> |
jackalmage@5911 | 186 | The end of the animation is defined by the combination of the |
jackalmage@5911 | 187 | 'animation-duration', |
jackalmage@5911 | 188 | 'animation-iteration-count' and |
jackalmage@5911 | 189 | 'animation-fill-mode' properties. |
jackalmage@5911 | 190 | |
jackalmage@5911 | 191 | |
jackalmage@5911 | 192 | <div class="example"> |
jackalmage@5911 | 193 | <pre> |
jackalmage@5911 | 194 | div { |
dbaron@6082 | 195 | animation-name: diagonal-slide; |
dbaron@6082 | 196 | animation-duration: 5s; |
dbaron@6082 | 197 | animation-iteration-count: 10; |
jackalmage@5911 | 198 | } |
simon@1719 | 199 | |
jackalmage@5911 | 200 | @keyframes diagonal-slide { |
simon@1719 | 201 | |
dbaron@6082 | 202 | from { |
dbaron@6082 | 203 | left: 0; |
dbaron@6082 | 204 | top: 0; |
dbaron@6082 | 205 | } |
simon@1719 | 206 | |
dbaron@6082 | 207 | to { |
dbaron@6082 | 208 | left: 100px; |
dbaron@6082 | 209 | top: 100px; |
dbaron@6082 | 210 | } |
simon@1719 | 211 | |
jackalmage@5911 | 212 | }</pre> |
simon@1719 | 213 | |
jackalmage@5911 | 214 | <p> |
jackalmage@5911 | 215 | This will produce an animation |
jackalmage@5911 | 216 | that moves an element from (0, 0) to (100px, 100px) |
jackalmage@5911 | 217 | over five seconds |
jackalmage@5911 | 218 | and repeats itself nine times |
jackalmage@5911 | 219 | (for a total of ten iterations). |
jackalmage@5911 | 220 | </div> |
dino@937 | 221 | |
jackalmage@5911 | 222 | <h2 id="keyframes"> |
jackalmage@5911 | 223 | Keyframes</h2> |
jackalmage@5911 | 224 | <p> |
jackalmage@5911 | 225 | Keyframes are used to specify the values for the animating properties |
jackalmage@5911 | 226 | at various points during the animation. |
jackalmage@5911 | 227 | The keyframes specify the behavior of one cycle of the animation; |
jackalmage@5911 | 228 | the animation may iterate one or more times. |
jackalmage@5911 | 229 | |
jackalmage@5911 | 230 | <p> |
jackalmage@5911 | 231 | Keyframes are specified using a specialized CSS at-rule. |
jackalmage@5911 | 232 | A @keyframes rule consists of the keyword "@keyframes", |
jackalmage@5911 | 233 | followed by an identifier giving a name for the animation |
jackalmage@5911 | 234 | (which will be referenced using 'animation-name'), |
jackalmage@5911 | 235 | followed by a set of style rules |
jackalmage@5911 | 236 | (delimited by curly braces). |
jackalmage@5911 | 237 | |
jackalmage@5911 | 238 | <p> |
jackalmage@5911 | 239 | The <dfn>keyframe selector</dfn> for a keyframe style rule |
jackalmage@5911 | 240 | consists of a comma-separated list of percentage values |
jackalmage@5911 | 241 | or the keywords 'from' or 'to'. |
jackalmage@5911 | 242 | The selector is used to specify the percentage along the duration of the animation that the keyframe represents. |
jackalmage@5911 | 243 | The keyframe itself is specified by the block of property values declared on the selector. |
jackalmage@5911 | 244 | The keyword 'from' is equivalent to the value ''0%''. |
jackalmage@5911 | 245 | The keyword 'to' is equivalent to the value ''100%''. |
jackalmage@5911 | 246 | <span class='note'>Note that the percentage unit specifier must be used on percentage values. |
jackalmage@5911 | 247 | Therefore, ''0'' is an invalid keyframe selector.</span> |
jackalmage@5911 | 248 | |
jackalmage@5911 | 249 | <p> |
jackalmage@5911 | 250 | If a ''0%'' or ''from'' keyframe is not specified, |
jackalmage@5911 | 251 | then the user agent constructs a ''0%'' keyframe |
jackalmage@5911 | 252 | using the computed values of the properties being animated. |
jackalmage@5911 | 253 | If a ''100%'' or ''to'' keyframe is not specified, |
jackalmage@5911 | 254 | then the user agent constructs a ''100%'' keyframe |
sylvaing@6384 | 255 | using the computed values of the properties being animated. |
sylvaing@6384 | 256 | If a keyframe selector specifies |
sylvaing@6384 | 257 | negative percentage values or |
sylvaing@6384 | 258 | values higher than 100%, |
sylvaing@6384 | 259 | then the keyframe will be ignored. |
jackalmage@5911 | 260 | |
jackalmage@5911 | 261 | <p> |
sylvaing@6220 | 262 | The <dfn>keyframe declaration block</dfn> for a keyframe rule |
jackalmage@5911 | 263 | consists of properties and values. |
jackalmage@5911 | 264 | Properties that are unable to be animated are ignored in these rules, |
jackalmage@5911 | 265 | with the exception of 'animation-timing-function', |
sylvaing@6220 | 266 | the behavior of which is described below. In addition, keyframe rule declarations qualified with !important are ignored. |
jackalmage@5911 | 267 | |
jackalmage@5911 | 268 | <p class="issue"> |
jackalmage@5911 | 269 | Need to describe what happens if a property is not present in all keyframes. |
jackalmage@5911 | 270 | |
jackalmage@5911 | 271 | <p> |
jackalmage@5911 | 272 | The @keyframes rule that is used by an animation |
jackalmage@5911 | 273 | will be the last one encountered in sorted rules order |
jackalmage@5911 | 274 | that matches the name of the animation specified by the 'animation-name' property. |
jackalmage@5911 | 275 | @keyframes rules do not cascade; |
jackalmage@5911 | 276 | therefore, an animation will never derive keyframes from more than one @keyframes rule. |
jackalmage@5911 | 277 | |
jackalmage@5911 | 278 | <p> |
jackalmage@5911 | 279 | To determine the set of keyframes, |
jackalmage@5911 | 280 | all of the values in the selectors are sorted in increasing order by time. |
jackalmage@5911 | 281 | If there are any duplicates, |
jackalmage@5911 | 282 | then the last keyframe specified inside the @keyframes rule |
jackalmage@5911 | 283 | will be used to provide the keyframe information for that time. |
jackalmage@5911 | 284 | There is no cascading within a @keyframes rule if multiple keyframes specify the same keyframe selector values. |
dino@937 | 285 | |
jackalmage@5911 | 286 | <p> |
sylvaing@6047 | 287 | If a property is not specified for a keyframe, |
jackalmage@5911 | 288 | or is specified but invalid, |
jackalmage@5911 | 289 | the animation of that property proceeds as if that keyframe did not exist. |
jackalmage@5911 | 290 | Conceptually, |
jackalmage@5911 | 291 | it is as if a set of keyframes is constructed for each property that is present in any of the keyframes, |
jackalmage@5911 | 292 | and an animation is run independently for each property. |
jackalmage@5911 | 293 | |
jackalmage@5911 | 294 | <div class="example"> |
jackalmage@5911 | 295 | <pre> |
jackalmage@5911 | 296 | @keyframes wobble { |
dbaron@6082 | 297 | 0% { |
dbaron@6082 | 298 | left: 100px; |
dbaron@6082 | 299 | } |
dino@937 | 300 | |
dbaron@6082 | 301 | 40% { |
dbaron@6082 | 302 | left: 150px; |
dbaron@6082 | 303 | } |
dino@937 | 304 | |
dbaron@6082 | 305 | 60% { |
dbaron@6082 | 306 | left: 75px; |
dbaron@6082 | 307 | } |
dino@937 | 308 | |
dbaron@6082 | 309 | 100% { |
dbaron@6082 | 310 | left: 100px; |
dbaron@6082 | 311 | } |
jackalmage@5911 | 312 | }</pre> |
dino@937 | 313 | |
jackalmage@5911 | 314 | <p> |
jackalmage@5911 | 315 | Four keyframes are specified for the animation named "wobble". |
jackalmage@5911 | 316 | In the first keyframe, |
jackalmage@5911 | 317 | shown at the beginning of the animation cycle, |
jackalmage@5911 | 318 | the value of the 'left' property being animated is ''100px''. |
jackalmage@5911 | 319 | By 40% of the animation duration, |
jackalmage@5911 | 320 | 'left' has animated to ''150px''. |
jackalmage@5911 | 321 | At 60% of the animation duration, |
jackalmage@5911 | 322 | 'left' has animated back to ''75px''. |
jackalmage@5911 | 323 | At the end of the animation cycle, |
jackalmage@5911 | 324 | the value of 'left' has returned to ''100px''. |
jackalmage@5911 | 325 | The diagram below shows the state of the animation if it were given a duration of ''10s''. |
jackalmage@5911 | 326 | |
jackalmage@5911 | 327 | <div class="figure"> |
jackalmage@5911 | 328 | <img src="animation1.png" alt=""> |
jackalmage@5911 | 329 | |
jackalmage@5911 | 330 | <p class="caption"> |
jackalmage@5911 | 331 | Animations states specified by keyframes |
jackalmage@5911 | 332 | </div> |
jackalmage@5911 | 333 | </div> |
dino@937 | 334 | |
jackalmage@5911 | 335 | <p> |
jackalmage@5911 | 336 | The following is the grammar for the keyframes rule. |
jackalmage@5911 | 337 | |
jackalmage@5911 | 338 | <pre> |
jackalmage@5911 | 339 | keyframes_rule: KEYFRAMES_SYM S+ IDENT S* '{' S* keyframes_blocks '}' S*; |
dino@937 | 340 | |
jackalmage@5911 | 341 | keyframes_blocks: [ keyframe_selector '{' S* declaration? [ ';' S* declaration? ]* '}' S* ]* ; |
dbaron@4123 | 342 | |
jackalmage@5911 | 343 | keyframe_selector: [ FROM_SYM | TO_SYM | PERCENTAGE ] S* [ ',' S* [ FROM_SYM | TO_SYM | PERCENTAGE ] S* ]*; |
dbaron@4123 | 344 | |
jackalmage@5911 | 345 | @{K}{E}{Y}{F}{R}{A}{M}{E}{S} {return KEYFRAMES_SYM;} |
jackalmage@5911 | 346 | {F}{R}{O}{M} {return FROM_SYM;} |
jackalmage@5911 | 347 | {T}{O} {return TO_SYM;}</pre> |
dino@937 | 348 | |
dino@937 | 349 | |
jackalmage@5911 | 350 | <h3 id="timing-functions"> |
jackalmage@5911 | 351 | Timing functions for keyframes</h3> |
dino@937 | 352 | |
jackalmage@5911 | 353 | <p> |
jackalmage@5911 | 354 | A keyframe style rule may also declare the timing function that is to be used |
jackalmage@5911 | 355 | as the animation moves to the next keyframe. |
jackalmage@5911 | 356 | |
jackalmage@5911 | 357 | <div class="example"> |
jackalmage@5911 | 358 | <pre> |
jackalmage@5911 | 359 | @keyframes bounce { |
dino@937 | 360 | |
dbaron@6082 | 361 | from { |
dbaron@6082 | 362 | top: 100px; |
dbaron@6082 | 363 | animation-timing-function: ease-out; |
dbaron@6082 | 364 | } |
dino@937 | 365 | |
dbaron@6082 | 366 | 25% { |
dbaron@6082 | 367 | top: 50px; |
dbaron@6082 | 368 | animation-timing-function: ease-in; |
dbaron@6082 | 369 | } |
dino@937 | 370 | |
dbaron@6082 | 371 | 50% { |
dbaron@6082 | 372 | top: 100px; |
dbaron@6082 | 373 | animation-timing-function: ease-out; |
dbaron@6082 | 374 | } |
dino@937 | 375 | |
dbaron@6082 | 376 | 75% { |
dbaron@6082 | 377 | top: 75px; |
dbaron@6082 | 378 | animation-timing-function: ease-in; |
dbaron@6082 | 379 | } |
dino@937 | 380 | |
dbaron@6082 | 381 | to { |
dbaron@6082 | 382 | top: 100px; |
dbaron@6082 | 383 | } |
dbaron@5370 | 384 | |
jackalmage@5911 | 385 | }</pre> |
dino@937 | 386 | |
jackalmage@5911 | 387 | <p> |
jackalmage@5911 | 388 | Five keyframes are specified for the animation named "bounce". |
jackalmage@5911 | 389 | Between the first and second keyframe |
jackalmage@5911 | 390 | (i.e., between 0% and 25%) |
jackalmage@5911 | 391 | an ''ease-out'' timing function is used. |
jackalmage@5911 | 392 | Between the second and third keyframe |
jackalmage@5911 | 393 | (i.e., between 25% and 50%) |
jackalmage@5911 | 394 | an ''ease-in'' timing function is used. |
jackalmage@5911 | 395 | And so on. |
jackalmage@5911 | 396 | The effect will appear as an element that moves up the page ''50px'', |
jackalmage@5911 | 397 | slowing down as it reaches its highest point |
jackalmage@5911 | 398 | then speeding up as it falls back to ''100px''. |
jackalmage@5911 | 399 | The second half of the animation behaves in a similar manner, |
jackalmage@5911 | 400 | but only moves the element ''25px'' up the page. |
jackalmage@5911 | 401 | </div> |
jackalmage@5911 | 402 | |
jackalmage@5911 | 403 | <p> |
jackalmage@5911 | 404 | A timing function specified on the "to" or 100% keyframe is ignored. |
dino@937 | 405 | |
jackalmage@5911 | 406 | <p> |
jackalmage@5911 | 407 | See the 'animation-timing-function' property for more information. |
dino@937 | 408 | |
dino@937 | 409 | |
jackalmage@5911 | 410 | <h3 id="animation-name-property"> |
jackalmage@5911 | 411 | The 'animation-name' Property</h3> |
dino@937 | 412 | |
jackalmage@5911 | 413 | <p> |
jackalmage@5911 | 414 | The 'animation-name' property defines a list of animations that apply. |
jackalmage@5911 | 415 | Each name is used to select the keyframe at-rule |
jackalmage@5911 | 416 | that provides the property values for the animation. |
jackalmage@5911 | 417 | If the name does not match any keyframe at-rule, |
jackalmage@5911 | 418 | there are no properties to be animated |
jackalmage@5911 | 419 | and the animation will not execute. |
jackalmage@5911 | 420 | Furthermore, |
jackalmage@5911 | 421 | if the animation name is ''none'' |
jackalmage@5911 | 422 | then there will be no animation. |
jackalmage@5911 | 423 | This can be used to override any animations coming from the cascade. |
jackalmage@5911 | 424 | If multiple animations are attempting to modify the same property, |
jackalmage@5911 | 425 | then the animation closest to the end of the list of names wins. |
jackalmage@5911 | 426 | |
jackalmage@5911 | 427 | <p id="list-matching"> |
jackalmage@5911 | 428 | Each animation listed by name |
jackalmage@5911 | 429 | should have a corresponding value for the other animation properties listed below. |
jackalmage@5911 | 430 | If the lists of values for the other animation properties do not have the same length, |
jackalmage@5911 | 431 | the length of the 'animation-name' list |
dbaron@6737 | 432 | determines the number of items in each list examined when starting animations. |
jackalmage@5911 | 433 | The lists are matched up from the first value: |
jackalmage@5911 | 434 | excess values at the end are not used. |
jackalmage@5911 | 435 | If one of the other properties doesn't have enough comma-separated values to match the number of values of 'animation-name', |
jackalmage@5911 | 436 | the UA must calculate its used value by repeating the list of values until there are enough. |
jackalmage@5911 | 437 | This truncation or repetition does not affect the computed value. |
jackalmage@5911 | 438 | <span class="note">Note: This is analogous to the behavior of the 'background-*'properties, |
jackalmage@5911 | 439 | with 'background-image' analogous to 'animation-name'.</span> |
jackalmage@5911 | 440 | |
dino@937 | 441 | |
jackalmage@5911 | 442 | <table class=propdef> |
jackalmage@5911 | 443 | <tr> |
jackalmage@5911 | 444 | <th>Name:</th> |
jackalmage@5911 | 445 | <td><dfn>animation-name</dfn> |
jackalmage@5911 | 446 | <tr> |
jackalmage@5911 | 447 | <th><a href="#values">Value</a>: |
dbaron@6739 | 448 | <td><span><single-animation-name></span> [ ',' <span><single-animation-name></span> ]* |
jackalmage@5911 | 449 | <tr> |
jackalmage@5911 | 450 | <th>Initial: |
jackalmage@5911 | 451 | <td>''none'' |
jackalmage@5911 | 452 | <tr> |
jackalmage@5911 | 453 | <th>Applies To: |
jackalmage@5911 | 454 | <td>all elements |
jackalmage@5911 | 455 | <tr> |
jackalmage@5911 | 456 | <th>Inherited: |
jackalmage@5911 | 457 | <td>no |
jackalmage@5911 | 458 | <tr> |
dbaron@6735 | 459 | <th>Animatable: |
dbaron@6735 | 460 | <td>no |
dbaron@6735 | 461 | <tr> |
dbaron@6735 | 462 | <th>Percentages: |
dbaron@6735 | 463 | <td>N/A |
jackalmage@5911 | 464 | <tr> |
jackalmage@5911 | 465 | <th>Media: |
jackalmage@5911 | 466 | <td>visual |
jackalmage@5911 | 467 | <tr> |
dbaron@6735 | 468 | <th>Computed Value: |
dbaron@6735 | 469 | <td>As specified |
jackalmage@5911 | 470 | <tr> |
jackalmage@5911 | 471 | <th>Canonical Order: |
jackalmage@5911 | 472 | <td><abbr title="follows order of property value definition">per grammar</abbr> |
jackalmage@5911 | 473 | </table> |
dino@937 | 474 | |
dbaron@6736 | 475 | <div class="prod"> |
dbaron@6739 | 476 | <dfn id="single-animation-name"><single-animation-name></dfn> = none | <IDENT> |
dbaron@6736 | 477 | </div> |
dbaron@6736 | 478 | |
jackalmage@5911 | 479 | <!-- |
jackalmage@5911 | 480 | <p> |
jackalmage@5911 | 481 | 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. |
jackalmage@5911 | 482 | |
jackalmage@5911 | 483 | <div class="example"> |
jackalmage@5911 | 484 | <p style="display:none"> |
jackalmage@5911 | 485 | Example(s): |
jackalmage@5911 | 486 | |
jackalmage@5911 | 487 | <pre> |
jackalmage@5911 | 488 | @keyframes 'border-bloat' { |
jackalmage@5911 | 489 | from { |
jackalmage@5911 | 490 | border-width: 0; |
jackalmage@5911 | 491 | } |
jackalmage@5911 | 492 | to { |
jackalmage@5911 | 493 | border-width: 10px; |
jackalmage@5911 | 494 | } |
jackalmage@5911 | 495 | } |
dino@937 | 496 | |
jackalmage@5911 | 497 | @keyframes 'border-diet' { |
jackalmage@5911 | 498 | from { |
jackalmage@5911 | 499 | border-width: 4px; |
jackalmage@5911 | 500 | } |
jackalmage@5911 | 501 | to { |
jackalmage@5911 | 502 | border-width: 2px; |
jackalmage@5911 | 503 | } |
jackalmage@5911 | 504 | } |
dino@937 | 505 | |
jackalmage@5911 | 506 | div { |
jackalmage@5911 | 507 | animation-name: 'border-bloat', 'border-diet'; |
jackalmage@5911 | 508 | animation-duration: 10s, 4s; |
jackalmage@5911 | 509 | } |
jackalmage@5911 | 510 | </pre> |
jackalmage@5911 | 511 | <p> |
jackalmage@5911 | 512 | The above example has two animations executing on the same property, 'border-width'. The animations are additive. That is, the |
jackalmage@5911 | 513 | resulting value for the property will be the addition of the values from the |
jackalmage@5911 | 514 | two animations. |
jackalmage@5911 | 515 | |
jackalmage@5911 | 516 | <p> |
jackalmage@5911 | 517 | At time '0s' the element's border will be 4px wide (0px from 'border-bloat' plus 4px from 'border-diet'). |
jackalmage@5911 | 518 | At time '4s' the element's border will be 6px wide (4px from 'border-bloat' plus 2px from 'border-diet'). |
jackalmage@5911 | 519 | At time '10s' the element's border will be 10px wide (10px from 'border-bloat' and no addition from |
jackalmage@5911 | 520 | 'border-diet' as it is no longer executing). |
jackalmage@5911 | 521 | |
jackalmage@5911 | 522 | </div> |
jackalmage@5911 | 523 | --> |
dino@937 | 524 | |
dino@937 | 525 | |
jackalmage@5911 | 526 | <h3 id="animation-duration-property"> |
jackalmage@5911 | 527 | The 'animation-duration' Property</h3> |
dino@937 | 528 | |
jackalmage@5911 | 529 | <p> |
jackalmage@5911 | 530 | The 'animation-duration' property defines the length of time that an animation takes to complete one cycle. |
dino@937 | 531 | |
jackalmage@5911 | 532 | |
jackalmage@5911 | 533 | <table class=propdef> |
jackalmage@5911 | 534 | <tr> |
jackalmage@5911 | 535 | <th>Name:</th> |
jackalmage@5911 | 536 | <td><dfn>animation-duration</dfn> |
jackalmage@5911 | 537 | <tr> |
jackalmage@5911 | 538 | <th><a href="#values">Value</a>: |
dbaron@6739 | 539 | <td> <span><time></span> [, <span><time></span>]* |
jackalmage@5911 | 540 | <tr> |
jackalmage@5911 | 541 | <th>Initial: |
jackalmage@5911 | 542 | <td>''0s'' |
jackalmage@5911 | 543 | <tr> |
jackalmage@5911 | 544 | <th>Applies To: |
jackalmage@5911 | 545 | <td>all elements |
jackalmage@5911 | 546 | <tr> |
jackalmage@5911 | 547 | <th>Inherited: |
jackalmage@5911 | 548 | <td>no |
jackalmage@5911 | 549 | <tr> |
dbaron@6735 | 550 | <th>Animatable: |
dbaron@6735 | 551 | <td>no |
dbaron@6735 | 552 | <tr> |
dbaron@6735 | 553 | <th>Percentages: |
dbaron@6735 | 554 | <td>N/A |
jackalmage@5911 | 555 | <tr> |
jackalmage@5911 | 556 | <th>Media: |
jackalmage@5911 | 557 | <td>visual |
jackalmage@5911 | 558 | <tr> |
dbaron@6735 | 559 | <th>Computed Value: |
dbaron@6735 | 560 | <td>as specified |
jackalmage@5911 | 561 | <tr> |
jackalmage@5911 | 562 | <th>Canonical Order: |
jackalmage@5911 | 563 | <td><abbr title="follows order of property value definition">per grammar</abbr> |
jackalmage@5911 | 564 | </table> |
jackalmage@5911 | 565 | |
jackalmage@5911 | 566 | <p> |
jackalmage@5911 | 567 | The initial value is ''0s'', |
sylvaing@6222 | 568 | meaning that the animation takes no time. |
sylvaing@6218 | 569 | When the duration is ''0s'' 'animation-fill-mode' still applies, |
jackalmage@5911 | 570 | so an animation that fills backwards |
jackalmage@5911 | 571 | will show the value of the 0% keyframe during any delay period, |
jackalmage@5911 | 572 | and an animation that fills forwards will retain the value specified at the 100% keyframe, |
jackalmage@5911 | 573 | even if the animation was instantaneous. |
jackalmage@5911 | 574 | Also, animation events are still fired. |
sylvaing@6222 | 575 | A negative 'animation-duration' value renders the declaration invalid. |
jackalmage@5911 | 576 | |
jackalmage@5911 | 577 | |
jackalmage@5911 | 578 | <h3 id="animation-timing-function-property"> |
jackalmage@5911 | 579 | The 'animation-timing-function' Property</h3> |
jackalmage@5911 | 580 | |
jackalmage@5911 | 581 | <p> |
jackalmage@5911 | 582 | The 'animation-timing-function' property describes how the animation will progress over one cycle of its duration. |
jackalmage@5911 | 583 | See the 'transition-timing-function' property [[!CSS3-TRANSITIONS]] for a complete description of timing function calculation. |
jackalmage@5911 | 584 | |
jackalmage@5911 | 585 | <table class=propdef> |
jackalmage@5911 | 586 | <tr> |
jackalmage@5911 | 587 | <th>Name:</th> |
jackalmage@5911 | 588 | <td><dfn>animation-timing-function</dfn> |
jackalmage@5911 | 589 | <tr> |
jackalmage@5911 | 590 | <th><a href="#values">Value</a>: |
dbaron@6739 | 591 | <td><span><single-animation-timing-function></span> [ ',' <span><single-animation-timing-function></span> ]* |
jackalmage@5911 | 592 | <tr> |
jackalmage@5911 | 593 | <th>Initial: |
jackalmage@5911 | 594 | <td>''ease'' |
jackalmage@5911 | 595 | <tr> |
jackalmage@5911 | 596 | <th>Applies To: |
jackalmage@5911 | 597 | <td>all elements |
jackalmage@5911 | 598 | <tr> |
jackalmage@5911 | 599 | <th>Inherited: |
jackalmage@5911 | 600 | <td>no |
jackalmage@5911 | 601 | <tr> |
dbaron@6735 | 602 | <th>Animatable: |
dbaron@6735 | 603 | <td>no |
dbaron@6735 | 604 | <tr> |
dbaron@6735 | 605 | <th>Percentages: |
dbaron@6735 | 606 | <td>N/A |
jackalmage@5911 | 607 | <tr> |
jackalmage@5911 | 608 | <th>Media: |
jackalmage@5911 | 609 | <td>visual |
jackalmage@5911 | 610 | <tr> |
dbaron@6735 | 611 | <th>Computed Value: |
dbaron@6735 | 612 | <td>as specified |
jackalmage@5911 | 613 | <tr> |
jackalmage@5911 | 614 | <th>Canonical Order: |
jackalmage@5911 | 615 | <td><abbr title="follows order of property value definition">per grammar</abbr> |
jackalmage@5911 | 616 | </table> |
jackalmage@5911 | 617 | |
dbaron@6736 | 618 | <div class="prod"> |
dbaron@6739 | 619 | <dfn id="single-animation-timing-function"><single-animation-timing-function></dfn> = |
dbaron@6736 | 620 | ease | linear | ease-in | ease-out | ease-in-out | |
dbaron@6736 | 621 | step-start | step-end | |
dbaron@6736 | 622 | steps(<number> [, [ start | end ] ]?) | |
dbaron@6736 | 623 | cubic-bezier(<number>, <number>, <number>, |
dbaron@6736 | 624 | <number>) |
dbaron@6736 | 625 | </div> |
dbaron@6736 | 626 | |
jackalmage@5911 | 627 | <p> |
jackalmage@5911 | 628 | For a keyframed animation, |
jackalmage@5911 | 629 | the 'animation-timing-function' applies between keyframes, |
jackalmage@5911 | 630 | not over the entire animation. |
jackalmage@5911 | 631 | For example, |
jackalmage@5911 | 632 | in the case of an ''ease-in-out'' timing function, |
jackalmage@5911 | 633 | an animation will ease in at the start of the keyframe |
jackalmage@5911 | 634 | and ease out at the end of the keyframe. |
jackalmage@5911 | 635 | An 'animation-timing-function' defined within a keyframe block applies to that keyframe, |
jackalmage@5911 | 636 | otherwise the timing function specified for the animation is used. |
jackalmage@5911 | 637 | |
jackalmage@5911 | 638 | |
jackalmage@5911 | 639 | <h3 id="animation-iteration-count-property"> |
jackalmage@5911 | 640 | The 'animation-iteration-count' Property</h3> |
jackalmage@5911 | 641 | |
jackalmage@5911 | 642 | <p> |
jackalmage@5911 | 643 | The 'animation-iteration-count' property specifies the number of times an animation cycle is played. |
jackalmage@5911 | 644 | The initial value is ''1'', |
jackalmage@5911 | 645 | meaning the animation will play from beginning to end once. |
jackalmage@5911 | 646 | A value of ''infinite'' will cause the animation to repeat forever. |
jackalmage@5911 | 647 | Non-integer numbers will cause the animation to end part-way through a cycle. |
jackalmage@5911 | 648 | Negative values of 'animation-iteration-count' are invalid. |
jackalmage@5911 | 649 | This property is often used in conjunction an 'animation-direction' value of ''alternate'', |
jackalmage@5911 | 650 | which will cause the animation to play in reverse on alternate cycles. |
jackalmage@5911 | 651 | |
jackalmage@5911 | 652 | <table class=propdef> |
jackalmage@5911 | 653 | <tr> |
jackalmage@5911 | 654 | <th>Name:</th> |
jackalmage@5911 | 655 | <td><dfn>animation-iteration-count</dfn> |
jackalmage@5911 | 656 | <tr> |
jackalmage@5911 | 657 | <th><a href="#values">Value</a>: |
dbaron@6739 | 658 | <td><span><single-animation-iteration-count></span> [ ',' <span><single-animation-iteration-count></span> ]* |
jackalmage@5911 | 659 | <tr> |
jackalmage@5911 | 660 | <th>Initial: |
jackalmage@5911 | 661 | <td>''1'' |
jackalmage@5911 | 662 | <tr> |
jackalmage@5911 | 663 | <th>Applies To: |
jackalmage@5911 | 664 | <td>all elements |
jackalmage@5911 | 665 | <tr> |
jackalmage@5911 | 666 | <th>Inherited: |
jackalmage@5911 | 667 | <td>no |
jackalmage@5911 | 668 | <tr> |
dbaron@6735 | 669 | <th>Animatable: |
dbaron@6735 | 670 | <td>no |
dbaron@6735 | 671 | <tr> |
dbaron@6735 | 672 | <th>Percentages: |
dbaron@6735 | 673 | <td>N/A |
jackalmage@5911 | 674 | <tr> |
jackalmage@5911 | 675 | <th>Media: |
jackalmage@5911 | 676 | <td>visual |
jackalmage@5911 | 677 | <tr> |
dbaron@6735 | 678 | <th>Computed Value: |
dbaron@6735 | 679 | <td>as specified |
jackalmage@5911 | 680 | <tr> |
jackalmage@5911 | 681 | <th>Canonical Order: |
jackalmage@5911 | 682 | <td><abbr title="follows order of property value definition">per grammar</abbr> |
jackalmage@5911 | 683 | </table> |
jackalmage@5911 | 684 | |
dbaron@6736 | 685 | <div class="prod"> |
dbaron@6739 | 686 | <dfn id="single-animation-iteration-count"><single-animation-iteration-count></dfn> = |
dbaron@6736 | 687 | infinite | <number> |
dbaron@6736 | 688 | </div> |
jackalmage@5911 | 689 | |
jackalmage@5911 | 690 | <h3 id="animation-direction-property"> |
jackalmage@5911 | 691 | The 'animation-direction' Property</h3> |
jackalmage@5911 | 692 | |
jackalmage@5911 | 693 | <p> |
jackalmage@5911 | 694 | The 'animation-direction' property defines whether or not the animation should play in reverse on some or all cycles. |
jackalmage@5911 | 695 | When an animation is played in reverse the timing functions are also reversed. |
jackalmage@5911 | 696 | For example, when played in reverse an ease-in animation would appear to be an ease-out animation. |
jackalmage@5911 | 697 | |
jackalmage@5911 | 698 | <table class=propdef> |
jackalmage@5911 | 699 | <tr> |
jackalmage@5911 | 700 | <th>Name:</th> |
jackalmage@5911 | 701 | <td><dfn>animation-direction</dfn> |
jackalmage@5911 | 702 | <tr> |
jackalmage@5911 | 703 | <th><a href="#values">Value</a>: |
dbaron@6739 | 704 | <td><span><single-animation-direction></span> [ ',' <span><single-animation-direction></span> ]* |
jackalmage@5911 | 705 | <tr> |
jackalmage@5911 | 706 | <th>Initial: |
jackalmage@5911 | 707 | <td>''normal'' |
jackalmage@5911 | 708 | <tr> |
jackalmage@5911 | 709 | <th>Applies To: |
jackalmage@5911 | 710 | <td>all elements |
jackalmage@5911 | 711 | <tr> |
jackalmage@5911 | 712 | <th>Inherited: |
jackalmage@5911 | 713 | <td>no |
jackalmage@5911 | 714 | <tr> |
dbaron@6735 | 715 | <th>Animatable: |
dbaron@6735 | 716 | <td>no |
dbaron@6735 | 717 | <tr> |
dbaron@6735 | 718 | <th>Percentages: |
dbaron@6735 | 719 | <td>N/A |
jackalmage@5911 | 720 | <tr> |
jackalmage@5911 | 721 | <th>Media: |
jackalmage@5911 | 722 | <td>visual |
jackalmage@5911 | 723 | <tr> |
dbaron@6735 | 724 | <th>Computed Value: |
dbaron@6735 | 725 | <td>as specified |
jackalmage@5911 | 726 | <tr> |
jackalmage@5911 | 727 | <th>Canonical Order: |
jackalmage@5911 | 728 | <td><abbr title="follows order of property value definition">per grammar</abbr> |
jackalmage@5911 | 729 | </table> |
jackalmage@5911 | 730 | |
dbaron@6736 | 731 | <div class="prod"> |
dbaron@6739 | 732 | <dfn id="single-animation-direction"><single-animation-direction></dfn> = |
dbaron@6736 | 733 | normal | reverse | alternate | alternate-reverse |
dbaron@6736 | 734 | </div> |
dbaron@6736 | 735 | |
jackalmage@5911 | 736 | <dl> |
jackalmage@5911 | 737 | <dt><dfn>normal</dfn> |
jackalmage@5911 | 738 | <dd> |
jackalmage@5911 | 739 | All iterations of the animation are played as specified. |
jackalmage@5911 | 740 | |
jackalmage@5911 | 741 | <dt><dfn>reverse</dfn> |
jackalmage@5911 | 742 | <dd> |
jackalmage@5911 | 743 | All iterations of the animation are played in the reverse direction from the way they were specified. |
jackalmage@5911 | 744 | |
jackalmage@5911 | 745 | <dt><dfn>alternate</dfn> |
jackalmage@5911 | 746 | <dd> |
jackalmage@5911 | 747 | The animation cycle iterations that are odd counts are played in the normal direction, |
jackalmage@5911 | 748 | and the animation cycle iterations that are even counts are played in a reverse direction. |
jackalmage@5911 | 749 | |
jackalmage@5911 | 750 | <dt><dfn>alternate-reverse</dfn> |
jackalmage@5911 | 751 | <dd> |
jackalmage@5911 | 752 | The animation cycle iterations that are odd counts are played in the reverse direction, |
jackalmage@5911 | 753 | and the animation cycle iterations that are even counts are played in a normal direction. |
jackalmage@5911 | 754 | </dl> |
jackalmage@5911 | 755 | |
jackalmage@5911 | 756 | <p class='note'> |
jackalmage@5911 | 757 | Note that for the purpose of determining whether an iteration is even or odd, |
jackalmage@5911 | 758 | iterations start counting from 1. |
jackalmage@5911 | 759 | |
jackalmage@5911 | 760 | |
jackalmage@5911 | 761 | <h3 id="animation-play-state-property"> |
jackalmage@5911 | 762 | The 'animation-play-state' Property</h3> |
jackalmage@5911 | 763 | |
jackalmage@5911 | 764 | <p> |
jackalmage@5911 | 765 | The 'animation-play-state' property defines whether the animation is running or paused. |
jackalmage@5911 | 766 | A running animation can be paused by setting this property to ''paused''. |
jackalmage@5911 | 767 | To continue running a paused animation this property can be set to ''running''. |
jackalmage@5911 | 768 | A paused animation will continue to display the current value of the animation in a static state, |
jackalmage@5911 | 769 | as if the time of the animation is constant. |
jackalmage@5911 | 770 | When a paused animation is resumed, |
jackalmage@5911 | 771 | it restarts from the current value, |
jackalmage@5911 | 772 | not necessarily from the beginning of the animation. |
jackalmage@5911 | 773 | |
jackalmage@5911 | 774 | <table class=propdef> |
jackalmage@5911 | 775 | <tr> |
jackalmage@5911 | 776 | <th>Name:</th> |
jackalmage@5911 | 777 | <td><dfn>animation-play-state</dfn> |
jackalmage@5911 | 778 | <tr> |
jackalmage@5911 | 779 | <th><a href="#values">Value</a>: |
dbaron@6739 | 780 | <td><span><single-animation-play-state></span> [ ',' <span><single-animation-play-state></span> ]* |
jackalmage@5911 | 781 | <tr> |
jackalmage@5911 | 782 | <th>Initial: |
jackalmage@5911 | 783 | <td>''running'' |
jackalmage@5911 | 784 | <tr> |
jackalmage@5911 | 785 | <th>Applies To: |
jackalmage@5911 | 786 | <td>all elements |
jackalmage@5911 | 787 | <tr> |
jackalmage@5911 | 788 | <th>Inherited: |
jackalmage@5911 | 789 | <td>no |
jackalmage@5911 | 790 | <tr> |
dbaron@6735 | 791 | <th>Animatable: |
dbaron@6735 | 792 | <td>no |
dbaron@6735 | 793 | <tr> |
dbaron@6735 | 794 | <th>Percentages: |
dbaron@6735 | 795 | <td>N/A |
jackalmage@5911 | 796 | <tr> |
jackalmage@5911 | 797 | <th>Media: |
jackalmage@5911 | 798 | <td>visual |
jackalmage@5911 | 799 | <tr> |
dbaron@6735 | 800 | <th>Computed Value: |
dbaron@6735 | 801 | <td>as specified |
jackalmage@5911 | 802 | <tr> |
jackalmage@5911 | 803 | <th>Canonical Order: |
jackalmage@5911 | 804 | <td><abbr title="follows order of property value definition">per grammar</abbr> |
jackalmage@5911 | 805 | </table> |
jackalmage@5911 | 806 | |
dbaron@6736 | 807 | <div class="prod"> |
dbaron@6739 | 808 | <dfn id="single-animation-play-state"><single-animation-play-state></dfn> = |
dbaron@6736 | 809 | running | paused |
dbaron@6736 | 810 | </div> |
jackalmage@5911 | 811 | |
jackalmage@5911 | 812 | <h3 id="animation-delay-property"> |
jackalmage@5911 | 813 | The 'animation-delay' Property</h3> |
jackalmage@5911 | 814 | |
jackalmage@5911 | 815 | <p> |
jackalmage@5911 | 816 | The 'animation-delay' property defines when the animation will start. |
jackalmage@5911 | 817 | It allows an animation to begin execution some time after it is applied. |
jackalmage@5911 | 818 | An 'animation-delay' value of ''0s'' means the animation will execute as soon as it is applied. |
jackalmage@5911 | 819 | Otherwise, the value specifies an offset from the moment the animation is applied, |
jackalmage@5911 | 820 | and the animation will delay execution by that offset. |
jackalmage@5911 | 821 | |
jackalmage@5911 | 822 | <p> |
jackalmage@5911 | 823 | If the value for 'animation-delay' is a negative time offset |
jackalmage@5911 | 824 | then the animation will execute the moment it is applied, |
jackalmage@5911 | 825 | but will appear to have begun execution at the specified offset. |
jackalmage@5911 | 826 | That is, the animation will appear to begin part-way through its play cycle. |
jackalmage@5911 | 827 | In the case where an animation has implied starting values and a negative 'animation-delay', |
jackalmage@5911 | 828 | the starting values are taken from the moment the animation is applied. |
jackalmage@5911 | 829 | |
jackalmage@5911 | 830 | <table class=propdef> |
jackalmage@5911 | 831 | <tr> |
jackalmage@5911 | 832 | <th>Name:</th> |
sylvaing@6222 | 833 | <td><dfn>animation-delay</dfn> |
jackalmage@5911 | 834 | <tr> |
sylvaing@6222 | 835 | <th><a href="#values">Value</a>: |
dbaron@6739 | 836 | <td> <span><time></span> [, <span><time></span>]* |
jackalmage@5911 | 837 | <tr> |
jackalmage@5911 | 838 | <th>Initial: |
jackalmage@5911 | 839 | <td>''0s'' |
jackalmage@5911 | 840 | <tr> |
jackalmage@5911 | 841 | <th>Applies To: |
jackalmage@5911 | 842 | <td>all elements |
jackalmage@5911 | 843 | <tr> |
jackalmage@5911 | 844 | <th>Inherited: |
jackalmage@5911 | 845 | <td>no |
jackalmage@5911 | 846 | <tr> |
dbaron@6735 | 847 | <th>Animatable: |
dbaron@6735 | 848 | <td>no |
dbaron@6735 | 849 | <tr> |
dbaron@6735 | 850 | <th>Percentages: |
dbaron@6735 | 851 | <td>N/A |
jackalmage@5911 | 852 | <tr> |
jackalmage@5911 | 853 | <th>Media: |
jackalmage@5911 | 854 | <td>visual |
jackalmage@5911 | 855 | <tr> |
dbaron@6735 | 856 | <th>Computed Value: |
dbaron@6735 | 857 | <td>as specified |
jackalmage@5911 | 858 | <tr> |
jackalmage@5911 | 859 | <th>Canonical Order: |
jackalmage@5911 | 860 | <td><abbr title="follows order of property value definition">per grammar</abbr> |
jackalmage@5911 | 861 | </table> |
jackalmage@5911 | 862 | |
jackalmage@5911 | 863 | |
jackalmage@5911 | 864 | <h3 id="animation-fill-mode-property"> |
jackalmage@5911 | 865 | The 'animation-fill-mode' Property</h3> |
jackalmage@5911 | 866 | |
jackalmage@5911 | 867 | <p> |
jackalmage@5911 | 868 | The 'animation-fill-mode' property defines what values are applied by the animation outside the time it is executing. |
jackalmage@5911 | 869 | By default, an animation will not affect property values |
jackalmage@5911 | 870 | between the time it is applied |
jackalmage@5911 | 871 | (the 'animation-name' property is set on an element) |
jackalmage@5911 | 872 | and the time it begins execution |
jackalmage@5911 | 873 | (which is determined by the 'animation-delay' property). |
jackalmage@5911 | 874 | Also, by default an animation does not affect property values after the animation ends |
jackalmage@5911 | 875 | (determined by the 'animation-duration' property). |
jackalmage@5911 | 876 | The 'animation-fill-mode' property can override this behavior. |
jackalmage@5911 | 877 | |
jackalmage@5911 | 878 | <p> |
jackalmage@5911 | 879 | If the value for 'animation-fill-mode' is ''backwards'', |
dbaron@6083 | 880 | then the animation will apply |
dbaron@6083 | 881 | the property values defined in the keyframe |
dbaron@6083 | 882 | that will start the first iteration of the animation, |
jackalmage@5911 | 883 | during the period defined by 'animation-delay'. |
dbaron@6083 | 884 | These are either the values of the ''from'' keyframe |
dbaron@6083 | 885 | (when 'animation-direction' is ''normal'' or ''alternate'') |
dbaron@6083 | 886 | or those of the ''to'' keyframe |
dbaron@6083 | 887 | (when 'animation-direction' is ''reverse'' or ''alternate-reverse''). |
jackalmage@5911 | 888 | |
jackalmage@5911 | 889 | <p> |
jackalmage@5911 | 890 | If the value for 'animation-fill-mode' is ''forwards'', |
dbaron@6083 | 891 | then after the animation ends |
dbaron@6083 | 892 | (as determined by its 'animation-iteration-count'), |
dbaron@6083 | 893 | the animation will apply |
dbaron@6083 | 894 | the property values for the time the animation ended. |
dbaron@6083 | 895 | When 'animation-iteration-count' is an integer greater than zero, |
dbaron@6083 | 896 | the values applied will be |
dbaron@6083 | 897 | those for the end of the last completed iteration of the animation |
dbaron@6083 | 898 | (rather than the values for |
dbaron@6083 | 899 | the start of the iteration that would be next). |
dbaron@6083 | 900 | When 'animation-iteration-count' is zero, |
dbaron@6083 | 901 | the values applied will be those that would start the first iteration |
dbaron@6083 | 902 | (just as when 'animation-fill-mode' is ''backwards''). |
jackalmage@5911 | 903 | |
jackalmage@5911 | 904 | <p> |
jackalmage@5911 | 905 | If the value for 'animation-fill-mode' is ''both'', |
jackalmage@5911 | 906 | then the animation will follow the rules for both 'forwards' and 'backwards'. |
jackalmage@5911 | 907 | That is, it will extend the animation properties in both directions. |
jackalmage@5911 | 908 | |
jackalmage@5911 | 909 | <table class=propdef> |
jackalmage@5911 | 910 | <tr> |
jackalmage@5911 | 911 | <th>Name:</th> |
jackalmage@5911 | 912 | <td><dfn>animation-fill-mode</dfn> |
jackalmage@5911 | 913 | <tr> |
jackalmage@5911 | 914 | <th><a href="#values">Value</a>: |
dbaron@6739 | 915 | <td><span><single-animation-fill-mode></span> [ ',' <span><single-animation-fill-mode></span> ]* |
jackalmage@5911 | 916 | <tr> |
jackalmage@5911 | 917 | <th>Initial: |
jackalmage@5911 | 918 | <td>''none'' |
jackalmage@5911 | 919 | <tr> |
jackalmage@5911 | 920 | <th>Applies To: |
jackalmage@5911 | 921 | <td>all elements |
jackalmage@5911 | 922 | <tr> |
jackalmage@5911 | 923 | <th>Inherited: |
jackalmage@5911 | 924 | <td>no |
jackalmage@5911 | 925 | <tr> |
dbaron@6735 | 926 | <th>Animatable: |
dbaron@6735 | 927 | <td>no |
dbaron@6735 | 928 | <tr> |
dbaron@6735 | 929 | <th>Percentages: |
dbaron@6735 | 930 | <td>N/A |
jackalmage@5911 | 931 | <tr> |
jackalmage@5911 | 932 | <th>Media: |
jackalmage@5911 | 933 | <td>visual |
jackalmage@5911 | 934 | <tr> |
dbaron@6735 | 935 | <th>Computed Value: |
dbaron@6735 | 936 | <td>as specified |
jackalmage@5911 | 937 | <tr> |
jackalmage@5911 | 938 | <th>Canonical Order: |
jackalmage@5911 | 939 | <td><abbr title="follows order of property value definition">per grammar</abbr> |
jackalmage@5911 | 940 | </table> |
jackalmage@5911 | 941 | |
dbaron@6736 | 942 | <div class="prod"> |
dbaron@6739 | 943 | <dfn id="single-animation-fill-mode"><single-animation-fill-mode></dfn> = |
dbaron@6736 | 944 | none | forwards | backwards | both |
dbaron@6736 | 945 | </div> |
jackalmage@5911 | 946 | |
jackalmage@5911 | 947 | <h3 id="animation-shorthand-property"> |
jackalmage@5911 | 948 | The 'animation' Shorthand Property |
jackalmage@5911 | 949 | |
jackalmage@5911 | 950 | <p> |
jackalmage@5911 | 951 | The 'animation' shorthand property combines seven of the animation properties into a single property. |
jackalmage@5911 | 952 | |
jackalmage@5911 | 953 | <table class=propdef> |
jackalmage@5911 | 954 | <tr> |
jackalmage@5911 | 955 | <th>Name:</th> |
jackalmage@5911 | 956 | <td><dfn>animation</dfn> |
jackalmage@5911 | 957 | <tr> |
jackalmage@5911 | 958 | <th><a href="#values">Value</a>: |
dbaron@6739 | 959 | <td><span><single-animation></span> [ ',' <span><single-animation></span> ]* |
jackalmage@5911 | 960 | <tr> |
jackalmage@5911 | 961 | <th>Initial: |
jackalmage@5911 | 962 | <td>see individual properties |
jackalmage@5911 | 963 | <tr> |
jackalmage@5911 | 964 | <th>Applies To: |
jackalmage@5911 | 965 | <td>all elements |
jackalmage@5911 | 966 | <tr> |
jackalmage@5911 | 967 | <th>Inherited: |
jackalmage@5911 | 968 | <td>see individual properties |
jackalmage@5911 | 969 | <tr> |
dbaron@6735 | 970 | <th>Animatable: |
dbaron@6735 | 971 | <td>no |
dbaron@6735 | 972 | <tr> |
dbaron@6735 | 973 | <th>Percentages: |
dbaron@6735 | 974 | <td>N/A |
jackalmage@5911 | 975 | <tr> |
jackalmage@5911 | 976 | <th>Media: |
jackalmage@5911 | 977 | <td>visual |
jackalmage@5911 | 978 | <tr> |
dbaron@6735 | 979 | <th>Computed Value: |
dbaron@6735 | 980 | <td>see individual properties |
jackalmage@5911 | 981 | <tr> |
jackalmage@5911 | 982 | <th>Canonical Order: |
jackalmage@5911 | 983 | <td><abbr title="follows order of property value definition">per grammar</abbr> |
jackalmage@5911 | 984 | </table> |
jackalmage@5911 | 985 | |
dbaron@6736 | 986 | <div class="prod"> |
dbaron@6739 | 987 | <dfn id="single-animation"><single-animation></dfn> = |
dbaron@6736 | 988 | <single-animation-name> || |
dbaron@6739 | 989 | <span><time></span> || |
dbaron@6736 | 990 | <single-animation-timing-function> || |
dbaron@6739 | 991 | <span><time></span> || |
dbaron@6736 | 992 | <single-animation-iteration-count> || |
dbaron@6736 | 993 | <single-animation-direction> || |
dbaron@6736 | 994 | <single-animation-fill-mode> |
dbaron@6736 | 995 | </div> |
dbaron@6736 | 996 | |
dbaron@6736 | 997 | <p> |
dbaron@6736 | 998 | Note that order is important within the items in this property: |
dbaron@6736 | 999 | the first value that can be parsed as a <var><time></var> is assigned to the |
dbaron@6737 | 1000 | animation-duration, |
dbaron@6736 | 1001 | and the second value that can be parsed as a <var><time></var> is assigned to |
dbaron@6737 | 1002 | animation-delay. |
dbaron@6736 | 1003 | </p> |
dbaron@6736 | 1004 | |
dbaron@6736 | 1005 | <p class="issue"> |
dbaron@6736 | 1006 | An alternative proposal is to accept the font shorthand approach |
dbaron@6736 | 1007 | of using a "/" character between the values of the same type. |
dbaron@6736 | 1008 | e.g. 2s/4s would mean a duration of 2 seconds and a delay of 4 seconds. |
dbaron@6736 | 1009 | |
dbaron@6736 | 1010 | <p class="issue"> |
dbaron@6736 | 1011 | Need to also explain how order is important in terms of animation-name |
dbaron@6736 | 1012 | versus keywords, and probably also adjust the canonical order to |
dbaron@6736 | 1013 | match. |
jackalmage@5911 | 1014 | |
jackalmage@5911 | 1015 | <h2 id="animation-events"> |
jackalmage@5911 | 1016 | Animation Events</h2> |
jackalmage@5911 | 1017 | |
jackalmage@5911 | 1018 | <p> |
jackalmage@5911 | 1019 | Several animation related events are available through the <a href="http://www.w3.org/TR/DOM-Level-2-Events/events.html">DOM Event system</a>. |
jackalmage@5911 | 1020 | The start and end of an animation, |
jackalmage@5911 | 1021 | and the end of each iteration of an animation, |
jackalmage@5911 | 1022 | all generate DOM events. |
jackalmage@5911 | 1023 | An element can have multiple properties being animated simultaneously. |
jackalmage@5911 | 1024 | This can occur either with a single 'animation-name' value |
jackalmage@5911 | 1025 | with keyframes containing multiple properties, |
jackalmage@5911 | 1026 | or with multiple 'animation-name' values. |
jackalmage@5911 | 1027 | For the purposes of events, |
jackalmage@5911 | 1028 | each 'animation-name' specifies a single animation. |
jackalmage@5911 | 1029 | Therefore an event will be generated for each 'animation-name' value |
jackalmage@5911 | 1030 | and not necessarily for each property being animated. |
jackalmage@5911 | 1031 | |
jackalmage@5911 | 1032 | <p> |
jackalmage@5911 | 1033 | The time the animation has been running is sent with each event generated. |
jackalmage@5911 | 1034 | This allows the event handler to determine the current iteration of a looping animation |
jackalmage@5911 | 1035 | or the current position of an alternating animation. |
jackalmage@5911 | 1036 | This time does not include any time the animation was in the ''paused'' play state. |
jackalmage@5911 | 1037 | |
jackalmage@5911 | 1038 | |
jackalmage@5911 | 1039 | <h3 id='AnimationEvent-interface'> |
jackalmage@5911 | 1040 | Interface <code>AnimationEvent</code> |
jackalmage@5911 | 1041 | |
jackalmage@5911 | 1042 | <p> |
jackalmage@5911 | 1043 | The <dfn>AnimationEvent</dfn> interface provides specific contextual information associated with Animation events. |
jackalmage@5911 | 1044 | |
jackalmage@5911 | 1045 | |
jackalmage@5911 | 1046 | <h4 id='AnimationEvent-IDL'> |
jackalmage@5911 | 1047 | IDL Definition</h4> |
jackalmage@5911 | 1048 | |
jackalmage@5911 | 1049 | <pre class='idl'> |
jackalmage@5911 | 1050 | interface AnimationEvent : Event { |
dbaron@6082 | 1051 | readonly attribute DOMString animationName; |
dbaron@6082 | 1052 | readonly attribute float elapsedTime; |
dbaron@6082 | 1053 | void initAnimationEvent(in DOMString typeArg, |
dbaron@6082 | 1054 | in boolean canBubbleArg, |
dbaron@6082 | 1055 | in boolean cancelableArg, |
dbaron@6082 | 1056 | in DOMString animationNameArg, |
dbaron@6082 | 1057 | in float elapsedTimeArg); |
jackalmage@5911 | 1058 | };</pre> |
jackalmage@5911 | 1059 | |
jackalmage@5911 | 1060 | |
jackalmage@5911 | 1061 | <h4 id='AnimationEvent-attributes'> |
jackalmage@5911 | 1062 | Attributes</h4> |
jackalmage@5911 | 1063 | |
jackalmage@5911 | 1064 | <dl> |
jackalmage@5911 | 1065 | <dt><code><dfn id='AnimationEvent-animationName'>animationName</dfn></code> of type <code>DOMString</code>, readonly |
jackalmage@5911 | 1066 | <dd> |
jackalmage@5911 | 1067 | The value of the 'animation-name' property of the animation that fired the event. |
jackalmage@5911 | 1068 | |
jackalmage@5911 | 1069 | <dt><code><dfn id='AnimationEvent-elapsedTime'>elapsedTime</dfn></code> of type <code>float</code>, readonly |
jackalmage@5911 | 1070 | <dd> |
jackalmage@5911 | 1071 | The amount of time the animation has been running, |
jackalmage@5911 | 1072 | in seconds, |
jackalmage@5911 | 1073 | when this event fired, |
jackalmage@5911 | 1074 | excluding any time the animation was paused. |
jackalmage@5911 | 1075 | For an "animationstart" event, |
jackalmage@5911 | 1076 | the elapsedTime is zero unless there was a negative value for 'animation-delay', |
jackalmage@5911 | 1077 | in which case the event will be fired with an <code>elapsedTime</code> of (-1 * delay). |
jackalmage@5911 | 1078 | </dl> |
jackalmage@5911 | 1079 | |
jackalmage@5911 | 1080 | |
jackalmage@5911 | 1081 | <h4 id='AnimationEvent-initAnimationMethod'> |
jackalmage@5911 | 1082 | The <code>initAnimationEvent</code> method</h4> |
jackalmage@5911 | 1083 | |
jackalmage@5911 | 1084 | <p> |
jackalmage@5911 | 1085 | The <dfn>initAnimationEvent</dfn> method is used to initialize the value of an <code>AnimationEvent</code> |
jackalmage@5911 | 1086 | created through the <a href='http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-DocumentEvent'><code>DocumentEvent</code></a> interface. |
jackalmage@5911 | 1087 | This method may only be called before the <code>AnimationEvent</code> has been dispatched |
jackalmage@5911 | 1088 | via the <code>dispatchEvent</code> method, |
jackalmage@5911 | 1089 | though it may be called multiple times during that phase if necessary. |
jackalmage@5911 | 1090 | If called multiple times, |
jackalmage@5911 | 1091 | the final invocation takes precedence. |
jackalmage@5911 | 1092 | |
jackalmage@5911 | 1093 | <p> |
jackalmage@5911 | 1094 | Parameters: |
jackalmage@5911 | 1095 | |
jackalmage@5911 | 1096 | <dl> |
jackalmage@5911 | 1097 | <dt><code>typeArg</code> of type <code>DOMString</code> |
jackalmage@5911 | 1098 | <dd> |
jackalmage@5911 | 1099 | Specifies the event type. |
jackalmage@5911 | 1100 | |
jackalmage@5911 | 1101 | <dt><code>canBubbleArg</code> of type <code>boolean</code> |
jackalmage@5911 | 1102 | <dd> |
jackalmage@5911 | 1103 | Specifies whether or not the event can bubble.<br> |
jackalmage@5911 | 1104 | |
jackalmage@5911 | 1105 | <dt><code>cancelableArg</code> of type <code>boolean</code> |
jackalmage@5911 | 1106 | <dd> |
jackalmage@5911 | 1107 | Specifies whether or not the event's default action can be prevented. |
jackalmage@5911 | 1108 | |
jackalmage@5911 | 1109 | <dt><code>animationNameArg</code> of type <code>DOMString</code> |
jackalmage@5911 | 1110 | <dd> |
jackalmage@5911 | 1111 | Specifies the <a href='http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-Event'><code>Event</code></a>'s animation name.<br> |
jackalmage@5911 | 1112 | |
jackalmage@5911 | 1113 | <dt><code>elapsedTimeArg</code> of type <code>float</code> |
jackalmage@5911 | 1114 | <dd> |
jackalmage@5911 | 1115 | Specifies the amount of time, |
jackalmage@5911 | 1116 | in seconds, |
jackalmage@5911 | 1117 | the animation has been running at the time of initialization. |
jackalmage@5911 | 1118 | </dl> |
jackalmage@5911 | 1119 | |
jackalmage@5911 | 1120 | <p> |
jackalmage@5911 | 1121 | No Return Value |
jackalmage@5911 | 1122 | |
jackalmage@5911 | 1123 | <p> |
jackalmage@5911 | 1124 | No Exceptions |
jackalmage@5911 | 1125 | |
jackalmage@5911 | 1126 | <h3 id='AnimationEvent-types'> |
jackalmage@5911 | 1127 | Types of <code>AnimationEvent</code></h3> |
jackalmage@5911 | 1128 | |
jackalmage@5911 | 1129 | <p> |
jackalmage@5911 | 1130 | The different types of Animation events that can occur are: |
jackalmage@5911 | 1131 | |
jackalmage@5911 | 1132 | <dl> |
jackalmage@5911 | 1133 | <dt><dfn>animationstart</dfn> |
jackalmage@5911 | 1134 | <dd> |
jackalmage@5911 | 1135 | The <code>animationstart</code> event occurs at the start of the animation. |
jackalmage@5911 | 1136 | If there is an 'animation-delay' |
jackalmage@5911 | 1137 | then this event will fire once the delay period has expired. |
jackalmage@5911 | 1138 | A negative delay will cause the event to fire with an <code>elapsedTime</code> equal to the absolute value of the delay. |
jackalmage@5911 | 1139 | |
jackalmage@5911 | 1140 | <ul> |
jackalmage@5911 | 1141 | <li>Bubbles: Yes |
jackalmage@5911 | 1142 | <li>Cancelable: No |
jackalmage@5911 | 1143 | <li>Context Info: animationName |
jackalmage@5911 | 1144 | </ul> |
jackalmage@5911 | 1145 | |
jackalmage@5911 | 1146 | <dt><dfn>animationend</dfn> |
jackalmage@5911 | 1147 | <dd> |
jackalmage@5911 | 1148 | The <code>animationend</code> event occurs when the animation finishes. |
jackalmage@5911 | 1149 | |
jackalmage@5911 | 1150 | <ul> |
jackalmage@5911 | 1151 | <li>Bubbles: Yes |
jackalmage@5911 | 1152 | <li>Cancelable: No |
jackalmage@5911 | 1153 | <li>Context Info: animationName, elapsedTime |
jackalmage@5911 | 1154 | </ul> |
jackalmage@5911 | 1155 | |
jackalmage@5911 | 1156 | <dt><dfn>animationiteration</dfn> |
jackalmage@5911 | 1157 | <dd> |
jackalmage@5911 | 1158 | The <code>animationiteration</code> event occurs at the end of each iteration of an animation, |
jackalmage@5911 | 1159 | except when an <code>animationend</code> event would fire at the same time. |
jackalmage@5911 | 1160 | This means that this event does not occur for animations with an iteration count of one or less. |
jackalmage@5911 | 1161 | |
jackalmage@5911 | 1162 | <ul> |
jackalmage@5911 | 1163 | <li>Bubbles: Yes |
jackalmage@5911 | 1164 | <li>Cancelable: No |
jackalmage@5911 | 1165 | <li>Context Info: animationName, elapsedTime |
jackalmage@5911 | 1166 | </ul> |
jackalmage@5911 | 1167 | </dl> |
jackalmage@5911 | 1168 | |
jackalmage@5911 | 1169 | |
jackalmage@5911 | 1170 | <h2 id="dom-interfaces"> |
jackalmage@5911 | 1171 | DOM Interfaces</h2> |
jackalmage@5911 | 1172 | |
jackalmage@5911 | 1173 | <p> |
jackalmage@5911 | 1174 | CSS animation is exposed to the CSSOM through a pair of new interfaces describing the keyframes. |
jackalmage@5911 | 1175 | |
jackalmage@5911 | 1176 | |
jackalmage@5911 | 1177 | <h3 id='CSSRule-interface'> |
jackalmage@5911 | 1178 | Interface <code>CSSRule</code></h3> |
jackalmage@5911 | 1179 | |
jackalmage@5911 | 1180 | <p> |
jackalmage@5911 | 1181 | The following 2 rule types are added to the <dfn>CSSRule</dfn> interface. |
jackalmage@5911 | 1182 | They provide identification for the new keyframe and keyframes rules. |
jackalmage@5911 | 1183 | |
jackalmage@5911 | 1184 | |
jackalmage@5911 | 1185 | <h4 id='CSSRule-IDL'> |
jackalmage@5911 | 1186 | IDL Definition</h4> |
jackalmage@5911 | 1187 | |
jackalmage@5911 | 1188 | <pre class='idl'> |
jackalmage@5911 | 1189 | interface CSSRule { |
dbaron@6082 | 1190 | ... |
dbaron@6082 | 1191 | const unsigned short KEYFRAMES_RULE = 7; |
dbaron@6082 | 1192 | const unsigned short KEYFRAME_RULE = 8; |
dbaron@6082 | 1193 | ... |
jackalmage@5911 | 1194 | };</pre> |
jackalmage@5911 | 1195 | |
jackalmage@5911 | 1196 | |
jackalmage@5911 | 1197 | <h3 id='CSSKeyframeRule-interface'> |
jackalmage@5911 | 1198 | Interface <code>CSSKeyframeRule</code></3h> |
jackalmage@5911 | 1199 | <p> |
jackalmage@5911 | 1200 | The <dfn>CSSKeyframeRule</dfn> interface represents the style rule for a single key. |
jackalmage@5911 | 1201 | |
jackalmage@5911 | 1202 | |
jackalmage@5911 | 1203 | <h4 id='CSSKeyframeRule-IDL'> |
jackalmage@5911 | 1204 | IDL Definition</h4> |
jackalmage@5911 | 1205 | |
jackalmage@5911 | 1206 | <pre class='idl'> |
jackalmage@5911 | 1207 | interface CSSKeyframeRule : CSSRule { |
dbaron@6082 | 1208 | attribute DOMString keyText; |
dbaron@6082 | 1209 | readonly attribute CSSStyleDeclaration style; |
jackalmage@5911 | 1210 | };</pre> |
jackalmage@5911 | 1211 | |
jackalmage@5911 | 1212 | |
jackalmage@5911 | 1213 | <h4 id='CSSKeyframeRule-attributes'> |
jackalmage@5911 | 1214 | Attributes</h4> |
jackalmage@5911 | 1215 | |
jackalmage@5911 | 1216 | <dl> |
jackalmage@5911 | 1217 | <dt><code><dfn id='CSSKeyframeRule-keyText'>keyText</dfn></code> of type <code>DOMString</code> |
jackalmage@5911 | 1218 | <dd> |
jackalmage@5911 | 1219 | This attribute represents the key |
jackalmage@5911 | 1220 | as the string representation of a floating point number between 0 and 1. |
jackalmage@5911 | 1221 | If the value in the CSS style is ''from'' |
jackalmage@5911 | 1222 | this value will be 0, |
jackalmage@5911 | 1223 | and if the value in the CSS style is ''to'' |
jackalmage@5911 | 1224 | this value will be 1. |
jackalmage@5911 | 1225 | |
jackalmage@5911 | 1226 | <dt><code><dfn id='CSSKeyframeRule-style'>style</dfn></code> of type <code>CSSStyleDeclaration</code> |
jackalmage@5911 | 1227 | <dd> |
jackalmage@5911 | 1228 | This attribute represents the style associated with this keyframe. |
jackalmage@5911 | 1229 | </dl> |
jackalmage@5911 | 1230 | |
jackalmage@5911 | 1231 | |
jackalmage@5911 | 1232 | <h3 id='CSSKeyframesRule-interface'> |
jackalmage@5911 | 1233 | Interface <code>CSSKeyframesRule</code></h3> |
jackalmage@5911 | 1234 | |
jackalmage@5911 | 1235 | <p> |
jackalmage@5911 | 1236 | The <dfn>CSSKeyframesRule</dfn> interface represents a complete set of keyframes for a single animation. |
jackalmage@5911 | 1237 | |
jackalmage@5911 | 1238 | |
jackalmage@5911 | 1239 | <h4 id='CSSKeyframesRule-IDL'> |
jackalmage@5911 | 1240 | IDL Definition</h4> |
jackalmage@5911 | 1241 | |
jackalmage@5911 | 1242 | <pre class='idl'> |
jackalmage@5911 | 1243 | interface CSSKeyframesRule : CSSRule { |
dbaron@6082 | 1244 | attribute DOMString name; |
dbaron@6082 | 1245 | readonly attribute CSSRuleList cssRules; |
jackalmage@5911 | 1246 | |
dbaron@6082 | 1247 | void appendRule(in DOMString rule); |
dbaron@6082 | 1248 | void deleteRule(in DOMString key); |
dbaron@6082 | 1249 | CSSKeyframeRule findRule(in DOMString key); |
jackalmage@5911 | 1250 | };</pre> |
jackalmage@5911 | 1251 | |
jackalmage@5911 | 1252 | |
jackalmage@5911 | 1253 | <h4 id='CSSKeyframesRule-attributes'> |
jackalmage@5911 | 1254 | Attributes</h4> |
jackalmage@5911 | 1255 | |
jackalmage@5911 | 1256 | <dl> |
jackalmage@5911 | 1257 | <dt><code><dfn id='CSSKeyframesRule-name'>name</dfn></code> of type <code>DOMString</code> |
jackalmage@5911 | 1258 | <dd> |
jackalmage@5911 | 1259 | This attribute is the name of the keyframes, used by the 'animation-name' property.<br> |
jackalmage@5911 | 1260 | |
jackalmage@5911 | 1261 | <dt><code><dfn id='CSSKeyframesRules-cssRules'>cssRules</dfn></code> of type <code>CSSRuleList</code> |
jackalmage@5911 | 1262 | <dd> |
jackalmage@5911 | 1263 | This attribute gives access to the keyframes in the list. |
jackalmage@5911 | 1264 | |
jackalmage@5911 | 1265 | |
jackalmage@5911 | 1266 | <h4 id='CSSKeyframesRule-appendRule'> |
jackalmage@5911 | 1267 | The <code>appendRule</code> method</h4> |
jackalmage@5911 | 1268 | |
jackalmage@5911 | 1269 | <p> |
jackalmage@5911 | 1270 | The <dfn>appendRule</dfn> method appends the passed CSSKeyframeRule into the list at the passed key. |
jackalmage@5911 | 1271 | |
jackalmage@5911 | 1272 | <p> |
jackalmage@5911 | 1273 | Parameters: |
jackalmage@5911 | 1274 | |
jackalmage@5911 | 1275 | <dl> |
jackalmage@5911 | 1276 | <dt><code>rule</code> of type <code>DOMString</code> |
jackalmage@5911 | 1277 | |
jackalmage@5911 | 1278 | <dd> |
jackalmage@5911 | 1279 | The rule to be appended, |
jackalmage@5911 | 1280 | expressed in the same syntax as one entry in the ''@keyframes'' rule. |
jackalmage@5911 | 1281 | </dl> |
jackalmage@5911 | 1282 | |
jackalmage@5911 | 1283 | <p> |
jackalmage@5911 | 1284 | No Return Value |
jackalmage@5911 | 1285 | |
jackalmage@5911 | 1286 | <p> |
jackalmage@5911 | 1287 | No Exceptions |
jackalmage@5911 | 1288 | |
jackalmage@5911 | 1289 | |
jackalmage@5911 | 1290 | <h4 id='CSSKeyframesRules-deleteRule'> |
jackalmage@5911 | 1291 | The <code>deleteRule</code> method</h4> |
jackalmage@5911 | 1292 | |
jackalmage@5911 | 1293 | <p> |
jackalmage@5911 | 1294 | The <dfn>deleteRule</dfn> method deletes the CSSKeyframeRule with the passed key. |
jackalmage@5911 | 1295 | If a rule with this key does not exist, |
jackalmage@5911 | 1296 | the method does nothing. |
jackalmage@5911 | 1297 | |
jackalmage@5911 | 1298 | <p> |
jackalmage@5911 | 1299 | Parameters: |
jackalmage@5911 | 1300 | |
jackalmage@5911 | 1301 | <dl> |
jackalmage@5911 | 1302 | <dt><code>key</code> of type <code>DOMString</code> |
jackalmage@5911 | 1303 | <dd> |
jackalmage@5911 | 1304 | The key which describes the rule to be deleted. |
jackalmage@5911 | 1305 | The key must resolve to a number between 0 and 1, |
jackalmage@5911 | 1306 | or the rule is ignored. |
jackalmage@5911 | 1307 | </dl> |
jackalmage@5911 | 1308 | |
jackalmage@5911 | 1309 | <p> |
jackalmage@5911 | 1310 | No Return Value |
jackalmage@5911 | 1311 | |
jackalmage@5911 | 1312 | <p> |
jackalmage@5911 | 1313 | No Exceptions |
jackalmage@5911 | 1314 | |
jackalmage@5911 | 1315 | |
jackalmage@5911 | 1316 | <h4 id='CSSKeyframesRule-findRule'> |
jackalmage@5911 | 1317 | The <code>findRule</code> method</h4> |
jackalmage@5911 | 1318 | |
jackalmage@5911 | 1319 | <p> |
jackalmage@5911 | 1320 | The <code>findRule</code> method returns the rule with a key matching the passed key. |
jackalmage@5911 | 1321 | If no such rule exists, |
jackalmage@5911 | 1322 | a null value is returned. |
jackalmage@5911 | 1323 | |
jackalmage@5911 | 1324 | <p> |
jackalmage@5911 | 1325 | Parameters: |
jackalmage@5911 | 1326 | |
jackalmage@5911 | 1327 | <dl> |
jackalmage@5911 | 1328 | <dt><code>key</code> of type <code>DOMString</code> |
jackalmage@5911 | 1329 | <dd> |
jackalmage@5911 | 1330 | The key which described the rule to find. |
jackalmage@5911 | 1331 | The key must resolve to a number between 0 and 1, |
jackalmage@5911 | 1332 | or the rule is ignored. |
jackalmage@5911 | 1333 | </dl> |
jackalmage@5911 | 1334 | |
jackalmage@5911 | 1335 | <p> |
jackalmage@5911 | 1336 | Return Value: |
jackalmage@5911 | 1337 | |
jackalmage@5911 | 1338 | <dl> |
jackalmage@5911 | 1339 | <dt><code>CSSKeyframeRule</code> |
jackalmage@5911 | 1340 | <dd> |
jackalmage@5911 | 1341 | The found rule. |
jackalmage@5911 | 1342 | </dl> |
jackalmage@5911 | 1343 | |
jackalmage@5911 | 1344 | <p> |
jackalmage@5911 | 1345 | No Exceptions |
jackalmage@5911 | 1346 | |
dino@937 | 1347 | |
dbaron@5304 | 1348 | <h2 id="acknowledgments">Acknowledgments</h2> |
dbaron@5304 | 1349 | |
dbaron@5304 | 1350 | <p>Thanks especially to the feedback from |
dbaron@5312 | 1351 | Tab Atkins, |
dbaron@6736 | 1352 | Carine Bournez, |
dbaron@5312 | 1353 | Estelle Weyl, |
dbaron@5304 | 1354 | and all the rest of the |
jackalmage@5911 | 1355 | <a href="http://lists.w3.org/Archives/Public/www-style/">www-style</a> community. |
dbaron@5304 | 1356 | |
dino@937 | 1357 | <h2>References</h2> |
dino@937 | 1358 | |
dino@937 | 1359 | <h3 class="no-num">Normative references</h3> |
dino@937 | 1360 | <!--normative--> |
dino@937 | 1361 | |
dino@937 | 1362 | <h3 class="no-num">Other references</h3> |
dino@937 | 1363 | <!--informative--> |
dino@937 | 1364 | |
dino@937 | 1365 | |
dino@937 | 1366 | |
dino@937 | 1367 | <h2 class="no-num">Property index</h2> |
dino@937 | 1368 | <!-- properties --> |
dino@937 | 1369 | |
dino@937 | 1370 | |
dino@937 | 1371 | |
dino@937 | 1372 | <h2 class="no-num" id="index">Index</h2> |
dino@937 | 1373 | <!--index--> |
dino@937 | 1374 | |
dino@937 | 1375 | </body> |
dino@937 | 1376 | </html> |
dino@937 | 1377 | <!-- Keep this comment at the end of the file |
dino@937 | 1378 | Local variables: |
dino@937 | 1379 | mode: sgml |
jackalmage@5911 | 1380 | sgml-declaration:"~/SGML/HTML4.decl" |
dino@937 | 1381 | sgml-default-doctype-name:"html" |
dino@937 | 1382 | sgml-minimize-attributes:t |
jackalmage@5911 | 1383 | sgml-nofill-elements:("pre" "style" "br") |
jackalmage@5911 | 1384 | sgml-live-element-indicator:t |
jackalmage@5911 | 1385 | sgml-omittag:nil |
jackalmage@5911 | 1386 | sgml-shorttag:nil |
jackalmage@5911 | 1387 | sgml-namecase-general:t |
jackalmage@5911 | 1388 | sgml-general-insert-case:lower |
jackalmage@5911 | 1389 | sgml-always-quote-attributes:t |
jackalmage@5911 | 1390 | sgml-indent-step:nil |
jackalmage@5911 | 1391 | sgml-indent-data:t |
jackalmage@5911 | 1392 | sgml-parent-document:nil |
jackalmage@5911 | 1393 | sgml-exposed-tags:nil |
jackalmage@5911 | 1394 | sgml-local-catalogs:nil |
jackalmage@5911 | 1395 | sgml-local-ecat-files:nil |
dino@937 | 1396 | End: |
dbaron@6082 | 1397 | --> |