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