Wed, 28 Mar 2012 21:59:03 -0700
Add necessary []s to grammar: since juxtaposition binds tighter than |, [] are needed so that the comma needs to separate all the items in the list (rather than requiring a comma to separate values only for the first of the options).
dino@936 | 1 | <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" |
dino@936 | 2 | "http://www.w3.org/TR/html4/strict.dtd"> |
dino@936 | 3 | |
dino@936 | 4 | <html lang=en> |
dino@936 | 5 | <head> |
simon@2533 | 6 | <title>CSS Transitions</title> |
simon@4370 | 7 | <link href="../default.css" rel=stylesheet type="text/css"> |
dino@936 | 8 | |
dino@936 | 9 | <style type="text/css"> |
simon@4394 | 10 | table.animatable-properties { |
dino@936 | 11 | border-collapse: collapse; |
dino@936 | 12 | } |
simon@4394 | 13 | table.animatable-properties td { |
dino@936 | 14 | padding: 0.2em 1em; |
dino@936 | 15 | border: 1px solid black; |
dino@936 | 16 | } |
dino@936 | 17 | </style> |
dino@936 | 18 | <link href="http://www.w3.org/StyleSheets/TR/W3C-ED.css" rel=stylesheet |
dino@936 | 19 | type="text/css"> |
dino@936 | 20 | |
dino@936 | 21 | <body> |
dino@936 | 22 | <div class=head> <!--begin-logo--> |
dino@936 | 23 | <p><a href="http://www.w3.org/"><img alt=W3C height=48 |
dino@936 | 24 | src="http://www.w3.org/Icons/w3c_home" width=72></a> <!--end-logo--> |
dino@936 | 25 | |
simon@2533 | 26 | <h1>CSS Transitions</h1> |
dino@936 | 27 | |
dbaron@5298 | 28 | <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 29 March 2012</h2> |
dino@936 | 29 | |
dino@936 | 30 | <dl> |
dino@936 | 31 | <dt>This version: |
dino@936 | 32 | |
dbaron@5298 | 33 | <dd> <a href="http://www.w3.org/TR/2012/ED-css3-transitions-20120329/"> |
bert@1105 | 34 | http://dev.w3.org/csswg/css3-transitions/</a> |
dbaron@5298 | 35 | <!--http://www.w3.org/TR/2012/WD-css3-transitions-20120329--> |
dino@936 | 36 | |
dino@936 | 37 | <dt>Latest version: |
dino@936 | 38 | |
bert@1105 | 39 | <dd><a href="http://www.w3.org/TR/css3-transitions"> |
dbaron@4124 | 40 | http://www.w3.org/TR/css3-transitions/</a> |
dino@936 | 41 | |
dbaron@4580 | 42 | <dt>Editor's draft: |
dbaron@4580 | 43 | |
dbaron@4580 | 44 | <dd><a |
dbaron@4580 | 45 | href="http://dev.w3.org/csswg/css3-transitions/">http://dev.w3.org/csswg/css3-transitions/</a> |
dbaron@4580 | 46 | |
dbaron@4580 | 47 | |
bert@1105 | 48 | <dt>Previous version: |
bert@1105 | 49 | |
dbaron@5227 | 50 | <dd><a href="http://www.w3.org/TR/2009/WD-css3-transitions-20091201/"> |
dbaron@5227 | 51 | http://www.w3.org/TR/2009/WD-css3-transitions-20091201/</a> |
dino@936 | 52 | |
dino@936 | 53 | <dt id=editors-list>Editors: |
dino@936 | 54 | |
dino@936 | 55 | <dd><a href="mailto:dino@apple.com">Dean Jackson</a> (<a |
dino@936 | 56 | href="http://www.apple.com/">Apple Inc</a>) |
dino@936 | 57 | |
dino@936 | 58 | <dd><a href="mailto:hyatt@apple.com">David Hyatt</a> (<a |
dino@936 | 59 | href="http://www.apple.com/">Apple Inc</a>) |
dino@936 | 60 | |
dino@936 | 61 | <dd><a href="mailto:cmarrin@apple.com">Chris Marrin</a> (<a |
dino@936 | 62 | href="http://www.apple.com/">Apple Inc</a>) |
dbaron@1540 | 63 | |
dbaron@4580 | 64 | <dd class=vcard><a class=fn href="http://dbaron.org/">L. David Baron</a> |
dbaron@4580 | 65 | (<a class=org href="http://www.mozilla.com/">Mozilla</a>) |
dbaron@4528 | 66 | |
dbaron@4528 | 67 | <dt>Issues list: |
dbaron@4528 | 68 | |
dbaron@4528 | 69 | <dd><a |
dbaron@4528 | 70 | href="https://www.w3.org/Bugs/Public/buglist.cgi?query_format=advanced&product=CSS&component=Transitions&resolution=---&cmdtype=doit">in |
dbaron@4528 | 71 | Bugzilla</a> |
dbaron@4528 | 72 | |
dbaron@5229 | 73 | <dt>Discussion: |
dbaron@5229 | 74 | |
dbaron@5229 | 75 | <dd><a |
dbaron@5229 | 76 | href="http://lists.w3.org/Archives/Public/www-style/">www-style@w3.org</a> |
dbaron@5229 | 77 | with subject line “<kbd>[css3-transitions] <var>… message |
dbaron@5229 | 78 | topic …</var></kbd>” |
dbaron@5229 | 79 | |
dbaron@4528 | 80 | <dt>Test suite: |
dbaron@4528 | 81 | |
dbaron@4528 | 82 | <dd>none yet |
dino@936 | 83 | </dl> |
dino@936 | 84 | <!--begin-copyright--> |
dino@936 | 85 | <p class=copyright><a |
dino@936 | 86 | href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright" |
dbaron@5219 | 87 | rel=license>Copyright</a> © 2012 <a href="http://www.w3.org/"><abbr |
dbaron@5219 | 88 | title="World Wide Web Consortium">W3C</abbr></a><sup>®</sup> (<a |
dbaron@5219 | 89 | href="http://www.csail.mit.edu/"><abbr |
dbaron@5219 | 90 | title="Massachusetts Institute of Technology">MIT</abbr></a>, <a |
dbaron@5219 | 91 | href="http://www.ercim.eu/"><abbr |
dbaron@5219 | 92 | title="European Research Consortium for Informatics and Mathematics">ERCIM</abbr></a>, |
dbaron@4124 | 93 | <a href="http://www.keio.ac.jp/">Keio</a>), All Rights Reserved. W3C <a |
dino@936 | 94 | href="http://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer">liability</a>, |
dino@936 | 95 | <a |
dino@936 | 96 | href="http://www.w3.org/Consortium/Legal/ipr-notice#W3C_Trademarks">trademark</a> |
dino@936 | 97 | and <a |
dino@936 | 98 | href="http://www.w3.org/Consortium/Legal/copyright-documents">document |
dino@936 | 99 | use</a> rules apply.</p> |
dino@936 | 100 | <!--end-copyright--> |
dino@936 | 101 | <hr title="Separator for header"> |
dino@936 | 102 | </div> |
dino@936 | 103 | |
dino@936 | 104 | <h2 class="no-num no-toc" id=abstract>Abstract</h2> |
dino@936 | 105 | |
dino@936 | 106 | <p>CSS Transitions allows property changes in CSS values to occur smoothly |
dino@936 | 107 | over a specified duration. |
dino@936 | 108 | |
dino@936 | 109 | <h2 class="no-num no-toc" id=status>Status of this document</h2> |
dino@936 | 110 | <!--begin-status--> |
dino@936 | 111 | |
dino@936 | 112 | <p>This is a public copy of the editors' draft. It is provided for |
dino@936 | 113 | discussion only and may change at any moment. Its publication here does |
dino@936 | 114 | not imply endorsement of its contents by W3C. Don't cite this document |
dino@936 | 115 | other than as work in progress. |
dino@936 | 116 | |
dino@936 | 117 | <p>The (<a |
dino@936 | 118 | href="http://lists.w3.org/Archives/Public/www-style/">archived</a>) public |
dino@1669 | 119 | mailing list <a |
dino@1669 | 120 | href="mailto:www-style@w3.org?Subject=%5Bcss3-transitions%5D%20PUT%20SUBJECT%20HERE"> |
dino@1669 | 121 | www-style@w3.org</a> (see <a |
dino@1669 | 122 | href="http://www.w3.org/Mail/Request">instructions</a>) is preferred for |
dino@1669 | 123 | discussion of this specification. When sending e-mail, please put the text |
dino@1669 | 124 | “css3-transitions” in the subject, preferably like this: |
bert@1105 | 125 | “[<!---->css3-transitions<!---->] <em>…summary of |
dino@936 | 126 | comment…</em>” |
dino@936 | 127 | |
dino@936 | 128 | <p>This document was produced by the <a href="/Style/CSS/members">CSS |
dino@936 | 129 | Working Group</a> (part of the <a href="/Style/">Style Activity</a>). |
dino@936 | 130 | |
dino@936 | 131 | <p>This document was produced by a group operating under the <a |
dino@936 | 132 | href="/Consortium/Patent-Policy-20040205/">5 February 2004 W3C Patent |
dino@936 | 133 | Policy</a>. W3C maintains a <a href="/2004/01/pp-impl/32061/status" |
dino@936 | 134 | rel=disclosure>public list of any patent disclosures</a> made in |
dino@936 | 135 | connection with the deliverables of the group; that page also includes |
dino@936 | 136 | instructions for disclosing a patent. An individual who has actual |
dino@936 | 137 | knowledge of a patent which the individual believes contains <a |
dino@936 | 138 | href="/Consortium/Patent-Policy-20040205/#def-essential">Essential |
dino@936 | 139 | Claim(s)</a> must disclose the information in accordance with <a |
dino@936 | 140 | href="/Consortium/Patent-Policy-20040205/#sec-Disclosure">section 6 of the |
dino@936 | 141 | W3C Patent Policy</a>.</p> |
dino@936 | 142 | <!--end-status--> |
dino@936 | 143 | |
dino@1531 | 144 | <p> The <a href=ChangeLog>list of changes made to this specification</a> is |
dino@1531 | 145 | available. |
dino@1531 | 146 | |
dino@936 | 147 | <h2 class="no-num no-toc" id=contents>Table of contents</h2> |
dino@936 | 148 | <!--begin-toc--> |
dino@936 | 149 | |
dino@936 | 150 | <ul class=toc> |
dino@1669 | 151 | <li><a href="#introduction"><span class=secno>1. </span>Introduction</a> |
dino@936 | 152 | |
simon@1766 | 153 | <li><a href="#transitions"><span class=secno>2. </span>Transitions</a> |
dino@936 | 154 | <ul class=toc> |
dino@1669 | 155 | <li><a href="#the-transition-property-property-"><span class=secno>2.1. |
simon@4370 | 156 | </span> The <code class=property>'transition-property'</code> Property |
simon@4370 | 157 | </a> |
dino@936 | 158 | |
dino@1669 | 159 | <li><a href="#the-transition-duration-property-"><span class=secno>2.2. |
simon@4370 | 160 | </span> The <code class=property>'transition-duration'</code> Property |
simon@4370 | 161 | </a> |
dino@936 | 162 | |
dino@1669 | 163 | <li><a href="#transition-timing-function_tag"><span class=secno>2.3. |
simon@4370 | 164 | </span> The <code class=property>'transition-timing-function'</code> |
simon@4370 | 165 | Property </a> |
simon@4370 | 166 | |
simon@4370 | 167 | <li><a href="#the-transition-delay-property-"><span class=secno>2.4. |
simon@4370 | 168 | </span> The <code class=property>'transition-delay'</code> Property |
dino@936 | 169 | </a> |
dino@936 | 170 | |
dino@1669 | 171 | <li><a href="#the-transition-shorthand-property-"><span class=secno>2.5. |
simon@4370 | 172 | </span> The <code class=property>'transition'</code> Shorthand Property |
simon@4370 | 173 | </a> |
dino@936 | 174 | </ul> |
dino@936 | 175 | |
dino@1669 | 176 | <li><a href="#starting"><span class=secno>3. </span> Starting of |
dbaron@1540 | 177 | transitions </a> |
dbaron@1540 | 178 | |
dino@1669 | 179 | <li><a href="#reversing"><span class=secno>4. </span> Automatically |
dbaron@5243 | 180 | reversing interrupted transitions </a> |
dino@1531 | 181 | |
dino@1669 | 182 | <li><a href="#transition-events-"><span class=secno>5. </span> Transition |
dino@936 | 183 | Events </a> |
dino@936 | 184 | |
dino@1669 | 185 | <li><a href="#animation-of-property-types-"><span class=secno>6. </span> |
dino@936 | 186 | Animation of property types </a> |
dino@936 | 187 | |
dino@1669 | 188 | <li><a href="#animatable-properties-"><span class=secno>7. </span> |
dino@936 | 189 | Animatable properties </a> |
dino@936 | 190 | <ul class=toc> |
dino@1669 | 191 | <li><a href="#properties-from-css-"><span class=secno>7.1. </span> |
dino@936 | 192 | Properties from CSS </a> |
dino@936 | 193 | |
dino@1669 | 194 | <li><a href="#properties-from-svg-"><span class=secno>7.2. </span> |
dino@936 | 195 | Properties from SVG </a> |
dino@936 | 196 | </ul> |
dino@936 | 197 | |
dino@1669 | 198 | <li><a href="#references"><span class=secno>8. </span>References</a> |
dino@936 | 199 | <ul class=toc> |
dino@936 | 200 | <li class=no-num><a href="#normative-references">Normative |
dino@936 | 201 | references</a> |
dino@936 | 202 | |
dino@936 | 203 | <li class=no-num><a href="#other-references">Other references</a> |
dino@936 | 204 | </ul> |
dino@936 | 205 | |
dino@936 | 206 | <li class=no-num><a href="#property-index">Property index</a> |
dino@936 | 207 | |
dino@936 | 208 | <li class=no-num><a href="#index">Index</a> |
dino@936 | 209 | </ul> |
dino@936 | 210 | <!--end-toc--> |
dino@936 | 211 | |
dino@1669 | 212 | <h2 id=introduction><span class=secno>1. </span>Introduction</h2> |
dino@936 | 213 | |
dino@936 | 214 | <p><em>This section is not normative.</em> |
dino@936 | 215 | |
dino@936 | 216 | <p> This document introduces new CSS features to enable <em>implicit |
dino@936 | 217 | transitions</em>, which describe how CSS properties can be made to change |
dino@936 | 218 | smoothly from one value to another over a given duration. |
dino@936 | 219 | |
simon@1766 | 220 | <h2 id=transitions><span class=secno>2. </span>Transitions</h2> |
dino@936 | 221 | |
dino@936 | 222 | <p> Normally when the value of a CSS property changes, the rendered result |
dino@936 | 223 | is instantly updated, with the affected elements immediately changing from |
dino@936 | 224 | the old property value to the new property value. This section describes a |
dino@936 | 225 | way to specify transitions using new CSS properties. These properties are |
dino@936 | 226 | used to animate smoothly from the old state to the new state over time. |
dino@936 | 227 | |
dino@936 | 228 | <p> For example, suppose that transitions of one second have been defined |
simon@4370 | 229 | on the <code class=property>'left'</code> and <code |
simon@4370 | 230 | class=property>'background-color'</code> properties. The following diagram |
simon@4370 | 231 | illustrates the effect of updating those properties on an element, in this |
simon@4370 | 232 | case moving it to the right and changing the background from red to blue. |
simon@4370 | 233 | This assumes other transition parameters still have their default values. |
dino@936 | 234 | |
dino@936 | 235 | <div class=figure> <img alt="" src=transition1.png></div> |
dino@936 | 236 | |
simon@4370 | 237 | <p class=caption> Transitions of <code class=property>'left'</code> and |
simon@4370 | 238 | <code class=property>'background-color'</code> |
dino@936 | 239 | |
dino@936 | 240 | <p> Transitions are a presentational effect. The computed value of a |
dino@936 | 241 | property transitions over time from the old value to the new value. |
dino@936 | 242 | Therefore if a script queries the computed style of a property as it is |
dino@936 | 243 | transitioning, it will see an intermediate value that represents the |
dino@936 | 244 | current animated value of the property. |
dino@936 | 245 | |
dino@936 | 246 | <p> Only animatable CSS properties can be transitioned. See the table at |
dino@936 | 247 | the end of this document for a list of properties that are animatable. |
dino@936 | 248 | |
dino@936 | 249 | <p> The transition for a property is defined using a number of new |
dino@936 | 250 | properties. For example: |
dino@936 | 251 | |
dino@936 | 252 | <div class=example> |
bert@1105 | 253 | <p style="display:none"> Example(s):</p> |
dino@936 | 254 | |
dino@936 | 255 | <pre> |
dino@936 | 256 | div { |
dino@936 | 257 | transition-property: opacity; |
dino@936 | 258 | transition-duration: 2s; |
dino@936 | 259 | } |
dino@936 | 260 | </pre> |
simon@4370 | 261 | The above example defines a transition on the <code |
simon@4370 | 262 | class=property>'opacity'</code> property that, when a new value is |
simon@4370 | 263 | assigned to it, will cause a smooth change between the old value and the |
simon@4370 | 264 | new value over a period of two seconds.</div> |
dino@936 | 265 | |
dino@936 | 266 | <p> Each of the transition properties accepts a comma-separated list, |
dino@936 | 267 | allowing multiple transitions to be defined, each acting on a different |
dino@936 | 268 | property. In this case, the individual transitions take their parameters |
dino@936 | 269 | from the same index in all the lists. For example: |
dino@936 | 270 | |
dino@936 | 271 | <div class=example> |
bert@1105 | 272 | <p style="display:none"> Example(s):</p> |
dino@936 | 273 | |
dino@936 | 274 | <pre> |
dino@936 | 275 | div { |
dino@936 | 276 | transition-property: opacity, left; |
dino@936 | 277 | transition-duration: 2s, 4s; |
dino@936 | 278 | } |
dino@936 | 279 | |
dino@936 | 280 | </pre> |
simon@4370 | 281 | This will cause the <code class=property>'opacity'</code> property to |
simon@4370 | 282 | transition over a period of two seconds and the left property to |
simon@4370 | 283 | transition over a period of four seconds.</div> |
dino@1469 | 284 | |
dbaron@5247 | 285 | <p id=list-matching> In the case where the lists of values in transition |
dbaron@5247 | 286 | properties do not have the same length, the length of the ‘<a |
dbaron@5231 | 287 | href="#transition-property"><code |
dbaron@5231 | 288 | class=property>transition-property</code></a>’ list determines the |
dbaron@5231 | 289 | number of items in each list examined when starting transitions. The lists |
dbaron@5231 | 290 | are matched up from the first value: excess values at the end are not |
dbaron@5231 | 291 | used. If one of the other properties doesn't have enough comma-separated |
dbaron@5231 | 292 | values to match the number of values of ‘<a |
dbaron@5231 | 293 | href="#transition-property"><code |
dbaron@5231 | 294 | class=property>transition-property</code></a>’, the UA must |
dbaron@5231 | 295 | calculate its used value by repeating the list of values until there are |
dbaron@5231 | 296 | enough. This truncation or repetition does not affect the computed value. |
dbaron@5231 | 297 | <span class=note> Note: This is analogous to the behavior of the |
dbaron@5231 | 298 | ‘<code class=css>background-*</code>’ properties, with |
dbaron@5231 | 299 | ‘<code class=property>background-image</code>’ analogous to |
dino@1907 | 300 | ‘<a href="#transition-property"><code |
dbaron@5231 | 301 | class=property>transition-property</code></a>’. </span> |
dbaron@1542 | 302 | |
dino@1469 | 303 | <div class=example> |
dino@1469 | 304 | <p style="display:none"> Example(s):</p> |
dino@1469 | 305 | |
dino@1469 | 306 | <pre> |
dino@1469 | 307 | div { |
dino@1469 | 308 | transition-property: opacity, left, top, width; |
dino@1469 | 309 | transition-duration: 2s, 1s; |
dino@1469 | 310 | } |
dino@1469 | 311 | </pre> |
simon@4370 | 312 | The above example defines a transition on the <code |
simon@4370 | 313 | class=property>'opacity'</code> property of 2 seconds duration, a |
simon@4370 | 314 | transition on the <code class=property>'left'</code> property of 1 second |
simon@4370 | 315 | duration, a transition on the <code class=property>'top'</code> property |
simon@4370 | 316 | of 2 seconds duration and a transition on the <code |
simon@4370 | 317 | class=property>'width'</code> property of 1 second duration.</div> |
dino@936 | 318 | <!-- ======================================================================================================= --> |
dino@936 | 319 | |
dino@1669 | 320 | <h3 id=the-transition-property-property-><span class=secno>2.1. </span> The |
simon@4370 | 321 | <a href="#transition-property"><code |
simon@4370 | 322 | class=property>'transition-property'</code></a> Property</h3> |
dino@936 | 323 | |
simon@4370 | 324 | <p> The <a href="#transition-property"><code |
simon@4370 | 325 | class=property>'transition-property'</code></a> property specifies the |
simon@4370 | 326 | name of the CSS property to which the transition is applied. |
dino@936 | 327 | |
dino@936 | 328 | <div class=issue> We may ultimately want to support a keypath syntax for |
dino@936 | 329 | this property. A keypath syntax would enable different transitions to be |
dino@936 | 330 | specified for components of a property. For example the blur of a shadow |
dino@936 | 331 | could have a different transition than the color of a shadow.</div> |
dino@936 | 332 | |
dino@936 | 333 | <table class=propdef> |
dino@936 | 334 | <tbody> |
dino@936 | 335 | <tr> |
dino@936 | 336 | <td> <em>Name:</em> |
dino@936 | 337 | |
dino@936 | 338 | <td> <dfn id=transition-property>transition-property</dfn> |
dino@936 | 339 | |
dino@936 | 340 | <tr> |
dino@936 | 341 | <td> <em>Value:</em> |
dino@936 | 342 | |
dbaron@4537 | 343 | <td> none | [ all | <IDENT> ] [ ‘<code |
dbaron@5298 | 344 | class=css>,</code>’ [ all | <IDENT> ] ]* |
dino@936 | 345 | |
dino@936 | 346 | <tr> |
dino@936 | 347 | <td> <em>Initial:</em> |
dino@936 | 348 | |
dino@936 | 349 | <td> all |
dino@936 | 350 | |
dino@936 | 351 | <tr> |
dino@936 | 352 | <td> <em>Applies to:</em> |
dino@936 | 353 | |
dino@1469 | 354 | <td> all elements, :before and :after pseudo elements |
dino@936 | 355 | |
dino@936 | 356 | <tr> |
dino@936 | 357 | <td> <em>Inherited:</em> |
dino@936 | 358 | |
dino@936 | 359 | <td> no |
dino@936 | 360 | |
dino@936 | 361 | <tr> |
dino@936 | 362 | <td> <em>Percentages:</em> |
dino@936 | 363 | |
dino@936 | 364 | <td> N/A |
dino@936 | 365 | |
dino@936 | 366 | <tr> |
dino@936 | 367 | <td> <em>Media:</em> |
dino@936 | 368 | |
dino@936 | 369 | <td> visual |
dino@936 | 370 | |
dino@936 | 371 | <tr> |
dino@936 | 372 | <td> <em>Computed value:</em> |
dino@936 | 373 | |
dino@936 | 374 | <td> Same as specified value. |
dino@936 | 375 | </table> |
dino@936 | 376 | |
dino@936 | 377 | <p> A value of ‘<code class=property>none</code>’ means that no |
dbaron@4537 | 378 | property will transition. Otherwise, a list of properties to be |
dbaron@4537 | 379 | transitioned, or the keyword ‘<code class=property>all</code>’ |
dbaron@4537 | 380 | which indicates that all properties are to be transitioned, is given. |
dino@936 | 381 | |
dbaron@1543 | 382 | <p> If one of the identifiers listed is not a recognized property name or |
dbaron@1543 | 383 | is not an animatable property, the implementation must still start |
dbaron@1543 | 384 | transitions on the animatable properties in the list using the duration, |
dbaron@1543 | 385 | delay, and timing function at their respective indices in the lists for |
dino@1907 | 386 | ‘<a href="#transition-duration"><code |
dino@1907 | 387 | class=property>transition-duration</code></a>’, ‘<a |
dino@1907 | 388 | href="#transition-delay"><code |
dino@1907 | 389 | class=property>transition-delay</code></a>’, and ‘<a |
dino@1907 | 390 | href="#transition-timing-function"><code |
dino@1907 | 391 | class=property>transition-timing-function</code></a>’. In other |
dino@1907 | 392 | words, unrecognized or non-animatable properties must be kept in the list |
dino@1907 | 393 | to preserve the matching of indices. |
dbaron@1543 | 394 | |
dbaron@4537 | 395 | <p class=issue> Are ‘<code class=property>none</code>’, |
dbaron@4537 | 396 | ‘<code class=property>inherit</code>’, and ‘<code |
dbaron@1543 | 397 | class=property>initial</code>’ allowed as items in a list of |
dbaron@1543 | 398 | identifiers (of length greater than one)? |
dbaron@1543 | 399 | |
dbaron@4537 | 400 | <p> For the keyword ‘<code class=property>all</code>’, or if |
dbaron@4537 | 401 | one of the identifiers listed is a shorthand property, implementations |
dbaron@4537 | 402 | must start transitions for any of its longhand sub-properties that are |
dbaron@4537 | 403 | animatable (or, for ‘<code class=property>all</code>’, all |
dbaron@4537 | 404 | animatable properties), using the duration, delay, and timing function at |
dbaron@4537 | 405 | the index corresponding to the shorthand. |
dbaron@1543 | 406 | |
dino@1907 | 407 | <p> If a property is specified multiple times in the value of ‘<a |
dino@1907 | 408 | href="#transition-property"><code |
dbaron@4537 | 409 | class=property>transition-property</code></a>’ (either on its own, |
dbaron@4537 | 410 | via a shorthand that contains it, or via the ‘<code |
dbaron@4537 | 411 | class=property>all</code>’ value), then the transition that starts |
dbaron@4537 | 412 | uses the duration, delay, and timing function at the index corresponding |
dbaron@4537 | 413 | to the <em>last</em> item in the value of ‘<a |
dbaron@4537 | 414 | href="#transition-property"><code |
dbaron@4537 | 415 | class=property>transition-property</code></a>’ that calls for |
dbaron@4543 | 416 | animating that property. |
dbaron@4537 | 417 | |
dbaron@4537 | 418 | <p class=note> Note: The <code class=property>all</code> value and |
dbaron@4537 | 419 | shorthand properties work in similar ways, so the <code |
dbaron@4537 | 420 | class=property>all</code> value is just like a shorthand that covers all |
dbaron@4537 | 421 | properties.</p> |
dino@936 | 422 | <!-- ======================================================================================================= --> |
dino@936 | 423 | |
dino@1669 | 424 | <h3 id=the-transition-duration-property-><span class=secno>2.2. </span> The |
simon@4370 | 425 | <a href="#transition-duration"><code |
simon@4370 | 426 | class=property>'transition-duration'</code></a> Property</h3> |
dino@936 | 427 | |
simon@4370 | 428 | <p> The <a href="#transition-duration"><code |
simon@4370 | 429 | class=property>'transition-duration'</code></a> property defines the |
simon@4370 | 430 | length of time that a transition takes. |
dino@936 | 431 | |
dino@936 | 432 | <table class=propdef> |
dino@936 | 433 | <tbody> |
dino@936 | 434 | <tr> |
dino@936 | 435 | <td> <em>Name:</em> |
dino@936 | 436 | |
dino@936 | 437 | <td> <dfn id=transition-duration>transition-duration</dfn> |
dino@936 | 438 | |
dino@936 | 439 | <tr> |
dino@936 | 440 | <td> <em>Value:</em> |
dino@936 | 441 | |
dino@936 | 442 | <td> <time> [, <time>]* |
dino@936 | 443 | |
dino@936 | 444 | <tr> |
dino@936 | 445 | <td> <em>Initial:</em> |
dino@936 | 446 | |
dino@3189 | 447 | <td> 0s |
dino@936 | 448 | |
dino@936 | 449 | <tr> |
dino@936 | 450 | <td> <em>Applies to:</em> |
dino@936 | 451 | |
dino@1469 | 452 | <td> all elements, :before and :after pseudo elements |
dino@936 | 453 | |
dino@936 | 454 | <tr> |
dino@936 | 455 | <td> <em>Inherited:</em> |
dino@936 | 456 | |
dino@936 | 457 | <td> no |
dino@936 | 458 | |
dino@936 | 459 | <tr> |
dino@936 | 460 | <td> <em>Percentages:</em> |
dino@936 | 461 | |
dino@936 | 462 | <td> N/A |
dino@936 | 463 | |
dino@936 | 464 | <tr> |
dino@936 | 465 | <td> <em>Media:</em> |
dino@936 | 466 | |
dino@1469 | 467 | <td> interactive |
dino@936 | 468 | |
dino@936 | 469 | <tr> |
dino@936 | 470 | <td> <em>Computed value:</em> |
dino@936 | 471 | |
dino@936 | 472 | <td> Same as specified value. |
dino@936 | 473 | </table> |
dino@936 | 474 | |
dino@936 | 475 | <p> This property specifies how long the transition from the old value to |
dino@936 | 476 | the new value should take. By default the value is ‘<code |
dino@3189 | 477 | class=css>0s</code>’, meaning that the transition is immediate (i.e. |
simon@4370 | 478 | there will be no animation). A negative value for <a |
simon@4370 | 479 | href="#transition-duration"><code |
simon@4370 | 480 | class=property>transition-duration</code></a> is treated as ‘<code |
simon@4370 | 481 | class=css>0s</code>’.</p> |
dino@936 | 482 | <!-- ======================================================================================================= |
dino@936 | 483 | --> |
dino@936 | 484 | |
dino@1669 | 485 | <h3 id="transition-timing-function_tag"><span class=secno>2.3. </span> The |
simon@4370 | 486 | <a href="#transition-timing-function"><code |
simon@4370 | 487 | class=property>'transition-timing-function'</code></a> Property</h3> |
dino@936 | 488 | |
simon@4370 | 489 | <p> The <a href="#transition-timing-function"><code |
simon@4370 | 490 | class=property>'transition-timing-function'</code></a> property describes |
simon@4370 | 491 | how the intermediate values used during a transition will be calculated. |
simon@4370 | 492 | It allows for a transition to change speed over its duration. These |
simon@4370 | 493 | effects are commonly called <em>easing</em> functions. In either case, a |
simon@4370 | 494 | mathematical function that provides a smooth curve is used. |
dino@936 | 495 | |
dino@1907 | 496 | <p> Timing functions are either defined as a stepping function or a <a |
dino@936 | 497 | href="http://en.wikipedia.org/wiki/B%C3%A9zier_curve#Cubic_B.C3.A9zier_curves">cubic |
dbaron@4550 | 498 | Bézier curve</a>. The timing function takes as its input the |
dbaron@4550 | 499 | current elapsed percentage of the transition duration and outputs a |
dbaron@4550 | 500 | percentage that determines how close the transition is to its goal state. |
dino@1907 | 501 | |
dino@1907 | 502 | <p> A <a href="http://en.wikipedia.org/wiki/Step_function">stepping</a> |
dino@1907 | 503 | function is defined by a number that divides the domain of operation into |
dino@1907 | 504 | equally sized intervals. Each subsequent interval is a equal step closer |
dino@1907 | 505 | to the goal state. The function also specifies whether the change in |
dino@1907 | 506 | output percentage happens at the start or end of the interval (in other |
dino@1907 | 507 | words, if 0% on the input percentage is the point of initial change). |
dino@1907 | 508 | |
dbaron@4124 | 509 | <div class=figure> <img |
dbaron@4124 | 510 | alt="The step timing function splits the function domain into a number of disjoint straight line segments. steps(1, start) is a function whose output value is 1 for all input values. steps(1, end) is a function whose output value is 0 for all input values less than 1, and output is 1 for the input value of 1. steps(3, start) is a function that divides the input domain into three segments, each 1/3 in length, and 1/3 above the previous segment, with the first segment starting at 1/3. steps(3, end) is a function that divides the input domain into three segments, each 1/3 in length, and 1/3 above the previous segment, with the first segment starting at 0." |
dbaron@4124 | 511 | src=step.png></div> |
dino@1907 | 512 | |
dino@1907 | 513 | <p class=caption> Step timing functions |
dino@1907 | 514 | |
dino@1907 | 515 | <p> A <a |
dino@1907 | 516 | href="http://en.wikipedia.org/wiki/B%C3%A9zier_curve#Cubic_B.C3.A9zier_curves">cubic |
dbaron@4550 | 517 | Bézier curve</a> is defined by four control points, P<sub>0</sub> |
dbaron@4550 | 518 | through P<sub>3</sub> (see Figure 1). P<sub>0</sub> and P<sub>3</sub> are |
dbaron@4550 | 519 | always set to (0,0) and (1,1). The <a |
dbaron@4550 | 520 | href="#transition-timing-function"><code |
simon@4370 | 521 | class=property>'transition-timing-function'</code></a> property is used to |
simon@4370 | 522 | specify the values for points P<sub>1</sub> and P<sub>2</sub>. These can |
simon@4370 | 523 | be set to preset values using the keywords listed below, or can be set to |
simon@4370 | 524 | specific values using the <code class=css>'cubic-bezier'</code> function. |
simon@4370 | 525 | In the <code class=css>'cubic-bezier'</code> function, P<sub>1</sub> and |
simon@4370 | 526 | P<sub>2</sub> are each specified by both an X and Y value. |
dino@936 | 527 | |
dbaron@4124 | 528 | <div class=figure> <img |
dbaron@4550 | 529 | alt="The Bézier timing function is a smooth curve from point P0 = (0,0) to point P3 = (1,1). The length and orientation of the line segment P0-P1 determines the tangent and the curvature of the curve at P0 and the line segment P2-P3 does the same at P3." |
bert@1105 | 530 | src=TimingFunction.png></div> |
dino@936 | 531 | |
dbaron@4550 | 532 | <p class=caption> Bézier Timing Function Control Points |
dino@936 | 533 | |
dino@936 | 534 | <table class=propdef> |
dino@936 | 535 | <tbody> |
dino@936 | 536 | <tr> |
dino@936 | 537 | <td> <em>Name:</em> |
dino@936 | 538 | |
dino@936 | 539 | <td> <dfn id=transition-timing-function>transition-timing-function</dfn> |
dino@936 | 540 | |
dino@936 | 541 | |
dino@936 | 542 | <tr> |
dino@936 | 543 | <td> <em>Value:</em> |
dino@936 | 544 | |
dino@1907 | 545 | <td> ease | linear | ease-in | ease-out | ease-in-out | step-start | |
dino@2615 | 546 | step-end | steps(<integer>[, start | end ]) | |
dino@936 | 547 | cubic-bezier(<number>, <number>, <number>, |
dbaron@5298 | 548 | <number>) [, [ ease | linear | ease-in | ease-out | ease-in-out | |
dino@1907 | 549 | step-start | step-end | steps(<number>[, start | end ]) | |
dino@936 | 550 | cubic-bezier(<number>, <number>, <number>, |
dbaron@5298 | 551 | <number>) ] ]* |
dino@936 | 552 | |
dino@936 | 553 | <tr> |
dino@936 | 554 | <td> <em>Initial:</em> |
dino@936 | 555 | |
dino@936 | 556 | <td> ease |
dino@936 | 557 | |
dino@936 | 558 | <tr> |
dino@936 | 559 | <td> <em>Applies to:</em> |
dino@936 | 560 | |
dino@1469 | 561 | <td> all elements, :before and :after pseudo elements |
dino@936 | 562 | |
dino@936 | 563 | <tr> |
dino@936 | 564 | <td> <em>Inherited:</em> |
dino@936 | 565 | |
dino@936 | 566 | <td> no |
dino@936 | 567 | |
dino@936 | 568 | <tr> |
dino@936 | 569 | <td> <em>Percentages:</em> |
dino@936 | 570 | |
dino@936 | 571 | <td> N/A |
dino@936 | 572 | |
dino@936 | 573 | <tr> |
dino@936 | 574 | <td> <em>Media:</em> |
dino@936 | 575 | |
dino@1469 | 576 | <td> interactive |
dino@936 | 577 | |
dino@936 | 578 | <tr> |
dino@936 | 579 | <td> <em>Computed value:</em> |
dino@936 | 580 | |
dino@936 | 581 | <td> Same as specified value. |
dino@936 | 582 | </table> |
dino@936 | 583 | |
dino@936 | 584 | <p> The timing functions have the following definitions. |
dino@936 | 585 | |
dino@936 | 586 | <dl> |
dino@936 | 587 | <dt> ease |
dino@936 | 588 | |
dino@936 | 589 | <dd> The ease function is equivalent to cubic-bezier(0.25, 0.1, 0.25, |
dino@936 | 590 | 1.0). |
dino@936 | 591 | |
dino@936 | 592 | <dt> linear |
dino@936 | 593 | |
dino@936 | 594 | <dd> The linear function is equivalent to cubic-bezier(0.0, 0.0, 1.0, |
dino@936 | 595 | 1.0). |
dino@936 | 596 | |
dino@936 | 597 | <dt> ease-in |
dino@936 | 598 | |
dino@936 | 599 | <dd> The ease-in function is equivalent to cubic-bezier(0.42, 0, 1.0, |
dino@936 | 600 | 1.0). |
dino@936 | 601 | |
dino@936 | 602 | <dt> ease-out |
dino@936 | 603 | |
dino@936 | 604 | <dd> The ease-out function is equivalent to cubic-bezier(0, 0, 0.58, 1.0). |
dino@936 | 605 | |
dino@936 | 606 | |
dino@936 | 607 | <dt> ease-in-out |
dino@936 | 608 | |
dino@936 | 609 | <dd> The ease-in-out function is equivalent to cubic-bezier(0.42, 0, 0.58, |
dino@936 | 610 | 1.0) |
dino@936 | 611 | |
dino@1907 | 612 | <dt> step-start |
dino@1907 | 613 | |
dino@1907 | 614 | <dd> The step-start function is equivalent to steps(1, start). |
dino@1907 | 615 | |
dino@1907 | 616 | <dt> step-end |
dino@1907 | 617 | |
dino@1907 | 618 | <dd> The step-end function is equivalent to steps(1, end). |
dino@1907 | 619 | |
dino@1907 | 620 | <dt> steps |
dino@1907 | 621 | |
dino@1907 | 622 | <dd> Specifies a stepping function, described above, taking two |
dino@1907 | 623 | parameters. The first parameter specifies the number of intervals in the |
dino@2615 | 624 | function. It must be a positive integer (greater than 0). The second |
dino@2615 | 625 | parameter, which is optional, is either the value ‘<code |
dino@2615 | 626 | class=property>start</code>’ or ‘<code |
dino@1907 | 627 | class=property>end</code>’, and specifies the point at which the |
dino@1907 | 628 | change of values occur within the interval. If the second parameter is |
dino@1907 | 629 | omitted, it is given the value ‘<code |
dino@1907 | 630 | class=property>end</code>’. |
dino@1907 | 631 | |
dino@936 | 632 | <dt> cubic-bezier |
dino@936 | 633 | |
dino@936 | 634 | <dd> Specifies a <a |
dino@936 | 635 | href="http://en.wikipedia.org/wiki/B%C3%A9zier_curve">cubic-bezier |
dino@936 | 636 | curve</a>. The four values specify points P<sub>1</sub> and P<sub>2</sub> |
dino@2615 | 637 | of the curve as (x1, y1, x2, y2). Both x values must be in the range [0, |
dino@2615 | 638 | 1] or the definition is invalid. The y values can exceed this range. |
dino@936 | 639 | </dl> |
dino@936 | 640 | <!-- ======================================================================================================= --> |
dino@936 | 641 | |
simon@4370 | 642 | <h3 id=the-transition-delay-property-><span class=secno>2.4. </span> The <a |
simon@4370 | 643 | href="#transition-delay"><code |
simon@4370 | 644 | class=property>'transition-delay'</code></a> Property</h3> |
dino@936 | 645 | |
simon@4370 | 646 | <p> The <a href="#transition-delay"><code |
simon@4370 | 647 | class=property>'transition-delay'</code></a> property defines when the |
simon@4370 | 648 | transition will start. It allows a transition to begin execution some some |
simon@4370 | 649 | period of time from when it is applied. A <a |
simon@4370 | 650 | href="#transition-delay"><code |
simon@4370 | 651 | class=property>'transition-delay'</code></a> value of ‘<code |
simon@4370 | 652 | class=css>0s</code>’ means the transition will execute as soon as |
simon@4370 | 653 | the property is changed. Otherwise, the value specifies an offset from the |
simon@4370 | 654 | moment the property is changed, and the transition will delay execution by |
simon@4370 | 655 | that offset. |
dino@936 | 656 | |
simon@4370 | 657 | <p> If the value for <a href="#transition-delay"><code |
simon@4370 | 658 | class=property>'transition-delay'</code></a> is a negative time offset |
simon@4370 | 659 | then the transition will execute the moment the property is changed, but |
simon@4370 | 660 | will appear to have begun execution at the specified offset. That is, the |
simon@4370 | 661 | transition will appear to begin part-way through its play cycle. In the |
simon@4370 | 662 | case where a transition has implied starting values and a negative <a |
dino@1907 | 663 | href="#transition-delay"><code |
simon@4370 | 664 | class=property>'transition-delay'</code></a>, the starting values are |
simon@4370 | 665 | taken from the moment the property is changed. |
dino@936 | 666 | |
dino@936 | 667 | <table class=propdef> |
dino@936 | 668 | <tbody> |
dino@936 | 669 | <tr> |
dino@936 | 670 | <td> <em>Name:</em> |
dino@936 | 671 | |
dino@936 | 672 | <td> <dfn id=transition-delay>transition-delay</dfn> |
dino@936 | 673 | |
dino@936 | 674 | <tr> |
dino@936 | 675 | <td> <em>Value:</em> |
dino@936 | 676 | |
dino@936 | 677 | <td> <time> [, <time>]* |
dino@936 | 678 | |
dino@936 | 679 | <tr> |
dino@936 | 680 | <td> <em>Initial:</em> |
dino@936 | 681 | |
dino@3189 | 682 | <td> 0s |
dino@936 | 683 | |
dino@936 | 684 | <tr> |
dino@936 | 685 | <td> <em>Applies to:</em> |
dino@936 | 686 | |
dino@1469 | 687 | <td> all elements, :before and :after pseudo elements |
dino@936 | 688 | |
dino@936 | 689 | <tr> |
dino@936 | 690 | <td> <em>Inherited:</em> |
dino@936 | 691 | |
dino@936 | 692 | <td> no |
dino@936 | 693 | |
dino@936 | 694 | <tr> |
dino@936 | 695 | <td> <em>Percentages:</em> |
dino@936 | 696 | |
dino@936 | 697 | <td> N/A |
dino@936 | 698 | |
dino@936 | 699 | <tr> |
dino@936 | 700 | <td> <em>Media:</em> |
dino@936 | 701 | |
dino@1469 | 702 | <td> interactive |
dino@936 | 703 | |
dino@936 | 704 | <tr> |
dino@936 | 705 | <td> <em>Computed value:</em> |
dino@936 | 706 | |
dino@936 | 707 | <td> Same as specified value. |
dino@936 | 708 | </table> |
dino@936 | 709 | <!-- ======================================================================================================= --> |
dino@936 | 710 | |
dino@1669 | 711 | <h3 id=the-transition-shorthand-property-><span class=secno>2.5. </span> |
simon@4370 | 712 | The <a href="#transition"><code class=property>'transition'</code></a> |
simon@4370 | 713 | Shorthand Property</h3> |
dino@936 | 714 | |
simon@4370 | 715 | <p> The <a href="#transition"><code class=property>'transition'</code></a> |
simon@4370 | 716 | shorthand property combines the four properties described above into a |
simon@4370 | 717 | single property. |
dino@936 | 718 | |
dino@1469 | 719 | <p> Note that order is important in this property. The first value that can |
dino@1469 | 720 | be parsed as a time is assigned to the transition-duration. The second |
dino@1469 | 721 | value that can be parsed as a time is assigned to transition-delay. |
dino@1469 | 722 | |
dino@1469 | 723 | <p class=issue> An alternative proposal is to accept the font shorthand |
dbaron@4550 | 724 | approach of using a "/" character between the values of the same type. |
dbaron@4550 | 725 | e.g. 2s/4s would mean a duration of 2 seconds and a delay of 4 seconds. |
dino@1469 | 726 | |
dino@936 | 727 | <table class=propdef> |
dino@936 | 728 | <tbody> |
dino@936 | 729 | <tr> |
dino@936 | 730 | <td> <em>Name:</em> |
dino@936 | 731 | |
dino@936 | 732 | <td> <dfn id=transition>transition</dfn> |
dino@936 | 733 | |
dino@936 | 734 | <tr> |
dino@936 | 735 | <td> <em>Value:</em> |
dino@936 | 736 | |
dino@1907 | 737 | <td> [<‘<a href="#transition-property"><code |
dino@1907 | 738 | class=property>transition-property</code></a>’> || |
dino@1907 | 739 | <‘<a href="#transition-duration"><code |
dino@1907 | 740 | class=property>transition-duration</code></a>’> || |
dino@1907 | 741 | <‘<a href="#transition-timing-function"><code |
dino@1907 | 742 | class=property>transition-timing-function</code></a>’> || |
dino@1907 | 743 | <‘<a href="#transition-delay"><code |
dino@1907 | 744 | class=property>transition-delay</code></a>’> [, [<‘<a |
dino@1907 | 745 | href="#transition-property"><code |
dino@1907 | 746 | class=property>transition-property</code></a>’> || |
dino@1907 | 747 | <‘<a href="#transition-duration"><code |
dino@1907 | 748 | class=property>transition-duration</code></a>’> || |
dino@1907 | 749 | <‘<a href="#transition-timing-function"><code |
dino@1907 | 750 | class=property>transition-timing-function</code></a>’> || |
dino@1907 | 751 | <‘<a href="#transition-delay"><code |
dino@1907 | 752 | class=property>transition-delay</code></a>’>]]* |
dino@936 | 753 | |
dino@936 | 754 | <tr> |
dino@936 | 755 | <td> <em>Initial:</em> |
dino@936 | 756 | |
dino@936 | 757 | <td> see individual properties |
dino@936 | 758 | |
dino@936 | 759 | <tr> |
dino@936 | 760 | <td> <em>Applies to:</em> |
dino@936 | 761 | |
dino@1469 | 762 | <td> all elements, :before and :after pseudo elements |
dino@936 | 763 | |
dino@936 | 764 | <tr> |
dino@936 | 765 | <td> <em>Inherited:</em> |
dino@936 | 766 | |
dino@936 | 767 | <td> no |
dino@936 | 768 | |
dino@936 | 769 | <tr> |
dino@936 | 770 | <td> <em>Percentages:</em> |
dino@936 | 771 | |
dino@936 | 772 | <td> N/A |
dino@936 | 773 | |
dino@936 | 774 | <tr> |
dino@936 | 775 | <td> <em>Media:</em> |
dino@936 | 776 | |
dino@1469 | 777 | <td> interactive |
dino@936 | 778 | |
dino@936 | 779 | <tr> |
dino@936 | 780 | <td> <em>Computed value:</em> |
dino@936 | 781 | |
dino@936 | 782 | <td> Same as specified value. |
dino@936 | 783 | </table> |
dino@936 | 784 | |
dino@1669 | 785 | <h2 id=starting><span class=secno>3. </span> Starting of transitions</h2> |
dbaron@1540 | 786 | |
dbaron@2569 | 787 | <p> When the computed value of an animatable property changes, |
dbaron@2569 | 788 | implementations must decide what transitions to start based on the values |
dbaron@2569 | 789 | of the ‘<a href="#transition-property"><code |
dino@1907 | 790 | class=property>transition-property</code></a>’, ‘<a |
dino@1907 | 791 | href="#transition-duration"><code |
dino@1907 | 792 | class=property>transition-duration</code></a>’, ‘<a |
dino@1907 | 793 | href="#transition-timing-function"><code |
dino@1907 | 794 | class=property>transition-timing-function</code></a>’, and ‘<a |
dino@1907 | 795 | href="#transition-delay"><code |
dino@1907 | 796 | class=property>transition-delay</code></a>’ properties at the time |
dbaron@2570 | 797 | the animatable property would first have its new computed value. |
dbaron@2570 | 798 | |
dbaron@5243 | 799 | <div class=example id=manual-reversing-example> |
dbaron@2570 | 800 | <p style="display:none"> Example(s):</p> |
dbaron@2570 | 801 | |
dbaron@5243 | 802 | <p>This provides a way for authors to specify different values of the |
dbaron@5243 | 803 | ‘<code class=css>transition-*</code>’ properties for the |
dbaron@5243 | 804 | “forward” and “reverse” transitions (but see <a |
dbaron@5243 | 805 | href="#reversing">below</a> for special reversing behavior when an |
dbaron@5243 | 806 | <em>incomplete</em> transition is interrupted). Authors can specify the |
dbaron@5243 | 807 | value of ‘<a href="#transition-duration"><code |
dbaron@5243 | 808 | class=property>transition-duration</code></a>’, ‘<a |
dbaron@5243 | 809 | href="#transition-timing-function"><code |
dbaron@5243 | 810 | class=property>transition-timing-function</code></a>’, or ‘<a |
dbaron@5243 | 811 | href="#transition-delay"><code |
dbaron@5243 | 812 | class=property>transition-delay</code></a>’ in the same rule where |
dbaron@5243 | 813 | they specify the value that triggers the transition, or can change these |
dbaron@5243 | 814 | properties at the same time as they change the property that triggers the |
dbaron@5243 | 815 | transition. Since it's the new values of these ‘<code |
dbaron@5243 | 816 | class=css>transition-*</code>’ properties that affect the |
dbaron@5243 | 817 | transition, these values will be used for the transitions <em>to</em> the |
dbaron@5243 | 818 | associated transitioning values. For example:</p> |
dbaron@5243 | 819 | |
dbaron@5243 | 820 | <pre>li { |
dbaron@5243 | 821 | transition: background-color linear 1s; |
dbaron@5243 | 822 | background: blue; |
dbaron@5243 | 823 | } |
dbaron@5243 | 824 | li:hover { |
dbaron@5243 | 825 | background-color: green; |
dbaron@5243 | 826 | transition-duration: 2s; /* applies to the transition *to* the :hover state */ |
dbaron@5243 | 827 | }</pre> |
dbaron@2570 | 828 | |
dbaron@2570 | 829 | <p> When a list item with these style rules enters the :hover state, the |
dbaron@2570 | 830 | computed ‘<a href="#transition-duration"><code |
dbaron@2570 | 831 | class=property>transition-duration</code></a>’ at the time that |
dbaron@2570 | 832 | ‘<code class=property>background-color</code>’ would have its |
dbaron@2570 | 833 | new value (‘<code class=property>green</code>’) is |
dbaron@2570 | 834 | ‘<code class=css>2s</code>’, so the transition from |
dbaron@2570 | 835 | ‘<code class=property>blue</code>’ to ‘<code |
dbaron@2570 | 836 | class=property>green</code>’ takes 2 seconds. However, when the |
dbaron@2570 | 837 | list item leaves the :hover state, the transition from ‘<code |
dbaron@2570 | 838 | class=property>green</code>’ to ‘<code |
dbaron@2570 | 839 | class=property>blue</code>’ takes 1 second.</p> |
dbaron@2570 | 840 | </div> |
dbaron@2570 | 841 | |
dbaron@5247 | 842 | <p> When the computed value of a property changes, implementations must |
dbaron@5247 | 843 | start transitions based on the relevant item (see <a |
dbaron@5248 | 844 | href="#transition-property">the definition of ‘<code |
dbaron@5247 | 845 | class=property>transition-property</code>’</a>) in the computed |
dbaron@5247 | 846 | value of ‘<a href="#transition-property"><code |
dbaron@5252 | 847 | class=property>transition-property</code></a>’. Corresponding to |
dbaron@5252 | 848 | this item there are values of ‘<a href="#transition-duration"><code |
dbaron@5252 | 849 | class=property>transition-duration</code></a>’ and ‘<a |
dbaron@5247 | 850 | href="#transition-delay"><code |
dbaron@5253 | 851 | class=property>transition-delay</code></a>’ (see <a |
dbaron@5253 | 852 | href="#list-matching">the rules on matching lists</a>). Define the <dfn |
dbaron@5252 | 853 | id=combined-duration>combined duration</dfn> of the transition as the sum |
dbaron@5252 | 854 | of max(‘<a href="#transition-duration"><code |
dbaron@5252 | 855 | class=property>transition-duration</code></a>’, ‘<code |
dbaron@5252 | 856 | class=css>0s</code>’) and ‘<a href="#transition-delay"><code |
dbaron@5252 | 857 | class=property>transition-delay</code></a>’. When the combined |
dbaron@5252 | 858 | duration is greater than ‘<code class=css>0s</code>’, then a |
dbaron@5252 | 859 | transition starts based on the values of ‘<a |
dbaron@5252 | 860 | href="#transition-duration"><code |
dbaron@5247 | 861 | class=property>transition-duration</code></a>’, ‘<a |
dbaron@5247 | 862 | href="#transition-delay"><code |
dbaron@5247 | 863 | class=property>transition-delay</code></a>’, and ‘<a |
dbaron@5247 | 864 | href="#transition-timing-function"><code |
dbaron@5247 | 865 | class=property>transition-timing-function</code></a>’; in other |
dbaron@5247 | 866 | cases transitions do not occur. |
dbaron@5247 | 867 | |
dbaron@2570 | 868 | <p> Since this specification does not define when computed values change, |
dbaron@2570 | 869 | and thus what changes to computed values are considered simultaneous, |
dbaron@2570 | 870 | authors should be aware that changing any of the transition properties a |
dbaron@2570 | 871 | small amount of time after making a change that might transition can |
dbaron@2570 | 872 | result in behavior that varies between implementations, since the changes |
dbaron@2570 | 873 | might be considered simultaneous in some implementations but not others. |
dbaron@1540 | 874 | |
dbaron@4550 | 875 | <p class=note>Say something about simultaneity |
simon@1766 | 876 | |
dbaron@1540 | 877 | <p> Once the transition of a property has started, it must continue running |
dbaron@1540 | 878 | based on the original timing function, duration, and delay, even if the |
dino@1907 | 879 | ‘<a href="#transition-timing-function"><code |
dino@1907 | 880 | class=property>transition-timing-function</code></a>’, ‘<a |
dino@1907 | 881 | href="#transition-duration"><code |
dino@1907 | 882 | class=property>transition-duration</code></a>’, or ‘<a |
dino@1907 | 883 | href="#transition-delay"><code |
dino@1907 | 884 | class=property>transition-delay</code></a>’ property changes before |
dino@1907 | 885 | the transition is complete. However, if the ‘<a |
dino@1907 | 886 | href="#transition-property"><code |
dino@1907 | 887 | class=property>transition-property</code></a>’ property changes such |
dino@1907 | 888 | that the transition would not have started, the transition must stop (and |
dino@1907 | 889 | the property must immediately change to its final value). |
dbaron@1540 | 890 | |
dbaron@1540 | 891 | <p> Implementations must not start a transition when the computed value of |
dbaron@1547 | 892 | a property changes as a result of declarative animation (as opposed to |
dbaron@1547 | 893 | scripted animation). |
dbaron@1540 | 894 | |
dbaron@1540 | 895 | <p> Implementations also must not start a transition when the computed |
dbaron@1540 | 896 | value changes because it is inherited (directly or indirectly) from |
dbaron@1540 | 897 | another element that is transitioning the same property. |
dbaron@1540 | 898 | |
dino@1669 | 899 | <h2 id=reversing><span class=secno>4. </span> Automatically reversing |
dbaron@5243 | 900 | interrupted transitions</h2> |
dino@936 | 901 | |
dino@1531 | 902 | <p> A common type of transition effect is when a running transition is |
dino@1531 | 903 | interrupted and the property is reset to its original value. An example is |
dino@1531 | 904 | a hover effect on an element, where the pointer enters and exits the |
dino@1531 | 905 | element before the effect has completed. If the outgoing and incoming |
dino@1531 | 906 | transitions are executed using their specified durations and timing |
dino@1531 | 907 | functions, the resulting effect can be distractingly asymmetric. Instead, |
dino@1531 | 908 | the expected behavior is that the new transition should be the reverse of |
dino@1531 | 909 | what has already executed. |
dino@1531 | 910 | |
dino@1532 | 911 | <p> If a running transition with duration T, executing so far for duration |
dino@1532 | 912 | TE, from state A, to state B, is interrupted by a property change that |
dino@1532 | 913 | would start a new transition back to state A, and all the transition |
dino@1532 | 914 | attributes are the same (duration, delay and timing function), then the |
dino@1532 | 915 | new transition must reverse the effect. The new transition must: |
dino@1532 | 916 | |
dino@1532 | 917 | <ol> |
dino@1532 | 918 | <li> Use the B and A states as its "from" and "to" states respectively. It |
dino@1532 | 919 | does not use the current value as its from state, due to the rules below. |
dino@1532 | 920 | |
dino@1532 | 921 | |
dino@1532 | 922 | <li> Execute with the same duration T, but starting as if the transition |
dino@1532 | 923 | had already begun, without any transition delay, at the moment which |
dino@1532 | 924 | would cause the new transition to finish in TE from the moment of |
dino@1532 | 925 | interruption. In other words, the new transition will execute as if it |
dino@1532 | 926 | started T-TE in the past. |
dino@1532 | 927 | |
dino@1532 | 928 | <li> Use a timing function that is the portion of the curve traversed up |
dino@1532 | 929 | to the moment of interruption, followed in the opposite direction |
dino@1532 | 930 | (towards the starting point). This will make the transition appear as if |
dino@1532 | 931 | it is playing backwards. |
dino@1532 | 932 | |
dino@1532 | 933 | <li> Ignore any transition delay. |
dino@1532 | 934 | </ol> |
dino@1531 | 935 | |
dino@1531 | 936 | <p> For example, suppose there is a transition with a duration of two |
dino@1531 | 937 | seconds. If this transition is interrupted after 0.5 seconds and the |
dino@1531 | 938 | property value assigned to the original value, then the new transition |
dino@1531 | 939 | effect will be the reverse of the original, as if it had begun 1.5 seconds |
dino@1531 | 940 | in the past. |
dino@1531 | 941 | |
dino@1532 | 942 | <p> Note that by using the defined from and to states for the reversing |
dino@1532 | 943 | transition, it is also possible that it may reverse again, if interrupted; |
dino@1532 | 944 | for example, if the transition reversing to state A was again interrupted |
dino@1532 | 945 | by a property change to state B. |
dino@1532 | 946 | |
dbaron@2568 | 947 | <p class=issue>Issue: This introduces the concept of reversing a timing |
dbaron@2568 | 948 | function, which the spec has otherwise resisted doing, and also introduces |
dbaron@2568 | 949 | a discontinuity between transitions that have almost completed (which get |
dbaron@2568 | 950 | automatically reversed and thus have their timing function reversed) and |
dbaron@2568 | 951 | transitions that have fully completed (where the reversal doesn't lead to |
dbaron@2568 | 952 | the timing function being reversed). An alternative proposal that avoids |
dbaron@2568 | 953 | this is to follow the normal timing function algorithm, except multiply |
dbaron@2568 | 954 | the duration (and also shorten any negative delay) by the (output) value |
dbaron@2568 | 955 | of the transition timing function of the incomplete transition at the time |
dbaron@2568 | 956 | it was interrupted, and, to account for multiple reverses in sequence, to |
dbaron@2568 | 957 | divide by the shortening applied to the transition being interrupted. For |
dbaron@2568 | 958 | more details see this thread: <a |
dbaron@2568 | 959 | href="http://lists.w3.org/Archives/Public/www-style/2009Nov/thread.html#msg302">November |
dbaron@2568 | 960 | 2009 part</a>, <a |
dbaron@2568 | 961 | href="http://lists.w3.org/Archives/Public/www-style/2009Dec/thread.html#msg319">December |
dbaron@2568 | 962 | 2009 part</a>, <a |
dbaron@2568 | 963 | href="http://lists.w3.org/Archives/Public/www-style/2010Jan/thread.html#msg136">January |
dbaron@2568 | 964 | 2010 part</a>. |
dbaron@2568 | 965 | |
dino@1669 | 966 | <h2 id=transition-events-><span class=secno>5. </span> Transition Events</h2> |
dino@936 | 967 | |
dino@936 | 968 | <p> The completion of a CSS Transition generates a corresponding <a |
dino@936 | 969 | href="http://www.w3.org/TR/DOM-Level-2-Events/events.html">DOM Event</a>. |
dino@936 | 970 | An event is fired for each property that undergoes a transition. This |
dino@936 | 971 | allows a content developer to perform actions that synchronize with the |
dino@936 | 972 | completion of a transition. |
dino@936 | 973 | |
dino@936 | 974 | <p> Each event provides the name of the property the transition is |
dino@936 | 975 | associated with as well as the duration of the transition. |
dino@936 | 976 | |
dino@936 | 977 | <dl> |
dino@936 | 978 | <dt> <b>Interface <i><a id=Events-TransitionEvent |
dino@936 | 979 | name=Events-TransitionEvent>TransitionEvent</a></i></b> |
dino@936 | 980 | |
dino@936 | 981 | <dd> |
dino@936 | 982 | <p> The <code>TransitionEvent</code> interface provides specific |
dino@936 | 983 | contextual information associated with transitions.</p> |
dino@936 | 984 | |
dino@936 | 985 | <dl> |
dino@936 | 986 | <dt> <b>IDL Definition</b> |
dino@936 | 987 | |
dino@936 | 988 | <dd> |
dino@936 | 989 | <div class=idl-code> |
dino@936 | 990 | <pre> |
dino@936 | 991 | interface TransitionEvent : Event { |
dino@936 | 992 | readonly attribute DOMString propertyName; |
dino@936 | 993 | readonly attribute float elapsedTime; |
dbaron@5259 | 994 | readonly attribute DOMString pseudoElement; |
dino@936 | 995 | void initTransitionEvent(in DOMString typeArg, |
dino@936 | 996 | in boolean canBubbleArg, |
dino@936 | 997 | in boolean cancelableArg, |
dino@936 | 998 | in DOMString propertyNameArg, |
dbaron@5259 | 999 | in float elapsedTimeArg, |
dbaron@5259 | 1000 | in DOMString pseudoElementArg); |
dino@936 | 1001 | }; |
dino@936 | 1002 | </pre> |
dino@936 | 1003 | </div> |
dino@936 | 1004 | |
dino@936 | 1005 | <dt> <b>Attributes</b> |
dino@936 | 1006 | |
dino@936 | 1007 | <dd> |
dino@936 | 1008 | <dl> |
dino@936 | 1009 | <dt> <code class=attribute-name><a |
dino@936 | 1010 | id=Events-TransitionEvent-propertyName |
dino@936 | 1011 | name=Events-TransitionEvent-propertyName>propertyName</a></code> of |
dino@936 | 1012 | type <code>DOMString</code>, readonly |
dino@936 | 1013 | |
dino@936 | 1014 | <dd> The name of the CSS property associated with the transition. |
dino@936 | 1015 | </dl> |
dino@936 | 1016 | |
dino@936 | 1017 | <dl> |
dino@936 | 1018 | <dt> <code class=attribute-name><a |
dino@936 | 1019 | id=Events-TransitionEvent-elapsedTime |
dino@936 | 1020 | name=Events-TransitionEvent-elapsedTime>elapsedTime</a></code> of |
dino@936 | 1021 | type <code>float</code>, readonly |
dino@936 | 1022 | |
dino@936 | 1023 | <dd> The amount of time the transition has been running, in seconds, |
dino@936 | 1024 | when this event fired. Note that this value is not affected by the |
simon@4370 | 1025 | value of <a href="#transition-delay"><code |
simon@4370 | 1026 | class=property>transition-delay</code></a>. |
dino@936 | 1027 | </dl> |
dino@936 | 1028 | |
dbaron@5259 | 1029 | <dl> |
dbaron@5259 | 1030 | <dt> <code class=attribute-name><a |
dbaron@5259 | 1031 | id=Events-TransitionEvent-pseudoElement |
dbaron@5259 | 1032 | name=Events-TransitionEvent-pseudoElement>pseudoElement</a></code> of |
dbaron@5259 | 1033 | type <code>DOMString</code>, readonly |
dbaron@5259 | 1034 | |
dbaron@5259 | 1035 | <dd> The name (beginning with two colons) of the CSS pseudo-element on |
dbaron@5259 | 1036 | which the transition occured (in which case the target of the event |
dbaron@5259 | 1037 | is that pseudo-element's corresponding element), or the empty string |
dbaron@5259 | 1038 | if the transition occurred on an element (which means the target of |
dbaron@5287 | 1039 | the event is that element). |
dbaron@5259 | 1040 | </dl> |
dbaron@5259 | 1041 | |
dino@936 | 1042 | <dt> <b>Methods</b> |
dino@936 | 1043 | |
dino@936 | 1044 | <dd> |
dino@936 | 1045 | <dl> |
dino@936 | 1046 | <dt> <code class=method-name><a |
dino@936 | 1047 | id=Events-TransitionEvent-initTransitionEvent |
dino@936 | 1048 | name=Events-TransitionEvent-initTransitionEvent>initTransitionEvent</a></code> |
dino@936 | 1049 | |
dino@936 | 1050 | |
dino@936 | 1051 | <dd> |
dino@936 | 1052 | <div class=method> The <code>initTransitionEvent</code> method is |
dino@936 | 1053 | used to initialize the value of a <code>TransitionEvent</code> |
dino@936 | 1054 | created through the <a |
bert@1105 | 1055 | href="http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-DocumentEvent"><code>DocumentEvent</code></a> |
dino@936 | 1056 | interface. This method may only be called before the |
dino@936 | 1057 | <code>TransitionEvent</code> has been dispatched via the |
dino@936 | 1058 | <code>dispatchEvent</code> method, though it may be called multiple |
dino@936 | 1059 | times during that phase if necessary. If called multiple times, the |
dino@936 | 1060 | final invocation takes precedence. |
dbaron@5287 | 1061 | <p class=issue>Should new events being created still have init*Event |
dbaron@5287 | 1062 | methods?</p> |
dbaron@5287 | 1063 | |
dino@936 | 1064 | <div class=parameters> <b>Parameters</b> |
dino@936 | 1065 | <div class=paramtable> |
dino@936 | 1066 | <dl> |
dino@936 | 1067 | <dt> <code class=parameter-name>typeArg</code> of type |
dino@936 | 1068 | <code>DOMString</code> |
dino@936 | 1069 | |
dino@936 | 1070 | <dd> Specifies the event type.<br> |
dino@936 | 1071 | |
dino@936 | 1072 | <dt> <code class=parameter-name>canBubbleArg</code> of type |
dino@936 | 1073 | <code>boolean</code> |
dino@936 | 1074 | |
dino@936 | 1075 | <dd> Specifies whether or not the event can bubble.<br> |
dino@936 | 1076 | |
dino@936 | 1077 | <dt> <code class=parameter-name>cancelableArg</code> of type |
dino@936 | 1078 | <code>boolean</code> |
dino@936 | 1079 | |
dino@936 | 1080 | <dd> Specifies whether or not the event's default action can be |
dino@1469 | 1081 | prevented. Since a TransitionEvent is purely for notification, |
dino@1469 | 1082 | there is no default action.<br> |
dino@936 | 1083 | |
dino@936 | 1084 | <dt> <code class=parameter-name>propertyNameArg</code> of type |
dino@936 | 1085 | <code>DOMString</code> |
dino@936 | 1086 | |
dino@936 | 1087 | <dd> Specifies the name of the property associated with the <a |
dbaron@5259 | 1088 | href="http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-Event"><code>Event</code></a>. |
dbaron@5259 | 1089 | (See the <a |
dbaron@5259 | 1090 | href="#Events-TransitionEvent-propertyName">propertyName</a> |
dbaron@5259 | 1091 | attribute.) |
dino@936 | 1092 | |
dino@936 | 1093 | <dt> <code class=parameter-name>elapsedTimeArg</code> of type |
dino@936 | 1094 | <code>float</code> |
dino@936 | 1095 | |
dino@936 | 1096 | <dd> Specifies the amount of time, in seconds, the transition has |
dbaron@5259 | 1097 | been running at the time of initialization. (See the <a |
dbaron@5259 | 1098 | href="#Events-TransitionEvent-elapsedTime">elapsedTime</a> |
dbaron@5259 | 1099 | attribute.) |
dbaron@5259 | 1100 | |
dbaron@5259 | 1101 | <dt> <code class=parameter-name>pseudoElementArg</code> of type |
dbaron@5259 | 1102 | <code>DOMString</code> |
dbaron@5259 | 1103 | |
dbaron@5259 | 1104 | <dd> Specifies the pseudo-element on which the transition |
dbaron@5259 | 1105 | occurred. (See the <a |
dbaron@5259 | 1106 | href="#Events-TransitionEvent-pseudoElement">pseudoElement</a> |
dbaron@5287 | 1107 | attribute.) <span class=issue>Does adding this additional |
dbaron@5287 | 1108 | argument create any compatibility problems?</span> |
dino@936 | 1109 | </dl> |
dino@936 | 1110 | </div> |
dino@936 | 1111 | </div> |
dino@936 | 1112 | <!-- parameters --> |
dino@936 | 1113 | <div> <b>No Return Value</b></div> |
dino@936 | 1114 | |
dino@936 | 1115 | <div> <b>No Exceptions</b></div> |
dino@936 | 1116 | </div> |
dino@936 | 1117 | <!-- method --> |
dino@936 | 1118 | </dl> |
dino@936 | 1119 | </dl> |
dino@936 | 1120 | </dl> |
dino@936 | 1121 | |
dino@936 | 1122 | <p> There is one type of transition event available. |
dino@936 | 1123 | |
dino@936 | 1124 | <dl> |
dino@936 | 1125 | <dt> <b>transitionend</b> |
dino@936 | 1126 | |
dino@936 | 1127 | <dd> The ‘<code class=property>transitionend</code>’ event |
dino@1469 | 1128 | occurs at the completion of the transition. In the case where a |
dino@1469 | 1129 | transition is removed before completion, such as if the |
dino@1469 | 1130 | transition-property is removed, then the event will not fire. |
dino@936 | 1131 | <ul> |
dino@936 | 1132 | <li>Bubbles: Yes |
dino@936 | 1133 | |
dino@936 | 1134 | <li>Cancelable: Yes |
dino@936 | 1135 | |
dino@1469 | 1136 | <li>Context Info: propertyName, elapsedTime |
dino@936 | 1137 | </ul> |
dino@936 | 1138 | </dl> |
dino@936 | 1139 | |
dino@1669 | 1140 | <h2 id=animation-of-property-types-><span class=secno>6. </span> Animation |
dino@936 | 1141 | of property types</h2> |
dino@936 | 1142 | |
dino@936 | 1143 | <p> The following describes how each property type undergoes transition or |
dino@936 | 1144 | animation. |
dino@936 | 1145 | |
dino@936 | 1146 | <ul> |
dino@936 | 1147 | <li> <strong>color</strong>: interpolated via red, green, blue and alpha |
dino@936 | 1148 | components (treating each as a number, see below). |
dbaron@1541 | 1149 | <div class=issue>Issue: Are the colors interpolated in premultiplied |
dbaron@1541 | 1150 | space or non-premultiplied space?</div> |
dino@936 | 1151 | |
dino@936 | 1152 | <li> <strong>length</strong>: interpolated as real numbers. |
dino@936 | 1153 | |
dino@936 | 1154 | <li> <strong>percentage</strong>: interpolated as real numbers. |
dino@936 | 1155 | |
dino@936 | 1156 | <li> <strong>integer</strong>: interpolated via discrete steps (whole |
dino@936 | 1157 | numbers). The interpolation happens in real number space and is converted |
dbaron@5286 | 1158 | to an integer using <code>floor()</code>. <span class=issue> This floor |
dbaron@5286 | 1159 | behavior is inconsistent with SMIL Animation / SVG Animation. </span> |
dino@936 | 1160 | |
dbaron@5257 | 1161 | <li> <strong>font weight</strong>: interpolated via discrete steps |
dbaron@5257 | 1162 | (multiples of 100). The interpolation happens in real number space and is |
dbaron@5286 | 1163 | converted to an integer by rounding to the nearest multiple of 100. <span |
dbaron@5286 | 1164 | class=issue> This round-to-nearest behavior is inconsistent with the |
dbaron@5286 | 1165 | floor behavior used for integer types, but probably should be consistent |
dbaron@5286 | 1166 | (one way or the other). </span> |
dbaron@5257 | 1167 | |
dino@936 | 1168 | <li> <strong>number</strong>: interpolated as real (floating point) |
dino@936 | 1169 | numbers. |
dino@936 | 1170 | |
bert@1105 | 1171 | <li> <strong>transform list</strong>: see CSS Transforms specification <a |
dbaron@5220 | 1172 | href="#CSS3-TRANSFORMS" |
dbaron@5220 | 1173 | rel=biblioentry>[CSS3-TRANSFORMS]<!--{{!CSS3-TRANSFORMS}}--></a>. |
dino@936 | 1174 | |
dino@936 | 1175 | <li> <strong>rectangle</strong>: interpolated via the x, y, width and |
dino@936 | 1176 | height components (treating each as a number). |
dino@936 | 1177 | |
dbaron@5258 | 1178 | <li> <strong>visibility</strong>: if one of the values is ‘<code |
dbaron@5258 | 1179 | class=property>visible</code>’, interpolated as a discrete step |
dbaron@5258 | 1180 | where values of the timing function between 0 and 1 map to ‘<code |
dbaron@5258 | 1181 | class=property>visible</code>’ and other values of the timing |
dbaron@5258 | 1182 | function (which occur only at the start/end of the transition or as a |
dbaron@5258 | 1183 | result of ‘<code class=css>cubic-bezier()</code>’ functions |
dbaron@5258 | 1184 | with Y values outside of [0, 1]) map to the closer endpoint; if neither |
dbaron@5258 | 1185 | value is ‘<code class=property>visible</code>’ then not |
dbaron@5258 | 1186 | interpolable. |
dino@936 | 1187 | |
dino@936 | 1188 | <li> <strong>shadow</strong>: interpolated via the color, x, y and blur |
dino@1469 | 1189 | components (treating them as color and numbers where appropriate). In the |
dbaron@1539 | 1190 | case where there are lists of shadows, the shorter list is padded at the |
dbaron@1539 | 1191 | end with shadows whose color is transparent and all lengths (x, y, blur) |
dbaron@1539 | 1192 | are 0. |
dino@936 | 1193 | |
dino@936 | 1194 | <li> <strong>gradient</strong>: interpolated via the positions and colors |
dino@936 | 1195 | of each stop. They must have the same type (radial or linear) and same |
dbaron@2964 | 1196 | number of stops in order to be animated. <span class=note>Note: <a |
dbaron@2964 | 1197 | href="#CSS3-IMAGES" |
dbaron@2964 | 1198 | rel=biblioentry>[CSS3-IMAGES]<!--{{CSS3-IMAGES}}--></a> may extend this |
dbaron@2964 | 1199 | definition.</span> |
dino@936 | 1200 | |
dino@936 | 1201 | <li> <strong>paint server</strong> (SVG): interpolation is only supported |
dino@936 | 1202 | between: gradient to gradient and color to color. They then work as |
dino@936 | 1203 | above. |
dino@936 | 1204 | |
dino@3189 | 1205 | <li> <strong>list of above types</strong>: If the lists have the same |
dino@3189 | 1206 | number of items, each item in the list is interpolated using the rules |
dino@3189 | 1207 | above. Otherwise the interpolation is determined by the property rules. |
dino@3189 | 1208 | If the property extends its list by repeating values, then this repeated |
simon@4370 | 1209 | form will be used in the interpolation (<code |
simon@4370 | 1210 | class=property>'background-position'</code> is an example of a property |
simon@4370 | 1211 | that would transition between lists of different lengths). If the |
simon@4370 | 1212 | property does not allow extending its list, then no interpolation will |
simon@4370 | 1213 | occur. |
dino@1469 | 1214 | |
dino@2615 | 1215 | <li> <strong>a shorthand property</strong>: If any part of a shorthand can |
dino@2615 | 1216 | be animated, then interpolation is performed as if those animatable |
dino@2615 | 1217 | properties were individually specified. |
dino@936 | 1218 | </ul> |
dino@936 | 1219 | |
dbaron@2965 | 1220 | <p class=issue>Issue: Need to describe handling of out-of-range values that |
dbaron@2965 | 1221 | can result from cubic-bezier(). Clamping values to the allowed range is |
dbaron@2965 | 1222 | probably the best solution. |
dbaron@2965 | 1223 | |
dino@1669 | 1224 | <h2 id=animatable-properties-><span class=secno>7. </span> Animatable |
dino@936 | 1225 | properties</h2> |
dbaron@4128 | 1226 | <!-- |
dbaron@4128 | 1227 | As resolved in |
dbaron@4128 | 1228 | http://lists.w3.org/Archives/Public/www-style/2011Sep/0497.html |
dbaron@4128 | 1229 | --> |
dbaron@4128 | 1230 | |
dbaron@4128 | 1231 | <p>For properties that exist at the time this specification was developed, |
dbaron@4128 | 1232 | this specification defines whether and how they are animated. However, |
dbaron@4128 | 1233 | future CSS specifications may define additional properties, additional |
dbaron@4128 | 1234 | values for existing properties, or additional animation behavior of |
dbaron@4128 | 1235 | existing values. In order to describe new animation behaviors and to have |
dbaron@4128 | 1236 | the definition of animation behavior in a more appropriate location, |
dbaron@4128 | 1237 | future CSS specifications should include an "Animatable:" line in the |
dbaron@4128 | 1238 | summary of the property's definition (in addition to the other lines |
dbaron@4128 | 1239 | described in <a href="#CSS21" rel=biblioentry>[CSS21]<!--{{CSS21}}--></a>, |
dbaron@4128 | 1240 | <a href="http://www.w3.org/TR/CSS21/about.html#property-defs">section |
dbaron@4128 | 1241 | 1.4.2</a>). This line should say "no" to indicate that a property cannot |
dbaron@4128 | 1242 | be animated or should reference an animation behavior (which may be one of |
dbaron@4128 | 1243 | the behaviors in the <a href="#animation-of-property-types-">Animation of |
dbaron@4128 | 1244 | property types</a> section above, or may be a new behavior) to define how |
dbaron@4128 | 1245 | the property animates. Such definitions override those given in this |
dbaron@4128 | 1246 | specification. |
dino@936 | 1247 | |
dino@1669 | 1248 | <h3 id=properties-from-css-><span class=secno>7.1. </span> Properties from |
dino@936 | 1249 | CSS</h3> |
dino@936 | 1250 | |
simon@4394 | 1251 | <table class=animatable-properties> |
dino@936 | 1252 | <tbody> |
dino@936 | 1253 | <tr> |
dino@936 | 1254 | <th>Property Name |
dino@936 | 1255 | |
dino@936 | 1256 | <th>Type |
dino@936 | 1257 | |
dino@936 | 1258 | <tr> |
dino@936 | 1259 | <td>background-color |
dino@936 | 1260 | |
dino@936 | 1261 | <td>color |
dino@936 | 1262 | |
dino@936 | 1263 | <tr> |
dino@936 | 1264 | <td>background-position |
dino@936 | 1265 | |
dino@936 | 1266 | <td>percentage, length |
dino@936 | 1267 | |
dino@936 | 1268 | <tr> |
dino@936 | 1269 | <td>border-bottom-color |
dino@936 | 1270 | |
dino@936 | 1271 | <td>color |
dino@936 | 1272 | |
dino@936 | 1273 | <tr> |
dino@936 | 1274 | <td>border-bottom-width |
dino@936 | 1275 | |
dino@936 | 1276 | <td>length |
dino@936 | 1277 | |
dino@936 | 1278 | <tr> |
dino@936 | 1279 | <td>border-left-color |
dino@936 | 1280 | |
dino@936 | 1281 | <td>color |
dino@936 | 1282 | |
dino@936 | 1283 | <tr> |
dino@936 | 1284 | <td>border-left-width |
dino@936 | 1285 | |
dino@936 | 1286 | <td>length |
dino@936 | 1287 | |
dino@936 | 1288 | <tr> |
dino@936 | 1289 | <td>border-right-color |
dino@936 | 1290 | |
dino@936 | 1291 | <td>color |
dino@936 | 1292 | |
dino@936 | 1293 | <tr> |
dino@936 | 1294 | <td>border-right-width |
dino@936 | 1295 | |
dino@936 | 1296 | <td>length |
dino@936 | 1297 | |
dino@936 | 1298 | <tr> |
dino@936 | 1299 | <td>border-spacing |
dino@936 | 1300 | |
dino@936 | 1301 | <td>length |
dino@936 | 1302 | |
dino@936 | 1303 | <tr> |
dino@936 | 1304 | <td>border-top-color |
dino@936 | 1305 | |
dino@936 | 1306 | <td>color |
dino@936 | 1307 | |
dino@936 | 1308 | <tr> |
dino@936 | 1309 | <td>border-top-width |
dino@936 | 1310 | |
dino@936 | 1311 | <td>length |
dino@936 | 1312 | |
dino@936 | 1313 | <tr> |
dino@936 | 1314 | <td>bottom |
dino@936 | 1315 | |
dino@936 | 1316 | <td>length, percentage |
dino@936 | 1317 | |
dino@936 | 1318 | <tr> |
simon@1766 | 1319 | <td>clip |
simon@1766 | 1320 | |
simon@1766 | 1321 | <td>rectangle |
simon@1766 | 1322 | |
simon@1766 | 1323 | <tr> |
dino@936 | 1324 | <td>color |
dino@936 | 1325 | |
dino@936 | 1326 | <td>color |
dino@936 | 1327 | |
dino@936 | 1328 | <tr> |
dbaron@5256 | 1329 | <td>crop <span class=issue>css3-content will likely advance slower than |
dbaron@5256 | 1330 | this specification, in which case this definition should move |
dbaron@5256 | 1331 | there</span> |
dino@936 | 1332 | |
dino@936 | 1333 | <td>rectangle |
dino@936 | 1334 | |
dino@936 | 1335 | <tr> |
dino@936 | 1336 | <td>font-size |
dino@936 | 1337 | |
dino@936 | 1338 | <td>length, percentage |
dino@936 | 1339 | |
dino@936 | 1340 | <tr> |
dino@936 | 1341 | <td>font-weight |
dino@936 | 1342 | |
dbaron@5257 | 1343 | <td>font weight |
dino@936 | 1344 | |
dino@936 | 1345 | <tr> |
dino@936 | 1346 | <td>height |
dino@936 | 1347 | |
dino@936 | 1348 | <td>length, percentage |
dino@936 | 1349 | |
dino@936 | 1350 | <tr> |
dino@936 | 1351 | <td>left |
dino@936 | 1352 | |
dino@936 | 1353 | <td>length, percentage |
dino@936 | 1354 | |
dino@936 | 1355 | <tr> |
dino@936 | 1356 | <td>letter-spacing |
dino@936 | 1357 | |
dino@936 | 1358 | <td>length |
dino@936 | 1359 | |
dino@936 | 1360 | <tr> |
dino@936 | 1361 | <td>line-height |
dino@936 | 1362 | |
dino@936 | 1363 | <td>number, length, percentage |
dino@936 | 1364 | |
dino@936 | 1365 | <tr> |
dino@936 | 1366 | <td>margin-bottom |
dino@936 | 1367 | |
dino@936 | 1368 | <td>length |
dino@936 | 1369 | |
dino@936 | 1370 | <tr> |
dino@936 | 1371 | <td>margin-left |
dino@936 | 1372 | |
dino@936 | 1373 | <td>length |
dino@936 | 1374 | |
dino@936 | 1375 | <tr> |
dino@936 | 1376 | <td>margin-right |
dino@936 | 1377 | |
dino@936 | 1378 | <td>length |
dino@936 | 1379 | |
dino@936 | 1380 | <tr> |
dino@936 | 1381 | <td>margin-top |
dino@936 | 1382 | |
dino@936 | 1383 | <td>length |
dino@936 | 1384 | |
dino@936 | 1385 | <tr> |
dino@936 | 1386 | <td>max-height |
dino@936 | 1387 | |
dino@936 | 1388 | <td>length, percentage |
dino@936 | 1389 | |
dino@936 | 1390 | <tr> |
dino@936 | 1391 | <td>max-width |
dino@936 | 1392 | |
dino@936 | 1393 | <td>length, percentage |
dino@936 | 1394 | |
dino@936 | 1395 | <tr> |
dino@936 | 1396 | <td>min-height |
dino@936 | 1397 | |
dino@936 | 1398 | <td>length, percentage |
dino@936 | 1399 | |
dino@936 | 1400 | <tr> |
dino@936 | 1401 | <td>min-width |
dino@936 | 1402 | |
dino@936 | 1403 | <td>length, percentage |
dino@936 | 1404 | |
dino@936 | 1405 | <tr> |
dino@936 | 1406 | <td>opacity |
dino@936 | 1407 | |
dino@936 | 1408 | <td>number |
dino@936 | 1409 | |
dino@936 | 1410 | <tr> |
dino@936 | 1411 | <td>outline-color |
dino@936 | 1412 | |
dino@936 | 1413 | <td>color |
dino@936 | 1414 | |
dino@936 | 1415 | <tr> |
dino@936 | 1416 | <td>outline-offset |
dino@936 | 1417 | |
dino@936 | 1418 | <td>integer |
dino@936 | 1419 | |
dino@936 | 1420 | <tr> |
dino@936 | 1421 | <td>outline-width |
dino@936 | 1422 | |
dino@936 | 1423 | <td>length |
dino@936 | 1424 | |
dino@936 | 1425 | <tr> |
dino@936 | 1426 | <td>padding-bottom |
dino@936 | 1427 | |
dino@936 | 1428 | <td>length |
dino@936 | 1429 | |
dino@936 | 1430 | <tr> |
dino@936 | 1431 | <td>padding-left |
dino@936 | 1432 | |
dino@936 | 1433 | <td>length |
dino@936 | 1434 | |
dino@936 | 1435 | <tr> |
dino@936 | 1436 | <td>padding-right |
dino@936 | 1437 | |
dino@936 | 1438 | <td>length |
dino@936 | 1439 | |
dino@936 | 1440 | <tr> |
dino@936 | 1441 | <td>padding-top |
dino@936 | 1442 | |
dino@936 | 1443 | <td>length |
dino@936 | 1444 | |
dino@936 | 1445 | <tr> |
dino@936 | 1446 | <td>right |
dino@936 | 1447 | |
dino@936 | 1448 | <td>length, percentage |
dino@936 | 1449 | |
dino@936 | 1450 | <tr> |
dino@936 | 1451 | <td>text-indent |
dino@936 | 1452 | |
dino@936 | 1453 | <td>length, percentage |
dino@936 | 1454 | |
dino@936 | 1455 | <tr> |
dino@936 | 1456 | <td>text-shadow |
dino@936 | 1457 | |
dino@936 | 1458 | <td>shadow |
dino@936 | 1459 | |
dino@936 | 1460 | <tr> |
dino@936 | 1461 | <td>top |
dino@936 | 1462 | |
dino@936 | 1463 | <td>length, percentage |
dino@936 | 1464 | |
dino@936 | 1465 | <tr> |
dino@936 | 1466 | <td>vertical-align |
dino@936 | 1467 | |
dbaron@5245 | 1468 | <td>length, percentage |
dino@936 | 1469 | |
dino@936 | 1470 | <tr> |
dino@936 | 1471 | <td>visibility |
dino@936 | 1472 | |
dino@936 | 1473 | <td>visibility |
dino@936 | 1474 | |
dino@936 | 1475 | <tr> |
dino@936 | 1476 | <td>width |
dino@936 | 1477 | |
dino@936 | 1478 | <td>length, percentage |
dino@936 | 1479 | |
dino@936 | 1480 | <tr> |
dino@936 | 1481 | <td>word-spacing |
dino@936 | 1482 | |
dino@936 | 1483 | <td>length, percentage |
dino@936 | 1484 | |
dino@936 | 1485 | <tr> |
dino@936 | 1486 | <td>z-index |
dino@936 | 1487 | |
dino@936 | 1488 | <td>integer |
dino@936 | 1489 | </table> |
dino@936 | 1490 | |
dbaron@2963 | 1491 | <p class=issue> This list omits the following properties that Gecko can |
dbaron@2963 | 1492 | animate, and which likely should be included: background-size, |
dbaron@2963 | 1493 | border-*-radius, box-shadow, column-count, column-gap, column-rule-color, |
dbaron@2963 | 1494 | column-rule-width, column-width, font-size-adjust, font-stretch, |
dbaron@4124 | 1495 | marker-offset, text-decoration-color, transform, transform-origin. |
dbaron@2963 | 1496 | |
dino@1669 | 1497 | <h3 id=properties-from-svg-><span class=secno>7.2. </span> Properties from |
dino@936 | 1498 | SVG</h3> |
dino@936 | 1499 | |
dino@1469 | 1500 | <p> All properties defined as animatable in the SVG specification, provided |
dino@1469 | 1501 | they are one of the property types listed above.</p> |
dino@1469 | 1502 | <!-- <table> |
dino@1469 | 1503 | <tr> |
dino@1469 | 1504 | <th>Property Name</th><th>Type</th> |
dino@1469 | 1505 | </tr> |
dino@1469 | 1506 | <tr> |
dino@1469 | 1507 | <td>stop-color</td><td>color</td> |
dino@1469 | 1508 | </tr> |
dino@1469 | 1509 | <tr> |
dino@1469 | 1510 | <td>stop-opacity</td><td>float</td> |
dino@1469 | 1511 | </tr> |
dino@1469 | 1512 | <tr> |
dino@1469 | 1513 | <td>fill</td><td>paint server</td> |
dino@1469 | 1514 | </tr> |
dino@1469 | 1515 | <tr> |
dino@1469 | 1516 | <td>fill-opacity</td><td>float</td> |
dino@1469 | 1517 | </tr> |
dino@1469 | 1518 | <tr> |
dino@1469 | 1519 | <td>stroke</td><td>paint server</td> |
dino@1469 | 1520 | </tr> |
dino@1469 | 1521 | <tr> |
dino@1469 | 1522 | <td>stroke-dasharray</td><td>list of numbers</td> |
dino@1469 | 1523 | </tr> |
dino@1469 | 1524 | <tr> |
dino@1469 | 1525 | <td>stroke-dashoffset</td><td>number</td> |
dino@1469 | 1526 | </tr> |
dino@1469 | 1527 | <tr> |
dino@1469 | 1528 | <td>stroke-miterlimit</td><td>number</td> |
dino@1469 | 1529 | </tr> |
dino@1469 | 1530 | <tr> |
dino@1469 | 1531 | <td>stroke-opacity</td><td>float</td> |
dino@1469 | 1532 | </tr> |
dino@1469 | 1533 | <tr> |
dino@1469 | 1534 | <td>stroke-width</td><td>float</td> |
dino@1469 | 1535 | </tr> |
dino@1469 | 1536 | <tr> |
dino@1469 | 1537 | <td>viewport-fill</td><td>color</td> |
dino@1469 | 1538 | </tr> |
dino@1469 | 1539 | <tr> |
dino@1469 | 1540 | <td>viewport-fill-opacity</td><td>color</td> |
dino@1469 | 1541 | </tr> |
dino@1469 | 1542 | </table> --> |
dino@936 | 1543 | |
dino@1669 | 1544 | <h2 id=references><span class=secno>8. </span>References</h2> |
dino@936 | 1545 | |
dino@936 | 1546 | <h3 class=no-num id=normative-references>Normative references</h3> |
dino@936 | 1547 | <!--begin-normative--> |
dino@936 | 1548 | <!-- Sorted by label --> |
dino@936 | 1549 | |
dino@936 | 1550 | <dl class=bibliography> |
dino@936 | 1551 | <dt style="display: none"><!-- keeps the doc valid if the DL is empty --> |
dino@936 | 1552 | <!----> |
bert@1105 | 1553 | |
dbaron@5220 | 1554 | <dt id=CSS3-TRANSFORMS>[CSS3-TRANSFORMS] |
bert@1105 | 1555 | |
dbaron@5219 | 1556 | <dd>Simon Fraser; et al. <a |
dbaron@5220 | 1557 | href="http://www.w3.org/TR/2012/WD-css3-transforms-20120228/"><cite>CSS |
dbaron@5220 | 1558 | Transforms.</cite></a> 28 February 2012. W3C Working Draft. (Work in |
dbaron@5219 | 1559 | progress.) URL: <a |
dbaron@5220 | 1560 | href="http://www.w3.org/TR/2012/WD-css3-transforms-20120228/">http://www.w3.org/TR/2012/WD-css3-transforms-20120228/</a> |
bert@1105 | 1561 | </dd> |
bert@1105 | 1562 | <!----> |
dino@936 | 1563 | </dl> |
dino@936 | 1564 | <!--end-normative--> |
dino@936 | 1565 | |
dino@936 | 1566 | <h3 class=no-num id=other-references>Other references</h3> |
dino@936 | 1567 | <!--begin-informative--> |
dino@936 | 1568 | <!-- Sorted by label --> |
dino@936 | 1569 | |
dino@936 | 1570 | <dl class=bibliography> |
dino@936 | 1571 | <dt style="display: none"><!-- keeps the doc valid if the DL is empty --> |
dino@936 | 1572 | <!----> |
dbaron@2964 | 1573 | |
dbaron@4128 | 1574 | <dt id=CSS21>[CSS21] |
dbaron@4128 | 1575 | |
dbaron@4128 | 1576 | <dd>Bert Bos; et al. <a |
dbaron@4128 | 1577 | href="http://www.w3.org/TR/2011/REC-CSS2-20110607"><cite>Cascading Style |
dbaron@4128 | 1578 | Sheets Level 2 Revision 1 (CSS 2.1) Specification.</cite></a> 7 June |
dbaron@4128 | 1579 | 2011. W3C Recommendation. URL: <a |
dbaron@4128 | 1580 | href="http://www.w3.org/TR/2011/REC-CSS2-20110607">http://www.w3.org/TR/2011/REC-CSS2-20110607</a> |
dbaron@4128 | 1581 | </dd> |
dbaron@4128 | 1582 | <!----> |
dbaron@4128 | 1583 | |
dbaron@2964 | 1584 | <dt id=CSS3-IMAGES>[CSS3-IMAGES] |
dbaron@2964 | 1585 | |
dbaron@2964 | 1586 | <dd>Elika J. Etemad; Tab Atkins Jr. <a |
dbaron@5219 | 1587 | href="http://www.w3.org/TR/2012/WD-css3-images-20120112/"><cite>CSS Image |
dbaron@5219 | 1588 | Values and Replaced Content Module Level 3.</cite></a> 12 January 2012. |
dbaron@2964 | 1589 | W3C Working Draft. (Work in progress.) URL: <a |
dbaron@5219 | 1590 | href="http://www.w3.org/TR/2012/WD-css3-images-20120112/">http://www.w3.org/TR/2012/WD-css3-images-20120112/</a> |
dbaron@2964 | 1591 | </dd> |
dbaron@2964 | 1592 | <!----> |
dino@936 | 1593 | </dl> |
dino@936 | 1594 | <!--end-informative--> |
dino@936 | 1595 | |
dino@936 | 1596 | <h2 class=no-num id=property-index>Property index</h2> |
dino@936 | 1597 | <!--begin-properties--> |
dino@936 | 1598 | |
dino@936 | 1599 | <table class=proptable> |
dino@936 | 1600 | <thead> |
dino@936 | 1601 | <tr> |
dino@936 | 1602 | <th>Property |
dino@936 | 1603 | |
dino@936 | 1604 | <th>Values |
dino@936 | 1605 | |
dino@936 | 1606 | <th>Initial |
dino@936 | 1607 | |
dino@936 | 1608 | <th>Applies to |
dino@936 | 1609 | |
dino@936 | 1610 | <th>Inh. |
dino@936 | 1611 | |
dino@936 | 1612 | <th>Percentages |
dino@936 | 1613 | |
dino@936 | 1614 | <th>Media |
dino@936 | 1615 | |
dino@936 | 1616 | <tbody> |
dbaron@2963 | 1617 | <tr> |
dbaron@4124 | 1618 | <th><a class=property href="#transition">transition</a> |
dino@936 | 1619 | |
dino@1469 | 1620 | <td>[<‘transition-property’> || |
dino@1469 | 1621 | <‘transition-duration’> || |
dino@1469 | 1622 | <‘transition-timing-function’> || |
dino@1469 | 1623 | <‘transition-delay’> [, |
dino@1469 | 1624 | [<‘transition-property’> || |
dino@1469 | 1625 | <‘transition-duration’> || |
dino@1469 | 1626 | <‘transition-timing-function’> || |
dino@1469 | 1627 | <‘transition-delay’>]]* |
dino@936 | 1628 | |
dino@936 | 1629 | <td>see individual properties |
dino@936 | 1630 | |
dino@1469 | 1631 | <td>all elements, :before and :after pseudo elements |
dino@936 | 1632 | |
dino@936 | 1633 | <td>no |
dino@936 | 1634 | |
dino@936 | 1635 | <td>N/A |
dino@936 | 1636 | |
dino@1469 | 1637 | <td>interactive |
dino@936 | 1638 | |
dbaron@2963 | 1639 | <tr> |
dbaron@4124 | 1640 | <th><a class=property href="#transition-delay">transition-delay</a> |
dino@936 | 1641 | |
dino@936 | 1642 | <td><time> [, <time>]* |
dino@936 | 1643 | |
dino@3189 | 1644 | <td>0s |
dino@936 | 1645 | |
dino@1469 | 1646 | <td>all elements, :before and :after pseudo elements |
dino@936 | 1647 | |
dino@936 | 1648 | <td>no |
dino@936 | 1649 | |
dino@936 | 1650 | <td>N/A |
dino@936 | 1651 | |
dino@1469 | 1652 | <td>interactive |
dino@936 | 1653 | |
dbaron@2963 | 1654 | <tr> |
dbaron@4124 | 1655 | <th><a class=property |
dino@936 | 1656 | href="#transition-duration">transition-duration</a> |
dino@936 | 1657 | |
dino@936 | 1658 | <td><time> [, <time>]* |
dino@936 | 1659 | |
dino@3189 | 1660 | <td>0s |
dino@936 | 1661 | |
dino@1469 | 1662 | <td>all elements, :before and :after pseudo elements |
dino@936 | 1663 | |
dino@936 | 1664 | <td>no |
dino@936 | 1665 | |
dino@936 | 1666 | <td>N/A |
dino@936 | 1667 | |
dino@1469 | 1668 | <td>interactive |
dino@936 | 1669 | |
dbaron@2963 | 1670 | <tr> |
dbaron@4124 | 1671 | <th><a class=property |
dino@936 | 1672 | href="#transition-property">transition-property</a> |
dino@936 | 1673 | |
dbaron@5298 | 1674 | <td>none | [ all | <IDENT> ] [ ‘,’ [ all | |
dbaron@5298 | 1675 | <IDENT> ] ]* |
dino@936 | 1676 | |
dino@936 | 1677 | <td>all |
dino@936 | 1678 | |
dino@1469 | 1679 | <td>all elements, :before and :after pseudo elements |
dino@936 | 1680 | |
dino@936 | 1681 | <td>no |
dino@936 | 1682 | |
dino@936 | 1683 | <td>N/A |
dino@936 | 1684 | |
dino@936 | 1685 | <td>visual |
dino@936 | 1686 | |
dbaron@2963 | 1687 | <tr> |
dbaron@4124 | 1688 | <th><a class=property |
dino@936 | 1689 | href="#transition-timing-function">transition-timing-function</a> |
dino@936 | 1690 | |
dino@1907 | 1691 | <td>ease | linear | ease-in | ease-out | ease-in-out | step-start | |
dino@2615 | 1692 | step-end | steps(<integer>[, start | end ]) | |
dino@936 | 1693 | cubic-bezier(<number>, <number>, <number>, |
dbaron@5298 | 1694 | <number>) [, [ ease | linear | ease-in | ease-out | ease-in-out | |
dino@1907 | 1695 | step-start | step-end | steps(<number>[, start | end ]) | |
dino@936 | 1696 | cubic-bezier(<number>, <number>, <number>, |
dbaron@5298 | 1697 | <number>) ] ]* |
dino@936 | 1698 | |
dino@936 | 1699 | <td>ease |
dino@936 | 1700 | |
dino@1469 | 1701 | <td>all elements, :before and :after pseudo elements |
dino@936 | 1702 | |
dino@936 | 1703 | <td>no |
dino@936 | 1704 | |
dino@936 | 1705 | <td>N/A |
dino@936 | 1706 | |
dino@1469 | 1707 | <td>interactive |
dino@936 | 1708 | </table> |
dino@936 | 1709 | <!--end-properties--> |
dino@936 | 1710 | |
dino@936 | 1711 | <h2 class=no-num id=index>Index</h2> |
dino@936 | 1712 | <!--begin-index--> |
dino@936 | 1713 | |
dino@936 | 1714 | <ul class=indexlist> |
dbaron@5252 | 1715 | <li>combined duration, <a href="#combined-duration" |
dbaron@5252 | 1716 | title="combined duration"><strong>3.</strong></a> |
dbaron@5252 | 1717 | |
dino@936 | 1718 | <li>transition, <a href="#transition" |
dino@1669 | 1719 | title=transition><strong>2.5.</strong></a> |
dino@936 | 1720 | |
dino@936 | 1721 | <li>transition-delay, <a href="#transition-delay" |
dino@1669 | 1722 | title=transition-delay><strong>2.4.</strong></a> |
dino@936 | 1723 | |
dino@936 | 1724 | <li>transition-duration, <a href="#transition-duration" |
dino@1669 | 1725 | title=transition-duration><strong>2.2.</strong></a> |
dino@936 | 1726 | |
dino@936 | 1727 | <li>transition-property, <a href="#transition-property" |
dino@1669 | 1728 | title=transition-property><strong>2.1.</strong></a> |
dino@936 | 1729 | |
dino@936 | 1730 | <li>transition-timing-function, <a href="#transition-timing-function" |
dino@1669 | 1731 | title=transition-timing-function><strong>2.3.</strong></a> |
dino@936 | 1732 | </ul> |
dino@936 | 1733 | <!--end-index--> |
dino@936 | 1734 | </html> |
dino@936 | 1735 | <!-- Keep this comment at the end of the file |
dino@936 | 1736 | Local variables: |
dino@936 | 1737 | mode: sgml |
dino@936 | 1738 | sgml-default-doctype-name:"html" |
dino@936 | 1739 | sgml-minimize-attributes:t |
dino@936 | 1740 | End: |
dino@936 | 1741 | --> |