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