css3-transitions/Overview.src.html

Wed, 20 Feb 2013 20:10:21 -0800

author
L. David Baron <dbaron@dbaron.org>
date
Wed, 20 Feb 2013 20:10:21 -0800
changeset 7516
05f1ef63bcaf
parent 7471
f8b37ab72b99
child 7810
9d38acef4dfc
permissions
-rw-r--r--

[css3-transitions] Make the behavior of simultaneous changes of 'transition-*' properties and transitionable properties even clearer.

Per http://lists.w3.org/Archives/Public/www-style/2013Feb/0568.html

     1 <!DOCTYPE html PUBLIC '-//W3C//DTD HTML 4.01//EN'
     2   'http://www.w3.org/TR/html4/strict.dtd'>
     4 <html lang="en">
     5 <head>
     6   <title>CSS Transitions</title>
     7   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
     8   <link rel="stylesheet" type="text/css" href="../default.css">
     9   <style type="text/css">
    10     table.animatable-properties {
    11       border-collapse: collapse;
    12     }
    13     table.animatable-properties td {
    14       padding: 0.2em 1em;
    15       border: 1px solid black;
    16     }
    17     div.prod { margin: 1em 2em; }
    18   </style>
    19   <link rel="stylesheet" type="text/css" href="http://www.w3.org/StyleSheets/TR/W3C-[STATUS].css">
    20 </head>
    22 <body>
    24 <div class="head">
    25 <!--logo-->
    27 <h1>CSS Transitions</h1>
    29 <h2 class="no-num no-toc">[LONGSTATUS] [DATE]</h2>
    30 <dl>
    31   <dt>This version:
    32     <dd>
    33     <a href="[VERSION]">[VERSION]</a>
    34   <dt>Latest version:
    35     <dd><a href="http://www.w3.org/TR/css3-transitions/">
    36       [LATEST]</a>
    37   <dt>Editor's draft:
    38     <dd><a href="http://dev.w3.org/csswg/[SHORTNAME]/">http://dev.w3.org/csswg/[SHORTNAME]/</a>
    39     (<a href="https://dvcs.w3.org/hg/csswg/log/tip/[SHORTNAME]/Overview.src.html">change log</a>)
    40   <dt>Previous version:
    41     <dd><a href="http://www.w3.org/TR/2013/WD-css3-transitions-20130212/">http://www.w3.org/TR/2013/WD-css3-transitions-20130212/</a>
    42   <dt id="editors-list">Editors:
    43     <dd><a href="mailto:dino@apple.com">Dean Jackson</a> (<a
    44       href="http://www.apple.com/">Apple Inc</a>)
    45     <dd><a href="mailto:hyatt@apple.com">David Hyatt</a> (<a
    46       href="http://www.apple.com/">Apple Inc</a>)
    47     <dd><a href="mailto:cmarrin@apple.com">Chris Marrin</a> (<a
    48       href="http://www.apple.com/">Apple Inc</a>)
    49     <dd class=vcard><a class=fn href="http://dbaron.org/">L. David Baron</a> (<a
    50       class=org href="http://www.mozilla.org/">Mozilla</a>)
    52   <dt>Issues list:
    53     <dd><a href="https://www.w3.org/Bugs/Public/buglist.cgi?query_format=advanced&amp;product=CSS&amp;component=Transitions&amp;resolution=---&amp;cmdtype=doit">in Bugzilla</a>
    55   <dt>Discussion:</dt>
    56     <dd><a href="http://lists.w3.org/Archives/Public/www-style/">www-style@w3.org</a> with subject line &ldquo;<kbd>[[SHORTNAME]] <var>&hellip; message topic &hellip;</var></kbd>&rdquo;
    58   <dt>Test suite:
    59     <dd>none yet
    60 </dl>
    62 <!--copyright-->
    64 <hr title="Separator for header">
    65 </div>
    67 <h2 class="no-num no-toc" id="abstract">Abstract</h2>
    69 <p>CSS Transitions allows property changes in CSS values to occur smoothly
    70   over a specified duration.
    72 <h2 class="no-num no-toc" id="status">Status of this document</h2>
    73 <!--status-->
    75 <p>
    76   The <a href="ChangeLog">list of changes made to this specification</a> is
    77   available.
    78 </p>
    80 <h2 class="no-num no-toc" id="contents">Table of Contents</h2>
    81 <!--toc-->
    84 <h2 id="introduction">Introduction</h2>
    86       <p><em>This section is not normative.</em>
    87       <p>
    88         This document introduces new CSS features to enable <em>implicit transitions</em>, which describe how CSS properties can be made to change smoothly from one value to another over a given duration.
    89       </p>
    91 <h2 id="transitions"><a id="transitions-">Transitions</a></h2>
    92       <p>
    93         Normally when the value of a CSS property changes, the rendered result is instantly updated, with the affected elements immediately changing from the old property value to the new property value. This section describes a way to specify transitions using new CSS properties. These properties are used to animate smoothly from the old state to the new state over time.
    94       </p>
    95       <p>
    96         For example, suppose that transitions of one second have been defined on the 'left' and
    97         'background-color' properties. The following diagram illustrates the effect of updating those properties on an element, in this case moving it to the right and changing the background from red to blue. This assumes other transition parameters still have their default values.
    98       </p>
    99       <div class="figure">
   100         <img src="transition1.png" alt="">
   101       </div>
   102       <p class="caption">
   103         Transitions of 'left' and 'background-color'
   104       </p>
   105       <p>
   106         Transitions are a presentational effect. The computed value of a property transitions over time from the old value to the new value. Therefore if a script queries the computed style of a property as it is transitioning, it will see an intermediate value that represents the current animated value of the property.
   107       </p>
   108       <p>
   109         Only animatable CSS properties can be transitioned. See the table at the end of this document for a list 
   110         of properties that are animatable.
   111       </p>
   112       <p>
   113         The transition for a property is defined using a number of new properties. For example:
   114       </p>
   115       <div class="example">
   116         <p style="display:none">
   117           Example(s):
   118         </p>
   119         <pre>
   120   div {
   121     transition-property: opacity;
   122     transition-duration: 2s;
   123   }
   124   </pre>The above example defines a transition on the 'opacity' property that, when a new value is assigned to it, will cause a smooth change between the old value and the new value over a period of two seconds.
   125       </div>
   126       <p>
   127         Each of the transition properties accepts a comma-separated list, allowing multiple transitions to be defined, each acting on a different property. In this case, the individual transitions take their parameters from the same index in all the lists. For example:
   128       </p>
   129       <div class="example">
   130         <p style="display:none">
   131           Example(s):
   132         </p>
   133         <pre>
   134   div {
   135     transition-property: opacity, left;
   136     transition-duration: 2s, 4s;
   137   }
   139   </pre>This will cause the 'opacity' property to transition over a period of two seconds and the left property to transition over a period of four seconds.
   140       </div>
   142       <p id="list-matching">
   143         In the case where the lists of values in transition properties
   144         do not have the same length, the length of the
   145         'transition-property' list determines the number of items in
   146         each list examined when starting transitions.  The lists are
   147         matched up from the first value: excess values at the end are
   148         not used.  If one of the other properties doesn't have enough
   149         comma-separated values to match the number of values of
   150         'transition-property', the UA must calculate its used value by
   151         repeating the list of values until there are enough.  This
   152         truncation or repetition does not affect the computed value.
   153         <span class="note">
   154           Note: This is analogous to the behavior of the 'background-*'
   155           properties, with 'background-image' analogous to
   156           'transition-property'.
   157         </span>
   158       </p>
   160       <div class="example">
   161         <p style="display:none">
   162           Example(s):
   163         </p>
   164       <pre>
   165       div {
   166         transition-property: opacity, left, top, width;
   167         transition-duration: 2s, 1s;
   168       }
   169       </pre>The above example defines a transition on the 'opacity' property of 2 seconds duration, a
   170       transition on the 'left' property of 1
   171       second duration, a transition on the 'top' property of 2 seconds duration and a
   172       transition on the 'width' property of 1
   173       second duration.
   175       </div>
   177       <p>
   178         While authors can use transitions to create dynamically changing content,
   179         dynamically changing content can lead to seizures in some users.
   180         For information on how to avoid content that can lead to seizures, see
   181         <a href="http://www.w3.org/TR/WCAG20/#seizure">Guideline 2.3:
   182         Seizures:
   183         Do not design content in a way that is known to cause seizures</a>
   184         ([[WCAG20]]).
   185       </p>
   187       <!-- ======================================================================================================= -->
   188       <h3 id="transition-property-property"><a id="the-transition-property-property-">
   189         The 'transition-property' Property
   190       </a></h3>
   191       <p>
   192         The 'transition-property' property specifies the name of the CSS property to which the transition is applied.
   193       </p>
   194       <table class="propdef">
   195         <tbody>
   196           <tr>
   197             <td>
   198               <em>Name:</em>
   199             </td>
   200             <td>
   201               <dfn id="transition-property">transition-property</dfn>
   202             </td>
   203           </tr>
   204           <tr>
   205             <td>
   206               <em>Value:</em>
   207             </td>
   208             <td>
   209               none | <span>&lt;single-transition-property&gt;</span> [ ',' <span>&lt;single-transition-property&gt;</span> ]*
   210             </td>
   211           </tr>
   212           <tr>
   213             <td>
   214               <em>Initial:</em>
   215             </td>
   216             <td>
   217               all
   218             </td>
   219           </tr>
   220           <tr>
   221             <td>
   222               <em>Applies to:</em>
   223             </td>
   224             <td>
   225               all elements, :before and :after pseudo elements
   226             </td>
   227           </tr>
   228           <tr>
   229             <td>
   230               <em>Inherited:</em>
   231             </td>
   232             <td>
   233               no
   234             </td>
   235           </tr>
   236           <tr>
   237             <td>
   238               <em>Animatable:</em>
   239             </td>
   240             <td>
   241               no
   242             </td>
   243           </tr>
   244           <tr>
   245             <td>
   246               <em>Percentages:</em>
   247             </td>
   248             <td>
   249               N/A
   250             </td>
   251           </tr>
   252           <tr>
   253             <td>
   254               <em>Media:</em>
   255             </td>
   256             <td>
   257               visual
   258             </td>
   259           </tr>
   260           <tr>
   261             <td>
   262               <em>Computed value:</em>
   263             </td>
   264             <td>
   265               Same as specified value.
   266             </td>
   267           </tr>
   268           <tr>
   269             <td>
   270               <em>Canonical order:</em>
   271             </td>
   272             <td>
   273               <abbr title="follows order of property value definition">per grammar</abbr>
   274             </td>
   275           </tr>
   276         </tbody>
   277       </table>
   279       <div class="prod">
   280         <dfn id="single-transition-property">&lt;single-transition-property&gt;</dfn> = all | &lt;IDENT&gt;
   281       </div>
   283       <p>
   284         A value of ''none'' means that no property will transition.
   285         Otherwise, a list of properties to be transitioned, or the
   286         keyword ''all'' which indicates that all properties are to be
   287         transitioned, is given.
   288       </p>
   290       <p>
   291         If one of the identifiers listed is not a recognized property
   292         name or is not an animatable property, the implementation must
   293         still start transitions on the animatable properties in the
   294         list using the duration, delay, and timing function at their
   295         respective indices in the lists for 'transition-duration',
   296         'transition-delay', and 'transition-timing-function'.  In other
   297         words, unrecognized or non-animatable properties must be kept in
   298         the list to preserve the matching of indices.
   299       </p>
   301       <p>
   302         The keywords ''none'', ''inherit'', and ''initial'' are not
   303         permitted as items within a list of more that one identifier;
   304         any list that uses them is syntactically invalid.
   305         In other words, the &lt;IDENT&gt; production in
   306         <span>&lt;single-transition-property&gt;</span> matches any
   307         identifier other than these three keywords.
   308       </p>
   310       <p>
   311         For the keyword ''all'', or if one of the identifiers listed is a
   312         shorthand property, implementations must start transitions for
   313         any of its longhand sub-properties that are animatable (or, for
   314         ''all'', all animatable properties), using the duration, delay,
   315         and timing function at the index corresponding to the shorthand.
   316       </p>
   317       <p>
   318         If a property is specified multiple times in the value of
   319         'transition-property' (either on its own, via a shorthand that
   320         contains it, or via the ''all'' value), then the transition that
   321         starts uses the duration, delay, and timing function at the
   322         index corresponding to the <em>last</em> item in the value of
   323         'transition-property' that calls for animating that property.
   324       </p>
   325       <p class="note">
   326         Note:  The ''all'' value and 'all' shorthand
   327         property work in similar ways, so the
   328         ''all'' value is just like a shorthand that
   329         covers all properties.
   330       </p>
   332       <!-- ======================================================================================================= -->
   333       <h3 id="transition-duration-property"><a id="the-transition-duration-property-">
   334         The 'transition-duration' Property
   335       </a></h3>
   336       <p>
   337         The 'transition-duration' property defines the length of time that a transition takes.
   338       </p>
   339       <table class="propdef">
   340         <tbody>
   341           <tr>
   342             <td>
   343               <em>Name:</em>
   344             </td>
   345             <td>
   346               <dfn id="transition-duration">transition-duration</dfn>
   347             </td>
   348           </tr>
   349           <tr>
   350             <td>
   351               <em>Value:</em>
   352             </td>
   353             <td>
   354               <span>&lt;time&gt;</span> [, <span>&lt;time&gt;</span>]*
   355             </td>
   356           </tr>
   357           <tr>
   358             <td>
   359               <em>Initial:</em>
   360             </td>
   361             <td>
   362               0s
   363             </td>
   364           </tr>
   365           <tr>
   366             <td>
   367               <em>Applies to:</em>
   368             </td>
   369             <td>
   370               all elements, :before and :after pseudo elements
   371             </td>
   372           </tr>
   373           <tr>
   374             <td>
   375               <em>Inherited:</em>
   376             </td>
   377             <td>
   378               no
   379             </td>
   380           </tr>
   381           <tr>
   382             <td>
   383               <em>Animatable:</em>
   384             </td>
   385             <td>
   386               no
   387             </td>
   388           </tr>
   389           <tr>
   390             <td>
   391               <em>Percentages:</em>
   392             </td>
   393             <td>
   394               N/A
   395             </td>
   396           </tr>
   397           <tr>
   398             <td>
   399               <em>Media:</em>
   400             </td>
   401             <td>
   402               interactive
   403             </td>
   404           </tr>
   405           <tr>
   406             <td>
   407               <em>Computed value:</em>
   408             </td>
   409             <td>
   410               Same as specified value.
   411             </td>
   412           </tr>
   413           <tr>
   414             <td>
   415               <em>Canonical order:</em>
   416             </td>
   417             <td>
   418               <abbr title="follows order of property value definition">per grammar</abbr>
   419             </td>
   420           </tr>
   421         </tbody>
   422       </table>
   423       <p>
   424         This property specifies how long the transition from the old value to the new value should take. By default the value is ''0s'', meaning that the transition is immediate (i.e. there will be no animation). A negative value for 'transition-duration' renders the declaration invalid.
   425       </p>
   427       <!-- =======================================================================================================   
   428         -->
   430       <h3 id="transition-timing-function-property"><a id="transition-timing-function_tag">
   431         The 'transition-timing-function' Property
   432       </a></h3>
   433       <p>
   434         The 'transition-timing-function' property
   435         describes how the intermediate values used during a transition will be
   436         calculated. It allows for a transition to change speed over its
   437         duration. These effects are commonly called <em>easing</em> functions.
   438         In either case, a mathematical function that provides a smooth curve is
   439         used.
   440       </p>
   441       <p>
   442         Timing functions are either defined as a stepping function or 
   443         a <a
   444         href="http://en.wikipedia.org/wiki/B%C3%A9zier_curve#Cubic_B.C3.A9zier_curves">cubic
   445         B&eacute;zier curve</a>. 
   446         The timing function takes as its input
   447         the current elapsed percentage of the transition duration
   448         and outputs the percentage of the way the transition is
   449         from its start value to its end value.
   450         How this output is used is defined by
   451         the <a href="#animatable-types">interpolation rules</a>
   452         for the value type.
   453       </p>
   454       <p>
   455         A <a href="http://en.wikipedia.org/wiki/Step_function">stepping</a>
   456         function is defined by a number that divides the domain of operation
   457         into equally sized intervals. Each subsequent interval is a equal step
   458         closer to the goal state. The function also specifies whether the
   459         change in output percentage happens at the start or end of the
   460         interval (in other words, if 0% on the input percentage is the point
   461         of initial change).
   462       </p>
   463       <div class="figure">
   464         <img src="step.png" alt="The step timing function splits
   465           the function domain into a number of disjoint straight line
   466           segments. steps(1, start) is a function whose
   467           output value is 1 for all input values. steps(1, end) is a function whose
   468           output value is 0 for all input values less than 1, and output
   469           is 1 for the input value of 1. steps(3, start) is a function that
   470           divides the input domain into three segments, each 1/3 in length,
   471           and 1/3 above the previous segment, with the first segment starting
   472           at 1/3. steps(3, end) is a function that
   473           divides the input domain into three segments, each 1/3 in length,
   474           and 1/3 above the previous segment, with the first segment starting
   475           at 0.">
   476       </div>
   477       <p class="caption">
   478         Step timing functions
   479       </p>
   480       <p>
   481         A <a
   482         href="http://en.wikipedia.org/wiki/B%C3%A9zier_curve#Cubic_B.C3.A9zier_curves">cubic
   483         B&eacute;zier curve</a> is defined by four control points, P<sub>0</sub>
   484         through P<sub>3</sub> (see Figure 1). P<sub>0</sub> and P<sub>3</sub>
   485         are always set to (0,0) and (1,1). The 'transition-timing-function' property is used
   486         to specify the values for points P<sub>1</sub> and P<sub>2</sub>. These
   487         can be set to preset values using the keywords listed below, or can be
   488         set to specific values using the ''cubic-bezier'' function.
   489         In the ''cubic-bezier'' function, P<sub>1</sub> and
   490         P<sub>2</sub> are each specified by both an X and Y value.
   491       </p>
   492       <div class="figure">
   493         <img src="TimingFunction.png" alt="The B&eacute;zier timing function is a
   494           smooth curve from point P0 = (0,0) to point P3 = (1,1). The
   495           length and orientation of the line segment P0-P1 determines
   496           the tangent and the curvature of the curve at P0 and the
   497           line segment P2-P3 does the same at P3.">
   498       </div>
   499       <p class="caption">
   500         B&eacute;zier Timing Function Control Points
   501       </p>
   502       <table class="propdef">
   503         <tbody>
   504           <tr>
   505             <td>
   506               <em>Name:</em>
   507             </td>
   508             <td>
   509               <dfn id="transition-timing-function">transition-timing-function</dfn>
   510             </td>
   511           </tr>
   512           <tr>
   513             <td>
   514               <em>Value:</em>
   515             </td>
   516             <td>
   517               <span>&lt;single-transition-timing-function&gt;</span> [ ',' <span>&lt;single-transition-timing-function&gt;</span> ]*
   518             </td>
   519           </tr>
   520           <tr>
   521             <td>
   522               <em>Initial:</em>
   523             </td>
   524             <td>
   525               ease
   526             </td>
   527           </tr>
   528           <tr>
   529             <td>
   530               <em>Applies to:</em>
   531             </td>
   532             <td>
   533               all elements, :before and :after pseudo elements
   534             </td>
   535           </tr>
   536           <tr>
   537             <td>
   538               <em>Inherited:</em>
   539             </td>
   540             <td>
   541               no
   542             </td>
   543           </tr>
   544           <tr>
   545             <td>
   546               <em>Animatable:</em>
   547             </td>
   548             <td>
   549               no
   550             </td>
   551           </tr>
   552           <tr>
   553             <td>
   554               <em>Percentages:</em>
   555             </td>
   556             <td>
   557               N/A
   558             </td>
   559           </tr>
   560           <tr>
   561             <td>
   562               <em>Media:</em>
   563             </td>
   564             <td>
   565               interactive
   566             </td>
   567           </tr>
   568           <tr>
   569             <td>
   570               <em>Computed value:</em>
   571             </td>
   572             <td>
   573               Same as specified value.
   574             </td>
   575           </tr>
   576           <tr>
   577             <td>
   578               <em>Canonical order:</em>
   579             </td>
   580             <td>
   581               <abbr title="follows order of property value definition">per grammar</abbr>
   582             </td>
   583           </tr>
   584         </tbody>
   585       </table>
   586       <div class="prod">
   587         <dfn id="single-transition-timing-function">&lt;single-transition-timing-function&gt;</dfn> = ease | linear | ease-in | ease-out | ease-in-out | step-start | step-end | steps(&lt;integer&gt;[, [ start | end ] ]?) | cubic-bezier(&lt;number&gt;, &lt;number&gt;, &lt;number&gt;, &lt;number&gt;)
   588       </div>
   589       <p>
   590         The timing functions have the following definitions.
   591       </p>
   592       <dl>
   593         <dt>
   594           ease
   595         </dt>
   596         <dd>
   597           The ease function is equivalent to cubic-bezier(0.25, 0.1, 0.25, 1).
   598         </dd>
   599         <dt>
   600           linear
   601         </dt>
   602         <dd>
   603           The linear function is equivalent to cubic-bezier(0, 0, 1, 1).
   604         </dd>
   605         <dt>
   606           ease-in
   607         </dt>
   608         <dd>
   609           The ease-in function is equivalent to cubic-bezier(0.42, 0, 1, 1).
   610         </dd>
   611         <dt>
   612           ease-out
   613         </dt>
   614         <dd>
   615           The ease-out function is equivalent to cubic-bezier(0, 0, 0.58, 1).
   616         </dd>
   617         <dt>
   618           ease-in-out
   619         </dt>
   620         <dd>
   621           The ease-in-out function is equivalent to cubic-bezier(0.42, 0, 0.58, 1)
   622         </dd>
   623         <dt>
   624           step-start
   625         </dt>
   626         <dd>
   627           The step-start function is equivalent to steps(1, start).
   628         </dd>
   629         <dt>
   630           step-end
   631         </dt>
   632         <dd>
   633           The step-end function is equivalent to steps(1, end).
   634         </dd>
   635         <dt>
   636           steps(&lt;integer&gt;[, [ start | end ] ]?)
   637         </dt>
   638         <dd>
   639           Specifies a stepping function, described above, taking two
   640           parameters. The first parameter specifies the number of intervals
   641           in the function. It must be a positive integer (greater than 0).
   642           The second parameter, which is optional, is
   643           either the value ''start'' or ''end'', and specifies the point
   644           at which the change of values occur within the interval.
   645           If the second parameter is omitted, it is given the value 'end'.
   646         </dd>
   647         <dt>
   648           cubic-bezier(&lt;number&gt;, &lt;number&gt;, &lt;number&gt;, &lt;number&gt;)
   649         </dt>
   650         <dd>
   651           Specifies a <a
   652           href="http://en.wikipedia.org/wiki/B%C3%A9zier_curve">cubic-bezier
   653           curve</a>. The four values specify points P<sub>1</sub> and
   654           P<sub>2</sub> of the curve as (x1, y1, x2, y2). Both x values must be
   655           in the range [0, 1] or the definition is invalid. The y values can
   656           exceed this range.
   657         </dd>
   658       </dl><!-- ======================================================================================================= -->
   659       <h3 id="transition-delay-property"><a id="the-transition-delay-property-">
   660         The 'transition-delay' Property
   661       </a></h3>
   662       <p>
   663         The 'transition-delay' property defines when the transition will start. It allows a transition to begin execution some some period of time from when it is applied. A 'transition-delay' value of ''0s'' means the transition will execute as soon as the property is changed. Otherwise, the value specifies an offset from the moment the property is changed, and the transition will delay execution by that offset.
   664       </p>
   665       <p>
   666         If the value for 'transition-delay' is a negative time offset then the transition will execute the moment the property is changed, but will appear to have begun execution at the specified offset. That is, the transition will appear to begin part-way through its play cycle. In the case where a transition has implied starting values and a negative 'transition-delay', the starting values are taken from the moment the property is changed.
   667       </p>
   668       <table class="propdef">
   669         <tbody>
   670           <tr>
   671             <td>
   672               <em>Name:</em>
   673             </td>
   674             <td>
   675               <dfn id="transition-delay">transition-delay</dfn>
   676             </td>
   677           </tr>
   678           <tr>
   679             <td>
   680               <em>Value:</em>
   681             </td>
   682             <td>
   683               <span>&lt;time&gt;</span> [, <span>&lt;time&gt;</span>]*
   684             </td>
   685           </tr>
   686           <tr>
   687             <td>
   688               <em>Initial:</em>
   689             </td>
   690             <td>
   691               0s
   692             </td>
   693           </tr>
   694           <tr>
   695             <td>
   696               <em>Applies to:</em>
   697             </td>
   698             <td>
   699               all elements, :before and :after pseudo elements
   700             </td>
   701           </tr>
   702           <tr>
   703             <td>
   704               <em>Inherited:</em>
   705             </td>
   706             <td>
   707               no
   708             </td>
   709           </tr>
   710           <tr>
   711             <td>
   712               <em>Animatable:</em>
   713             </td>
   714             <td>
   715               no
   716             </td>
   717           </tr>
   718           <tr>
   719             <td>
   720               <em>Percentages:</em>
   721             </td>
   722             <td>
   723               N/A
   724             </td>
   725           </tr>
   726           <tr>
   727             <td>
   728               <em>Media:</em>
   729             </td>
   730             <td>
   731               interactive
   732             </td>
   733           </tr>
   734           <tr>
   735             <td>
   736               <em>Computed value:</em>
   737             </td>
   738             <td>
   739               Same as specified value.
   740             </td>
   741           </tr>
   742           <tr>
   743             <td>
   744               <em>Canonical order:</em>
   745             </td>
   746             <td>
   747               <abbr title="follows order of property value definition">per grammar</abbr>
   748             </td>
   749           </tr>
   750         </tbody>
   751       </table><!-- ======================================================================================================= -->
   752       <h3 id="transition-shorthand-property"><a id="the-transition-shorthand-property-">
   753         The 'transition' Shorthand Property
   754       </a></h3>
   755       <p>
   756         The 'transition' shorthand property combines the four properties described above into a single property.
   757       </p>
   758       <table class="propdef">
   759         <tbody>
   760           <tr>
   761             <td>
   762               <em>Name:</em>
   763             </td>
   764             <td>
   765               <dfn id="transition">transition</dfn>
   766             </td>
   767           </tr>
   768           <tr>
   769             <td>
   770               <em>Value:</em>
   771             </td>
   772             <td>
   773               <span>&lt;single-transition&gt;</span> [ ',' <span>&lt;single-transition&gt;</span> ]*
   774             </td>
   775           </tr>
   776           <tr>
   777             <td>
   778               <em>Initial:</em>
   779             </td>
   780             <td>
   781               see individual properties
   782             </td>
   783           </tr>
   784           <tr>
   785             <td>
   786               <em>Applies to:</em>
   787             </td>
   788             <td>
   789               all elements, :before and :after pseudo elements
   790             </td>
   791           </tr>
   792           <tr>
   793             <td>
   794               <em>Inherited:</em>
   795             </td>
   796             <td>
   797               no
   798             </td>
   799           </tr>
   800           <tr>
   801             <td>
   802               <em>Animatable:</em>
   803             </td>
   804             <td>
   805               no
   806             </td>
   807           </tr>
   808           <tr>
   809             <td>
   810               <em>Percentages:</em>
   811             </td>
   812             <td>
   813               N/A
   814             </td>
   815           </tr>
   816           <tr>
   817             <td>
   818               <em>Media:</em>
   819             </td>
   820             <td>
   821               interactive
   822             </td>
   823           </tr>
   824           <tr>
   825             <td>
   826               <em>Computed value:</em>
   827             </td>
   828             <td>
   829               Same as specified value.
   830             </td>
   831           </tr>
   832           <tr>
   833             <td>
   834               <em>Canonical order:</em>
   835             </td>
   836             <td>
   837               <abbr title="follows order of property value definition">per grammar</abbr>
   838             </td>
   839           </tr>
   840         </tbody>
   841       </table>
   843       <div class="prod">
   844         <dfn id="single-transition">&lt;single-transition&gt;</dfn> = [ none | <span>&lt;single-transition-property&gt;</span> ] || <span>&lt;time&gt;</span> || <span>&lt;single-transition-timing-function&gt;</span> || <span>&lt;time&gt;</span>
   845       </div>
   847       <p>
   848         Note that order is important within the items in this property:
   849         the first value that can be parsed as a time is assigned to the
   850         transition-duration,
   851         and the second value that can be parsed as a time is assigned to
   852         transition-delay.
   853       </p>
   855       <p>
   856         If there is more than one <span>&lt;single-transition&gt;</span> in the shorthand,
   857         and any of the transitions has
   858         ''none'' as the <span>&lt;single-transition-property&gt;</span>,
   859         then the declaration is invalid.
   860       </p>
   862       <h2 id="starting">
   863         Starting of transitions
   864       </h2>
   866       <p>
   867         When the computed value of an animatable property changes,
   868         implementations must decide what transitions to start based on
   869         the values of the 'transition-property', 'transition-duration',
   870         'transition-timing-function', and 'transition-delay' properties
   871         at the time the animatable property would first have its new
   872         computed value.
   873         This means that when one of these 'transition-*' properties
   874         changes at the same time as
   875         a property whose change might transition,
   876         it is the <em>new</em> values of the 'transition-*' properties
   877         that control the transition.
   878       </p>
   879       <div class="example" id="manual-reversing-example">
   880         <p style="display:none">
   881           Example(s):
   882         </p>
   883         <p>This provides a way for authors to specify different values
   884         of the 'transition-*' properties for the &ldquo;forward&rdquo;
   885         and &ldquo;reverse&rdquo; transitions (but see <a
   886         href="#reversing">below</a> for special reversing behavior when
   887         an <em>incomplete</em> transition is interrupted).  Authors can
   888         specify the value of 'transition-duration',
   889         'transition-timing-function', or 'transition-delay' in the same
   890         rule where they specify the value that triggers the transition,
   891         or can change these properties at the same time as they change
   892         the property that triggers the transition.  Since it's the new
   893         values of these 'transition-*' properties that affect the
   894         transition, these values will be used for the transitions
   895         <em>to</em> the associated transitioning values.  For example:
   896          </p>
   897         <pre>li {
   898   transition: background-color linear 1s;
   899   background: blue;
   900 }
   901 li:hover {
   902   background-color: green;
   903   transition-duration: 2s; /* applies to the transition *to* the :hover state */
   904 }</pre>
   905         <p>
   906           When a list item with these style rules enters the :hover
   907           state, the computed 'transition-duration' at the time that
   908           'background-color' would have its new value (''green'') is ''2s'',
   909           so the transition from 'blue' to 'green' takes 2 seconds.
   910           However, when the list item leaves the :hover state, the
   911           transition from ''green'' to ''blue'' takes 1 second.
   912         </p>
   913       </div>
   915       <p>
   916         When the computed value of a property changes, implementations
   917         must start transitions based on the relevant item (see <a
   918         href="#transition-property">the definition of
   919         'transition-property'</a>) in the computed value of
   920         'transition-property'.
   921         Corresponding to this item there are
   922         computed values of 'transition-duration' and 'transition-delay'
   923         (see <a href="#list-matching">the rules on matching lists</a>).
   924         Define the <dfn>combined duration</dfn> of the transition
   925         as the sum of max('transition-duration', ''0s'') and 'transition-delay'.
   926         When the combined duration is greater than ''0s'',
   927         then a transition starts based on the values of
   928         'transition-duration', 'transition-delay',
   929         and 'transition-timing-function';
   930         in other cases transitions do not occur.
   931       </p>
   933       <p>
   934         Since this specification does not define
   935         when computed values change, and thus what changes to
   936         computed values are considered simultaneous,
   937         authors should be aware that changing any of the transition
   938         properties a small amount of time after making a change that
   939         might transition can result in behavior that varies between
   940         implementations, since the changes might be considered
   941         simultaneous in some implementations but not others.
   942       </p>
   944       <p>
   945         Once the transition of a property has started, it must continue
   946         running based on the original timing function, duration, and
   947         delay, even if the 'transition-timing-function',
   948         'transition-duration', or 'transition-delay' property changes
   949         before the transition is complete.  However, if the
   950         'transition-property' property changes such that the transition
   951         would not have started, the transition must stop (and the
   952         property must immediately change to its final value).
   953       </p>
   955       <p>
   956         Implementations must not start a transition when the computed
   957         value of a property changes as a result of declarative animation
   958         (as opposed to scripted animation).
   959       </p>
   961       <p>
   962         Implementations also must not start a transition when the
   963         computed value changes because it is inherited (directly or
   964         indirectly) from another element that is transitioning the same
   965         property.
   966       </p>
   968       <h2 id="reversing">
   969         Automatically reversing interrupted transitions
   970       </h2>
   971       <p>
   972         A common type of transition effect is when a running transition is
   973         interrupted and the property is reset to its original value. An
   974         example is a hover effect on an element, where the pointer enters and
   975         exits the element before the effect has completed. If the outgoing and
   976         incoming transitions are executed using their specified durations and
   977         timing functions, the resulting effect can be distractingly
   978         asymmetric. Instead, the expected behavior is that the new transition
   979         should be the reverse of what has already executed.
   980       </p>
   982       <p>
   983         If a running transition with duration T, executing so far for duration TE, 
   984         from state A, to state B, is interrupted by
   985         a property change that would start a new transition back to state A, and
   986         all the transition attributes are the same (duration, delay and timing function),
   987         then the new transition must reverse the effect. The new transition must:
   988       </p>
   990       <ol>
   991         <li>
   992           Use the B and A states as its "from" and "to" states respectively. It
   993           does not use the current value as its from state, due to the rules below.
   994         </li>
   995         <li>
   996           Execute with the same duration T, but starting as if the transition had
   997           already begun, without any transition delay, at the moment which would
   998           cause the new transition to finish in TE from the moment of interruption. In other
   999           words, the new transition will execute as if it started T-TE in the past.
  1000         </li>
  1001         <li>
  1002           Use a timing function that is the portion of the curve traversed up
  1003           to the moment of interruption, followed in the opposite direction (towards
  1004           the starting point). This will make the transition appear as if it 
  1005           is playing backwards.
  1006         </li>
  1007         <li>
  1008           Ignore any transition delay.
  1009         </li>
  1010       </ol>
  1012       <p>
  1013         For example, suppose there is a transition with a duration of two
  1014         seconds. If this transition is interrupted after 0.5 seconds and the
  1015         property value assigned to the original value, then the new transition
  1016         effect will be the reverse of the original, as if it had begun
  1017         1.5 seconds in the past.
  1018       </p>
  1020       <p>
  1021         Note that by using the defined from and to states for the reversing
  1022         transition, it is also possible that it may reverse again, if
  1023         interrupted; for example, if the transition reversing to state A was
  1024         again interrupted by a property change to state B.
  1025       </p>
  1027       <p class="issue">Issue:
  1028         This introduces the concept of reversing a timing function,
  1029         which the spec has otherwise resisted doing, and also introduces
  1030         a discontinuity between transitions that have
  1031         almost completed (which get automatically reversed and thus have
  1032         their timing function reversed) and transitions that have fully
  1033         completed (where the reversal doesn't lead to the timing
  1034         function being reversed).  An alternative proposal that avoids
  1035         this is to follow the normal timing function algorithm, except
  1036         multiply the duration (and also shorten any negative delay) by
  1037         the (output) value of the transition timing function of the
  1038         incomplete transition at the time it was interrupted, and, to
  1039         account for multiple reverses in sequence, to divide by the
  1040         shortening applied to the transition being interrupted.  For
  1041         more details see this thread:
  1042         <a href="http://lists.w3.org/Archives/Public/www-style/2009Nov/thread.html#msg302">November 2009 part</a>,
  1043         <a href="http://lists.w3.org/Archives/Public/www-style/2009Dec/thread.html#msg319">December 2009 part</a>,
  1044         <a href="http://lists.w3.org/Archives/Public/www-style/2010Jan/thread.html#msg136">January 2010 part</a>.
  1045       </p>
  1047       <h2 id="transition-events"><a id="transition-events-">
  1048         Transition Events
  1049       </a></h2>
  1050       <p>
  1051         The completion of a CSS Transition generates a corresponding <a href="http://www.w3.org/TR/DOM-Level-2-Events/events.html">DOM Event</a>.
  1052         An event is fired for each property that undergoes a transition.
  1053         This allows a content developer to perform actions that synchronize
  1054         with the completion of a transition.
  1055       </p>
  1056       <p>
  1057         Each event provides the name of the property the transition is
  1058         associated with as well as the duration of the transition.
  1059       </p>
  1060       <dl>
  1061         <dt>
  1062           <b>Interface <dfn id="Events-TransitionEvent">TransitionEvent</dfn></b>
  1063         </dt>
  1064         <dd>
  1065           <p>
  1066             The <code>TransitionEvent</code> interface provides specific contextual information associated with transitions.
  1067           </p>
  1068           <dl>
  1069             <dt>
  1070               <b>IDL Definition</b>
  1071             </dt>
  1072             <dd>
  1073               <div class='idl-code'>
  1074                 <pre>
  1075   <span id="TransitionEvent">[Constructor(DOMString <var title="">type</var>, optional <i>TransitionEventInit</i> <var title="">transitionEventInitDict</var>)]
  1076   interface TransitionEvent</span> : Event {
  1077     readonly attribute DOMString          <a href="#Events-TransitionEvent-propertyName">propertyName</a>;
  1078     readonly attribute float              <a href="#Events-TransitionEvent-elapsedTime">elapsedTime</a>;
  1079     readonly attribute DOMString          <a href="#Events-TransitionEvent-pseudoElement">pseudoElement</a>;
  1080   };
  1082   dictionary <dfn id="TransitionEventInit">TransitionEventInit</dfn> : <a class="external" href="http://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#eventinit">EventInit</a> {
  1083     DOMString <a href="#Events-TransitionEvent-propertyName">propertyName</a>;
  1084     float <a href="#Events-TransitionEvent-elapsedTime">elapsedTime</a>;
  1085     DOMString <a href="#Events-TransitionEvent-pseudoElement">pseudoElement</a>;
  1087   </pre>
  1088               </div>
  1089             </dd>
  1090             <dt>
  1091               <b>Attributes</b>
  1092             </dt>
  1093             <dd>
  1094               <dl>
  1095                 <dt>
  1096                   <code class='attribute-name'><dfn title="TransitionEvent::propertyName" id="Events-TransitionEvent-propertyName">propertyName</dfn></code> of type <code>DOMString</code>, readonly
  1097                 </dt>
  1098                 <dd>
  1099                   The name of the CSS property associated with the transition.
  1100                 </dd>
  1101               </dl>
  1102               <dl>
  1103                 <dt>
  1104                   <code class='attribute-name'><dfn title="TransitionEvent::elapsedTime" id="Events-TransitionEvent-elapsedTime">elapsedTime</dfn></code> of type <code>float</code>, readonly
  1105                 </dt>
  1106                 <dd>
  1107                   The amount of time the transition has been running, in seconds, when this event fired. Note that this value is not affected by the value of <code class="property">transition-delay</code>.
  1108                 </dd>
  1109               </dl>
  1110               <dl>
  1111                 <dt>
  1112                   <code class='attribute-name'><dfn title="TransitionEvent::pseudoElement" id="Events-TransitionEvent-pseudoElement">pseudoElement</dfn></code> of type <code>DOMString</code>, readonly
  1113                 </dt>
  1114                 <dd>
  1115                   The name (beginning with two colons) of the CSS
  1116                   pseudo-element on which the transition occured (in
  1117                   which case the target of the event is that
  1118                   pseudo-element's corresponding element), or the empty
  1119                   string if the transition occurred on an element (which
  1120                   means the target of the event is that element).
  1121                 </dd>
  1122               </dl>
  1123             </dd>
  1124           </dl>
  1125           <p>
  1126             <code id="TransitionEvent-constructor">TransitionEvent(type, transitionEventInitDict)</code>
  1127             is an <a class="external" href="http://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#concept-event-constructor">event constructor</a>.
  1128           </p>
  1129         </dd>
  1130       </dl>
  1131       <p>
  1132         There is one type of transition event available.
  1133       </p>
  1134       <dl>
  1135         <dt>
  1136           <b><dfn>transitionend</dfn></b>
  1137         </dt>
  1138         <dd>
  1139           The <code>transitionend</code> event occurs at the completion of the transition. In the
  1140           case where a transition is removed before completion, such as if the
  1141           transition-property is removed, then the event will not fire.
  1142           <ul>
  1143             <li>Bubbles: Yes
  1144             </li>
  1145             <li>Cancelable: Yes
  1146             </li>
  1147             <li>Context Info: propertyName, elapsedTime, pseudoElement
  1148             </li>
  1149           </ul>
  1150         </dd>
  1151       </dl>
  1153       <h2 id="animatable-types"><a id="animation-of-property-types-">
  1154         Animation of property types
  1155       </a></h2>
  1157       <p>
  1158         When interpolating between two values,
  1159         <i>V</i><sub>start</sub> and <i>V</i><sub>end</sub>,
  1160         interpolation is done using the output <i>p</i> of the timing function,
  1161         which gives the portion of the value space
  1162         that the interpolation has crossed.
  1163         Thus the result of the interpolation is
  1164         <i>V</i><sub>res</sub> =
  1165           (1 - <i>p</i>) &sdot; <i>V</i><sub>start</sub> +
  1166           <i>p</i> &sdot; <i>V</i><sub>end</sub>.
  1167       </p>
  1169       <p>
  1170         However, if this value (<i>V</i><sub>res</sub>)
  1171         is outside the allowed range of values for the property,
  1172         then it is clamped to that range.
  1173         This can occur if <i>p</i> is outside of the range 0 to 1,
  1174         which can occur if a timing function is specified
  1175         with a <i>y1</i> or <i>y2</i> that is outside the range 0 to 1.
  1176       </p>
  1178       <p>
  1179         The following describes how each property type undergoes transition or
  1180         animation.
  1181       </p>
  1183       <ul>
  1184         <li id="animtype-color">
  1185           <strong>color</strong>: interpolated via red, green, blue and alpha
  1186           components (treating each as a number, see below).
  1187           The interpolation is done between premultiplied colors
  1188           (that is, colors for which the red, green, and blue components
  1189           specified have been multiplied by the alpha).
  1190         </li>
  1191         <li id="animtype-length">
  1192           <strong>length</strong>: interpolated as real numbers.
  1193         </li>
  1194         <li id="animtype-percentage">
  1195           <strong>percentage</strong>: interpolated as real numbers.
  1196         </li>
  1197         <li id="animtype-lpcalc">
  1198           <strong>length, percentage, or calc</strong>: when both values
  1199           are lengths, interpolated as lengths; when both values are
  1200           percentages, interpolated as percentages; otherwise, both
  1201           values are converted into a ''calc()'' function that is the
  1202           sum of a length and a percentage (each possibly zero), and
  1203           these ''calc()'' functions have each half interpolated as real
  1204           numbers.
  1205         </li>
  1206         <li id="animtype-integer">
  1207           <strong>integer</strong>: interpolated via discrete steps (whole
  1208           numbers). The interpolation happens in real number space and is
  1209           converted to an integer by rounding to the nearest integer, with
  1210           values halfway between a pair of integers rounded towards
  1211           positive infinity.
  1212         </li>
  1213         <li id="animtype-font-weight">
  1214           <strong>font weight</strong>: interpolated via discrete steps
  1215           (multiples of 100). The interpolation happens in real number
  1216           space and is converted to an integer by rounding to the
  1217           nearest multiple of 100, with values halfway between multiples
  1218           of 100 rounded towards positive infinity.
  1219         </li>
  1220         <li id="animtype-number">
  1221           <strong>number</strong>: interpolated as real (floating point)
  1222           numbers.
  1223         </li>
  1224         <li id="animtype-rect">
  1225           <strong>rectangle</strong>: interpolated via the x, y,
  1226           width and height components (treating each as a number).
  1227         </li>
  1228         <li id="animtype-visibility">
  1229           <strong>visibility</strong>: if one of the values is
  1230           ''visible'', interpolated as a discrete step where values of the
  1231           timing function between 0 and 1 map to ''visible'' and other
  1232           values of the timing function (which occur only at the
  1233           start/end of the transition or as a result of ''cubic-bezier()''
  1234           functions with Y values outside of [0, 1]) map to the closer
  1235           endpoint; if neither value is ''visible'' then not interpolable.
  1236         </li>
  1237         <li id="animtype-shadow-list">
  1238           <strong>shadow list</strong>: Each shadow in the list is
  1239           interpolated via the
  1240           color (as <a href="#animtype-color">color</a>) component,
  1241           and x, y, blur, and (when appropriate) spread
  1242           (as <a href="#animtype-length">length</a>) components.
  1243           For each shadow, if one input shadow is ''inset'' and the other
  1244           is not, then the result for that shadow matches the inputs;
  1245           otherwise the entire list is not interpolable.
  1246           If the lists of shadows have different lengths,
  1247           then the shorter list is padded at the end
  1248           with shadows whose color is ''transparent'',
  1249           all lengths are ''0'',
  1250           and whose ''inset'' (or not) matches the longer list.
  1251         </li>
  1252         <li id="animtype-gradient">
  1253           <strong>gradient</strong>: interpolated via the
  1254           positions and colors of each stop. They must have the same type
  1255           (radial or linear) and same number of stops in order to be animated.
  1256           <span class="note">Note: [[CSS3-IMAGES]] may extend this
  1257           definition.</span>
  1258         </li>
  1259         <li id="animtype-paintserver">
  1260           <strong>paint server</strong> (SVG): interpolation is only supported
  1261           between: gradient to gradient and color to color. They then
  1262           work as above.
  1263         </li>
  1264         <li id="animtype-simple-list">
  1265           <strong>simple list</strong> of other types:
  1266           If the lists have the same number of items,
  1267           and each pair of values can be interpolated,
  1268           each item in the list is interpolated using
  1269           the rules given for those types.
  1270           Otherwise the values are not interpolable.
  1271         </li>
  1272         <li id="animtype-repeatable-list">
  1273           <strong>repeatable list</strong> of other types:
  1274           The result list has a length that is the least common multiple
  1275           of the lengths of the input lists.
  1276           Each item in the result is the interpolation of the value
  1277           from each input list repeated to the length of the result list.
  1278           If a pair of values cannot be interpolated, then the lists
  1279           are not interpolable.
  1280           <span class="note">
  1281             The repeatable list concept ensures that a list that is
  1282             conceptually repeated to a certain length (as
  1283             'background-origin' is repeated to the length of the
  1284             'background-image' list) or repeated infinitely will
  1285             smoothly transition between any values, and so that the
  1286             computed value will properly represent the result (and
  1287             potentially be inherited correctly).
  1288           </span>
  1289         </li>
  1290       </ul>
  1292       <p>Future specifications may define additional types that can
  1293       be animated.</p>
  1295       <p>See the definition of 'transition-property' for how animation
  1296       of shorthand properties and the ''all'' value is applied to any
  1297       properties (in the shorthand) that can be animated.</p>
  1299       <h2 id="animatable-properties"><a id="animatable-properties-">
  1300         Animatable properties
  1301       </a></h2>
  1303       <!--
  1304       As resolved in
  1305       http://lists.w3.org/Archives/Public/www-style/2011Sep/0497.html
  1306       -->
  1308       <p>The definition of each CSS property defines
  1309       when the values of that property can be interpolated
  1310       by referring to the definitions of property types
  1311       in the <a href="#animatable-types">previous section</a>.
  1312       Values are animatable when
  1313       both the from and the to values of the property have the type described.
  1314       (When a composite type such as "length, percentage, or calc" is listed,
  1315       this means that both values must fit into that composite type.)
  1316       When multiple types are listed in the form "either A or B",
  1317       both values must be of the same type to be interpolable.</p>
  1319       <p>For properties that exist at the time this specification was
  1320       developed, this specification defines whether and how they are
  1321       animated.  However, future CSS specifications may define
  1322       additional properties, additional values for existing properties,
  1323       or additional animation behavior of existing values.  In order to
  1324       describe new animation behaviors and to have the definition of
  1325       animation behavior in a more appropriate location, future CSS
  1326       specifications should include an "Animatable:" line in the summary
  1327       of the property's definition (in addition to the other lines
  1328       described in [[CSS21]], <a
  1329       href="http://www.w3.org/TR/CSS21/about.html#property-defs">section
  1330       1.4.2</a>).  This line should say "no" to indicate that a property
  1331       cannot be animated or should reference an animation behavior
  1332       (which may be one of the behaviors in the <a
  1333       href="#animation-of-property-types-">Animation of property
  1334       types</a> section above, or may be a new behavior) to define how
  1335       the property animates.  Such definitions override those given in
  1336       this specification.</p>
  1338       <h3 id="animatable-css"><a id="properties-from-css-">
  1339         Properties from CSS
  1340       </a></h3>
  1342       <p>
  1343       The following definitions define the animation behavior for
  1344       properties in CSS Level 2 Revision 1 ([[CSS21]]) and in Level 3 of
  1345       the CSS Color Module ([[CSS3COLOR]]).
  1346       </p>
  1348      <table class="animatable-properties">
  1349        <tr>
  1350          <th>Property Name</th>
  1351          <th>Type</th>
  1352        </tr>
  1353        <tr>
  1354          <td>background-color</td><td>as <a href="#animtype-color">color</a></tr>
  1355        <tr>
  1356          <td>background-position</td><td>as <a href="#animtype-repeatable-list">repeatable list</a> of <a href="#animtype-simple-list">simple list</a> of <a href="#animtype-lpcalc">length, percentage, or calc</a></td>
  1357        </tr>
  1358        <tr>
  1359          <td>border-bottom-color</td><td>as <a href="#animtype-color">color</a></td>
  1360        </tr>
  1361        <tr>
  1362          <td>border-bottom-width</td><td>as <a href="#animtype-length">length</a></td>
  1363        </tr>
  1364        <tr>
  1365          <td>border-left-color</td><td>as <a href="#animtype-color">color</a></td>
  1366        </tr>
  1367        <tr>
  1368          <td>border-left-width</td><td>as <a href="#animtype-length">length</a></td>
  1369        </tr>
  1370        <tr>
  1371          <td>border-right-color</td><td>as <a href="#animtype-color">color</a></td>
  1372        </tr>
  1373        <tr>
  1374          <td>border-right-width</td><td>as <a href="#animtype-length">length</a></td>
  1375        </tr>
  1376        <tr>
  1377          <td>border-spacing</td><td>as <a href="#animtype-simple-list">simple list</a> of <a href="#animtype-length">length</a></td>
  1378        </tr>
  1379        <tr>
  1380          <td>border-top-color</td><td>as <a href="#animtype-color">color</a></td>
  1381        </tr>
  1382        <tr>
  1383          <td>border-top-width</td><td>as <a href="#animtype-length">length</a></td>
  1384        </tr>
  1385        <tr>
  1386          <td>bottom</td><td>as <a href="#animtype-lpcalc">length, percentage, or calc</a></td>
  1387        </tr>
  1388        <tr>
  1389          <td>clip</td><td>as <a href="#animtype-rect">rectangle</a></td>
  1390        </tr>
  1391        <tr>
  1392          <td>color</td><td>as <a href="#animtype-color">color</a></td>
  1393        </tr>
  1394        <tr>
  1395          <td>font-size</td><td>as <a href="#animtype-length">length</a></td>
  1396        </tr>
  1397        <tr>
  1398          <td>font-weight</td><td>as <a href="#animtype-font-weight">font weight</a></td>
  1399        </tr>
  1400        <tr>
  1401          <td>height</td><td>as <a href="#animtype-lpcalc">length, percentage, or calc</a></td>
  1402        </tr>
  1403        <tr>
  1404          <td>left</td><td>as <a href="#animtype-lpcalc">length, percentage, or calc</a></td>
  1405        </tr>
  1406        <tr>
  1407          <td>letter-spacing</td><td>as <a href="#animtype-length">length</a></td>
  1408        </tr>
  1409        <tr>
  1410          <td>line-height</td><td>as either <a href="#animtype-number">number</a> or <a href="#animtype-length">length</a></td>
  1411        </tr>
  1412        <tr>
  1413          <td>margin-bottom</td><td>as <a href="#animtype-length">length</a></td>
  1414        </tr>
  1415        <tr>
  1416          <td>margin-left</td><td>as <a href="#animtype-length">length</a></td>
  1417        </tr>
  1418        <tr>
  1419          <td>margin-right</td><td>as <a href="#animtype-length">length</a></td>
  1420        </tr>
  1421        <tr>
  1422          <td>margin-top</td><td>as <a href="#animtype-length">length</a></td>
  1423        </tr>
  1424        <tr>
  1425          <td>max-height</td><td>as <a href="#animtype-lpcalc">length, percentage, or calc</a></td>
  1426        </tr>
  1427        <tr>
  1428          <td>max-width</td><td>as <a href="#animtype-lpcalc">length, percentage, or calc</a></td>
  1429        </tr>
  1430        <tr>
  1431          <td>min-height</td><td>as <a href="#animtype-lpcalc">length, percentage, or calc</a></td>
  1432        </tr>
  1433        <tr>
  1434          <td>min-width</td><td>as <a href="#animtype-lpcalc">length, percentage, or calc</a></td>
  1435        </tr>
  1436        <tr>
  1437          <td>opacity</td><td>as <a href="#animtype-number">number</a></td>
  1438        </tr>
  1439        <tr>
  1440          <td>outline-color</td><td>as <a href="#animtype-color">color</a></td>
  1441        </tr>
  1442        <tr>
  1443          <td>outline-width</td><td>as <a href="#animtype-length">length</a></td>
  1444        </tr>
  1445        <tr>
  1446          <td>padding-bottom</td><td>as <a href="#animtype-length">length</a></td>
  1447        </tr>
  1448        <tr>
  1449          <td>padding-left</td><td>as <a href="#animtype-length">length</a></td>
  1450        </tr>
  1451        <tr>
  1452          <td>padding-right</td><td>as <a href="#animtype-length">length</a></td>
  1453        </tr>
  1454        <tr>
  1455          <td>padding-top</td><td>as <a href="#animtype-length">length</a></td>
  1456        </tr>
  1457        <tr>
  1458          <td>right</td><td>as <a href="#animtype-lpcalc">length, percentage, or calc</a></td>
  1459        </tr>
  1460        <tr>
  1461          <td>text-indent</td><td>as <a href="#animtype-lpcalc">length, percentage, or calc</a></td>
  1462        </tr>
  1463        <tr>
  1464          <td>text-shadow</td><td>as <a href="#animtype-shadow-list">shadow list</a></td>
  1465        </tr>
  1466        <tr>
  1467          <td>top</td><td>as <a href="#animtype-lpcalc">length, percentage, or calc</a></td>
  1468        </tr>
  1469        <tr>
  1470          <td>vertical-align</td><td>as <a href="#animtype-length">length</a></td>
  1471        </tr>
  1472        <tr>
  1473          <td>visibility</td><td>as <a href="#animtype-visibility">visibility</a></td>
  1474        </tr>
  1475        <tr>
  1476          <td>width</td><td>as <a href="#animtype-lpcalc">length, percentage, or calc</a></td>
  1477        </tr>
  1478        <tr>
  1479          <td>word-spacing</td><td>as <a href="#animtype-length">length</a></td>
  1480        </tr>
  1481        <tr>
  1482          <td>z-index</td><td>as <a href="#animtype-integer">integer</a></td>
  1483        </tr>
  1484      </table>
  1486      <h3 id="animatable-svg"><a id="properties-from-svg-">
  1487        Properties from SVG
  1488      </a></h3>
  1490      <p>
  1491        All properties defined as animatable in the SVG specification, provided
  1492        they are one of the property types listed above.
  1493       </p>
  1495      <!-- <table>
  1496        <tr>
  1497          <th>Property Name</th><th>Type</th>
  1498        </tr>
  1499        <tr>
  1500          <td>stop-color</td><td>as <a href="#animtype-color">color</a></td>
  1501        </tr>
  1502        <tr>
  1503          <td>stop-opacity</td><td>as <a href="#animtype-number">number</a></td>
  1504        </tr>
  1505        <tr>
  1506          <td>fill</td><td>as <a href="#animtype-paintserver">paint server</a></td>
  1507        </tr>
  1508        <tr>
  1509          <td>fill-opacity</td><td>as <a href="#animtype-number">number</a></td>
  1510        </tr>
  1511        <tr>
  1512          <td>stroke</td><td>as <a href="#animtype-paintserver">paint server</a></td>
  1513        </tr>
  1514        <tr>
  1515          <td>stroke-dasharray</td><td>as <a href="#animtype-repeatable-list">repeatable list</a> of <a href="#animtype-number">number</a></td>
  1516        </tr>
  1517        <tr>
  1518          <td>stroke-dashoffset</td><td>as <a href="#animtype-number">number</a></td>
  1519        </tr>
  1520        <tr>
  1521          <td>stroke-miterlimit</td><td>as <a href="#animtype-number">number</a></td>
  1522        </tr>
  1523        <tr>
  1524          <td>stroke-opacity</td><td>as <a href="#animtype-number">number</a></td>
  1525        </tr>
  1526        <tr>
  1527          <td>stroke-width</td><td>as <a href="#animtype-number">number</a></td>
  1528        </tr>
  1529        <tr>
  1530          <td>viewport-fill</td><td>as <a href="#animtype-color">color</a></td>
  1531        </tr>
  1532        <tr>
  1533          <td>viewport-fill-opacity</td><td>as <a href="#animtype-color">color</a></td>
  1534        </tr>
  1535       </table> -->
  1537 <h2 id="acknowledgments">Acknowledgments</h2>
  1539 <p>Thanks especially to the feedback from
  1540 Tab Atkins,
  1541 Carine Bournez,
  1542 Aryeh Gregor,
  1543 Vincent Hardy,
  1544 Cameron McCormack,
  1545 Alex Mogilevsky,
  1546 and all the rest of the
  1547 <a href="http://lists.w3.org/Archives/Public/www-style/">www-style</a> community.</p>
  1549 <h2 id="references">References</h2>
  1551 <h3 class="no-num" id="normative-references">Normative references</h3>
  1552 <!--normative-->
  1554 <h3 class="no-num" id="other-references">Other references</h3>
  1555 <!--informative-->
  1559 <h2 class="no-num" id="property-index">Property index</h2>
  1560 <!-- properties -->
  1564 <h2 class="no-num" id="index">Index</h2>
  1565 <!--index-->
  1567 </body>
  1568 </html>
  1569 <!-- Keep this comment at the end of the file
  1570 Local variables:
  1571 mode: sgml
  1572 sgml-default-doctype-name:"html"
  1573 sgml-minimize-attributes:t
  1574 End:
  1575 -->

mercurial