drafts: css-transitions/Overview.bs@ed61a21f7929

     1 <h1>CSS Transitions</h1>

     3   <style type="text/css">

     4     table.animatable-properties {

     5       border-collapse: collapse;

     6     }

     7     table.animatable-properties td {

     8       padding: 0.2em 1em;

     9       border: 1px solid black;

    10     }

    11     div.prod { margin: 1em 2em; }

    12   </style>

    15 <pre class="metadata">

    16 Status: ED

    17 Work Status: Refining

    18 Shortname: css-transitions

    19 Group: csswg

    20 Level: 1

    21 TR: https://www.w3.org/TR/css3-transitions/

    22 Previous version: https://www.w3.org/TR/2013/WD-css3-transitions-20131119/

    23 ED: https://drafts.csswg.org/css-transitions/

    24 Editor: L. David Baron, Mozilla https://www.mozilla.org/, http://dbaron.org/

    25 Editor: Dean Jackson, Apple Inc https://www.apple.com/, dino@apple.com

    26 Editor: David Hyatt, Apple Inc https://www.apple.com/, hyatt@apple.com

    27 Editor: Chris Marrin, Apple Inc https://www.apple.com/, cmarrin@apple.com

    28 Issue Tracking: Bugzilla bugs for this level https://www.w3.org/Bugs/Public/buglist.cgi?query_format=advanced&amp;product=CSS&amp;component=Transitions&amp;resolution=---&amp;status_whiteboard=defer%20to%20level%202&amp;status_whiteboard_type=notregexp

    29 Issue Tracking: Bugzilla bugs for all levels https://www.w3.org/Bugs/Public/buglist.cgi?query_format=advanced&amp;product=CSS&amp;component=Transitions&amp;resolution=---

    30 Abstract: CSS Transitions allows property changes in CSS values to occur smoothly over a specified duration.

    31 Status Text: <strong>This document</strong> is expected to be relatively close to last call.  While some issues raised have yet to be addressed, new features are extremely unlikely to be considered for this level. <p>The following behaviors are at risk: <ul><li><a href="#discrete-interpolation-at-risk">Interpolation in steps of property types that cannot be interpolated</a></li></ul>

    32 Ignored Terms: float

    33 Ignored Vars: x1, x2, y1, y2

    34 Link Defaults: css-transforms (property) transform

    35 </pre>

    36 <pre class="link-defaults">

    37 spec:css21; type:property;

    38     text:top

    39     text:right

    40     text:bottom

    41     text:left

    42     text:margin-top

    43     text:margin-right

    44     text:margin-bottom

    45     text:margin-left

    46     text:padding-top

    47     text:padding-right

    48     text:padding-bottom

    49     text:padding-left

    50     text:border-top-color

    51     text:border-right-color

    52     text:border-bottom-color

    53     text:border-left-color

    54     text:border-top-width

    55     text:border-right-width

    56     text:border-bottom-width

    57     text:border-left-width

    58     text:background-color

    59     text:background-position

    60     text:border-spacing

    61     text:width

    62     text:height

    63     text:min-width

    64     text:min-height

    65     text:max-width

    66     text:max-height

    67     text:clip

    68     text:letter-spacing

    69     text:line-height

    70     text:outline-color

    71     text:outline-width

    72     text:text-indent

    73     text:font-size

    74     text:font-weight

    75     text:vertical-align

    76     text:visibility

    77     text:word-spacing

    78     text:z-index

    79 spec:css-color-3;

    80     type:property;

    81         text:color

    82         text:opacity

    83     type:value

    84         text:green

    85         text:blue

    86         text:transparent

    87 spec:css-values-3; type:type; text:<time>

    88 </pre>

    89 <!-- FIXME: These overrides aren't great for dev/TR switching -->

    90 <pre class="anchors">

    91 url: https://www.w3.org/TR/css3-background/#shadow-inset; type: value; for: shadow; text: inset;

    92 url: https://www.w3.org/TR/css3-background/#box-shadow-none; type: value; for: shadow; text: none;

    93 url: https://www.w3.org/TR/CSS21/visufx.html#propdef-visibility; type: value; for: visibility; text: visible;

    94 urlPrefix: https://www.w3.org/TR/css3-color/; type: value;

    95     text: transparent

    96     text: blue

    97     text: green

    98 url: http://w3c.github.io/dom/#constructing-events; type: dfn; text: event constructor;

    99 urlPrefix: https://html.spec.whatwg.org/multipage/webappapis.html; type: dfn; spec: html

   100     text: event handlers

   101     text: event handler event type

   102     text: event handler content attributes

   103     text: event handler IDL attributes

   104 urlPrefix: https://html.spec.whatwg.org/multipage/infrastructure.html; type: dfn; spec: html

   105     text: HTML elements

   106     text: dispatch; url: concept-event-dispatch

   107 url: https://html.spec.whatwg.org/#document; type: interface; text: Document; spec: html

   108 </pre>

   109 </dl>

   111 Introduction {#introduction}

   112 ============================

   114       <p><em>This section is not normative.</em>

   115       <p>

   116         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.

   117       </p>

   119 <span id="transitions-">Transitions</span> {#transitions}

   120 =========================================================

   122       <p>

   123         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.

   124       </p>

   125       <p>

   126         For example, suppose that transitions of one second have been defined on the 'left' and

   127         '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.

   128       </p>

   129       <div class="figure">

   130         <img src="transition1.png" alt="">

   131       </div>

   132       <p class="caption">

   133         Transitions of 'left' and 'background-color'

   134       </p>

   135       <p>

   136         Transitions are a presentational effect. The <a>computed value</a> of a property transitions over time from the old value to the new value. Therefore if a script queries the <a>computed value</a> of a property (or other data depending on it) as it is transitioning, it will see an intermediate value that represents the current animated value of the property.

   137       </p>

   138       <p>

   139         Only animatable CSS properties can be transitioned. See the table at the end of this document for a list

   140         of properties that are animatable.

   141       </p>

   142       <p>

   143         The transition for a property is defined using a number of new properties. For example:

   144       </p>

   145       <div class="example">

   146         <p style="display:none">

   147           Example(s):

   148         </p>

   149         <pre>

   150   div {

   151     transition-property: opacity;

   152     transition-duration: 2s;

   153   }

   154   </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.

   155       </div>

   156       <p>

   157         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:

   158       </p>

   159       <div class="example">

   160         <p style="display:none">

   161           Example(s):

   162         </p>

   163         <pre>

   164   div {

   165     transition-property: opacity, left;

   166     transition-duration: 2s, 4s;

   167   }

   169   </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.

   170       </div>

   172       <p id="list-matching">

   173         In the case where the lists of values in transition properties

   174         do not have the same length, the length of the

   175         'transition-property' list determines the number of items in

   176         each list examined when starting transitions.  The lists are

   177         matched up from the first value: excess values at the end are

   178         not used.  If one of the other properties doesn't have enough

   179         comma-separated values to match the number of values of

   180         'transition-property', the UA must calculate its used value by

   181         repeating the list of values until there are enough.  This

   182         truncation or repetition does not affect the computed value.

   183         <span class="note">

   184           Note: This is analogous to the behavior of the 'background-*'

   185           properties, with 'background-image' analogous to

   186           'transition-property'.

   187         </span>

   188       </p>

   190       <div class="example">

   191         <p style="display:none">

   192           Example(s):

   193         </p>

   194       <pre>

   195       div {

   196         transition-property: opacity, left, top, width;

   197         transition-duration: 2s, 1s;

   198       }

   199       </pre>The above example defines a transition on the 'opacity' property of 2 seconds duration, a

   200       transition on the 'left' property of 1

   201       second duration, a transition on the 'top' property of 2 seconds duration and a

   202       transition on the 'width' property of 1

   203       second duration.

   205       </div>

   207       <p>

   208         While authors can use transitions to create dynamically changing content,

   209         dynamically changing content can lead to seizures in some users.

   210         For information on how to avoid content that can lead to seizures, see

   211         <a href="https://www.w3.org/TR/WCAG20/#seizure">Guideline 2.3:

   212         Seizures:

   213         Do not design content in a way that is known to cause seizures</a>

   214         ([[WCAG20]]).

   215       </p>

   217 <span id="the-transition-property-property-">The 'transition-property' Property</span> {#transition-property-property}

   218 ----------------------------------------------------------------------------------------------------------------------

   220       <p>

   221         The 'transition-property' property specifies the name of the CSS property to which the transition is applied.

   222       </p>

   223       <pre class="propdef">

   224         Name: transition-property

   225         Value: ''transition-property/none'' | <<single-transition-property>>#

   226         Initial: ''transition-property/all''

   227         Applies to: all elements, ::before and ::after pseudo elements

   228         Inherited: no

   229         Animatable: no

   230         Percentages: N/A

   231         Media: visual

   232         Computed value: Same as specified value.

   233         Canonical order: <abbr title="follows order of property value definition">per grammar</abbr>

   234       </pre>

   236       <div class="prod">

   237         <dfn type id="single-transition-property">&lt;single-transition-property&gt;</dfn> = ''transition-property/all'' | <<custom-ident>>;

   238       </div>

   240       <p>

   241         A value of

   242         <dfn value for="transition-property">none</dfn>

   243         means that no property will transition.

   244         Otherwise, a list of properties to be transitioned, or the

   245         keyword <dfn value for="transition-property">all</dfn>

   246         which indicates that all properties are to be

   247         transitioned, is given.

   248       </p>

   250       <p>

   251         If one of the identifiers listed is not a recognized property

   252         name or is not an animatable property, the implementation must

   253         still start transitions on the animatable properties in the

   254         list using the duration, delay, and timing function at their

   255         respective indices in the lists for 'transition-duration',

   256         'transition-delay', and 'transition-timing-function'.  In other

   257         words, unrecognized or non-animatable properties must be kept in

   258         the list to preserve the matching of indices.

   259       </p>

   261       <p>

   262         The <<custom-ident>> production in <<single-transition-property>>

   263         also excludes the keyword ''transition-property/none'',

   264         in addition to the keywords always excluded from <<custom-ident>>.

   265         This means that

   266         ''transition-property/none'', ''inherit'', and ''initial'' are not

   267         permitted as items within a list of more that one identifier;

   268         any list that uses them is syntactically invalid.

   269       </p>

   271       <p>

   272         For the keyword ''transition-property/all'',

   273         or if one of the identifiers listed is a

   274         shorthand property, implementations must start transitions for

   275         any of its longhand sub-properties that are animatable (or, for

   276         ''transition-property/all'', all animatable properties), using the duration, delay,

   277         and timing function at the index corresponding to the shorthand.

   278       </p>

   279       <p>

   280         If a property is specified multiple times in the value of

   281         'transition-property' (either on its own, via a shorthand that

   282         contains it, or via the ''transition-property/all'' value), then the transition that

   283         starts uses the duration, delay, and timing function at the

   284         index corresponding to the <em>last</em> item in the value of

   285         'transition-property' that calls for animating that property.

   286       </p>

   287       <p class="note">

   288         Note:  The ''transition-property/all'' value and 'all' shorthand

   289         property work in similar ways, so the

   290         ''transition-property/all'' value is just like a shorthand that

   291         covers all properties.

   292       </p>

   294 <span id="the-transition-duration-property-">The 'transition-duration' Property</span> {#transition-duration-property}

   295 ----------------------------------------------------------------------------------------------------------------------

   297       <p>

   298         The 'transition-duration' property defines the length of time that a transition takes.

   299       </p>

   300       <pre class="propdef">

   301         Name: transition-duration

   302         Value: <<time>>#

   303         Initial: ''0s''

   304         Applies to: all elements, ::before and ::after pseudo elements

   305         Inherited: no

   306         Animatable: no

   307         Percentages: N/A

   308         Media: interactive

   309         Computed value: Same as specified value.

   310         Canonical order: <abbr title="follows order of property value definition">per grammar</abbr>

   311       </pre>

   312       <p>

   313         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.

   314       </p>

   316 <span id="transition-timing-function_tag">The 'transition-timing-function' Property</span> {#transition-timing-function-property}

   317 ---------------------------------------------------------------------------------------------------------------------------------

   319       <p>

   320         The 'transition-timing-function' property

   321         describes how the intermediate values used during a transition will be

   322         calculated. It allows for a transition to change speed over its

   323         duration. These effects are commonly called <em>easing</em> functions.

   324         In either case, a mathematical function that provides a smooth curve is

   325         used.

   326       </p>

   327       <p>

   328         Timing functions are either defined as a stepping function or

   329         a <a

   330         href="http://en.wikipedia.org/wiki/B%C3%A9zier_curve#Cubic_B.C3.A9zier_curves">cubic

   331         B&eacute;zier curve</a>.

   332         The timing function takes as its input

   333         the current elapsed percentage of the transition duration

   334         and outputs the percentage of the way the transition is

   335         from its start value to its end value.

   336         How this output is used is defined by

   337         the <a href="#animatable-types">interpolation rules</a>

   338         for the value type.

   339       </p>

   340       <p>

   341         A <a href="http://en.wikipedia.org/wiki/Step_function">stepping</a>

   342         function is defined by a number that divides the domain of operation

   343         into equally sized intervals. Each subsequent interval is a equal step

   344         closer to the goal state. The function also specifies whether the

   345         change in output percentage happens at the start or end of the

   346         interval (in other words, if 0% on the input percentage is the point

   347         of initial change).

   348       </p>

   349       <div class="figure">

   350         <img src="step.png" alt="The step timing function splits

   351           the function domain into a number of disjoint straight line

   352           segments. steps(1, start) is a function whose

   353           output value is 1 for all input values. steps(1, end) is a function whose

   354           output value is 0 for all input values less than 1, and output

   355           is 1 for the input value of 1. steps(3, start) is a function that

   356           divides the input domain into three segments, each 1/3 in length,

   357           and 1/3 above the previous segment, with the first segment starting

   358           at 1/3. steps(3, end) is a function that

   359           divides the input domain into three segments, each 1/3 in length,

   360           and 1/3 above the previous segment, with the first segment starting

   361           at 0.">

   362       </div>

   363       <p class="caption">

   364         Step timing functions

   365       </p>

   366       <p>

   367         A <a

   368         href="http://en.wikipedia.org/wiki/B%C3%A9zier_curve#Cubic_B.C3.A9zier_curves">cubic

   369         B&eacute;zier curve</a> is defined by four control points, P<sub>0</sub>

   370         through P<sub>3</sub> (see Figure 1). P<sub>0</sub> and P<sub>3</sub>

   371         are always set to (0,0) and (1,1). The 'transition-timing-function' property is used

   372         to specify the values for points P<sub>1</sub> and P<sub>2</sub>. These

   373         can be set to preset values using the keywords listed below, or can be

   374         set to specific values using the ''cubic-bezier()'' function.

   375         In the ''cubic-bezier()'' function, P<sub>1</sub> and

   376         P<sub>2</sub> are each specified by both an X and Y value.

   377       </p>

   378       <div class="figure">

   379         <img src="TimingFunction.png" alt="The B&eacute;zier timing function is a

   380           smooth curve from point P0 = (0,0) to point P3 = (1,1). The

   381           length and orientation of the line segment P0-P1 determines

   382           the tangent and the curvature of the curve at P0 and the

   383           line segment P2-P3 does the same at P3.">

   384       </div>

   385       <p class="caption">

   386         B&eacute;zier Timing Function Control Points

   387       </p>

   388       <pre class="propdef">

   389         Name: transition-timing-function

   390         Value: <<single-transition-timing-function>>#

   391         Initial: ''transition-timing-function/ease''

   392         Applies to: all elements, ::before and ::after pseudo elements

   393         Inherited: no

   394         Animatable: no

   395         Percentages: N/A

   396         Media: interactive

   397         Computed value: Same as specified value.

   398         Canonical order: <abbr title="follows order of property value definition">per grammar</abbr>

   399       </pre>

   400       <div class="prod">

   401         <dfn type 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'' | <a lt="steps()" function>steps</a>(<<integer>>[, [ ''start'' | ''end'' ] ]?) | <a lt="cubic-bezier()" function>cubic-bezier</a>(<<number>>, <<number>>, <<number>>, <<number>>)

   402       </div>

   403       <p>

   404         The timing functions have the following definitions.

   405       </p>

   406       <dl dfn-type="value" dfn-for="transition-timing-function, <single-transition-timing-function>">

   407         <dt><dfn>ease</dfn></dt>

   408         <dd>

   409           The ease function is equivalent to <a lt="cubic-bezier()" function>cubic-bezier(0.25, 0.1, 0.25, 1)</a>.

   410         </dd>

   411         <dt><dfn>linear</dfn></dt>

   412         <dd>

   413           The linear function is equivalent to <a lt="cubic-bezier()" function>cubic-bezier(0, 0, 1, 1)</a>.

   414         </dd>

   415         <dt><dfn>ease-in</dfn></dt>

   416         <dd>

   417           The ease-in function is equivalent to <a lt="cubic-bezier()" function>cubic-bezier(0.42, 0, 1, 1)</a>.

   418         </dd>

   419         <dt><dfn>ease-out</dfn></dt>

   420         <dd>

   421           The ease-out function is equivalent to <a lt="cubic-bezier()" function>cubic-bezier(0, 0, 0.58, 1)</a>.

   422         </dd>

   423         <dt><dfn>ease-in-out</dfn></dt>

   424         <dd>

   425           The ease-in-out function is equivalent to <a lt="cubic-bezier()" function>cubic-bezier(0.42, 0, 0.58, 1)</a>.

   426         </dd>

   427         <dt><dfn>step-start</dfn></dt>

   428         <dd>

   429           The step-start function is equivalent to <a lt="steps()" function>steps(1, start)</a>.

   430         </dd>

   431         <dt><dfn>step-end</dfn></dt>

   432         <dd>

   433           The step-end function is equivalent to <a lt="steps()" function>steps(1, end)</a>.

   434         </dd>

   435         <dt><dfn function lt="steps()">steps(<<integer>>[, [ start | end ] ]?)</dfn></dt>

   436         <dd>

   437           Specifies a stepping function, described above, taking two

   438           parameters. The first parameter specifies the number of intervals

   439           in the function. It must be a positive integer (greater than 0).

   440           The second parameter, which is optional, is

   441           either the value <dfn value for="steps()">start</dfn> or <dfn value for="steps()">end</dfn>, and specifies the point

   442           at which the change of values occur within the interval.

   443           If the second parameter is omitted, it is given the value ''end''.

   444         </dd>

   445         <dt><dfn function lt="cubic-bezier()">cubic-bezier(<<number>>, <<number>>, <<number>>, <<number>>)</dfn></dt>

   446         <dd>

   447           Specifies a <a

   448           href="http://en.wikipedia.org/wiki/B%C3%A9zier_curve">cubic-bezier

   449           curve</a>. The four values specify points P<sub>1</sub> and

   450           P<sub>2</sub> of the curve as (<var>x1</var>, <var>y1</var>, <var>x2</var>, <var>y2</var>). Both x values must be

   451           in the range [0, 1] or the definition is invalid. The y values can

   452           exceed this range.

   453         </dd>

   454       </dl>

   456 ### Serializing a timing function ### {#serializing-a-timing-function}

   458       Timing functions are serialized using the common serialization patterns

   459       defined in [[CSSOM]] with the following additional requirements:

   461       *   The keyword values ''ease'', ''linear'', ''ease-in'', ''ease-out'',

   462           and ''ease-in-out'' are serialized as-is, that is, they are

   463           <em>not</em> converted to the equivalent ''cubic-bezier()''

   464           function before serializing.

   466       *   Step timing functions, whether they are specified using the

   467           ''steps()'' function or either of the ''step-start'' or ''step-end''

   468           keywords, are serialized as follows:

   470           1.   If the point at which the value changes is ''end'', serialize

   471                as <a lt="steps()" function>steps(&lt;integer&gt;)</a>.

   473           2.   Otherwise, serialize as <a lt="steps()"

   474                function>steps(&lt;integer&gt;, start)</a>.

   476 <span id="the-transition-delay-property-">The 'transition-delay' Property</span> {#transition-delay-property}

   477 -------------------------------------------------------------------------------------------------------------

   479       <p>

   480         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.

   481       </p>

   482       <p>

   483         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.

   484       </p>

   485       <pre class="propdef">

   486         Name: transition-delay

   487         Value: <<time>>#

   488         Initial: ''0s''

   489         Applies to: all elements, ::before and ::after pseudo elements

   490         Inherited: no

   491         Animatable: no

   492         Percentages: N/A

   493         Media: interactive

   494         Computed value: Same as specified value.

   495         Canonical order: <abbr title="follows order of property value definition">per grammar</abbr>

   496       </pre>

   498 <span id="the-transition-shorthand-property-">The 'transition' Shorthand Property</span> {#transition-shorthand-property}

   499 -------------------------------------------------------------------------------------------------------------------------

   501       <p>

   502         The 'transition' shorthand property combines the four properties described above into a single property.

   503       </p>

   504       <pre class="propdef">

   505         Name: transition

   506         Value: <<single-transition>>#

   507         Initial: see individual properties

   508         Applies to: all elements, ::before and ::after pseudo elements

   509         Inherited: no

   510         Animatable: no

   511         Percentages: N/A

   512         Media: interactive

   513         Computed value: see individual properties

   514         Canonical order: <abbr title="follows order of property value definition">per grammar</abbr>

   515       </pre>

   517       <div class="prod">

   518         <dfn type id="single-transition">&lt;single-transition&gt;</dfn> = [ ''transition-property/none'' | <<single-transition-property>> ] || <<time>> || <<single-transition-timing-function>> || <<time>>

   519       </div>

   521       <p>

   522         Note that order is important within the items in this property:

   523         the first value that can be parsed as a time is assigned to the

   524         transition-duration,

   525         and the second value that can be parsed as a time is assigned to

   526         transition-delay.

   527       </p>

   529       <p>

   530         If there is more than one <<single-transition>> in the shorthand,

   531         and any of the transitions has

   532         ''transition-property/none'' as the <<single-transition-property>>,

   533         then the declaration is invalid.

   534       </p>

   536 Starting of transitions {#starting}

   537 ===================================

   539       <p>

   540         Implementations must maintain a set of

   541         <dfn export lt="running transition">running transitions</dfn>,

   542         each of which applies to a specific element and non-shorthand

   543         property.  Each of these transitions also has a

   544         <dfn export for="transition">start time</dfn>, <dfn export for="transition">end time</dfn>,

   545         <dfn export for="transition">start value</dfn>, <dfn export for="transition">end value</dfn>,

   546         <dfn export for="transition">reversing-adjusted start value</dfn>, and <dfn export for="transition">reversing shortening factor</dfn>.

   547         Transitions are added to this set as described in this section,

   548         and are removed from this set

   549         when they <a>complete</a>

   550         or when implementations are required to <dfn export for="transition">cancel</dfn> them.

   551         <span class="note">

   552           For the rationale behind the <a>reversing-adjusted start value</a>

   553           and <a>reversing shortening factor</a>, see [[#reversing]].

   554         </span>

   555       </p>

   557       <p>

   558         Implementations must also maintain a set of

   559         <dfn export lt="completed transition">completed transitions</dfn>,

   560         each of which

   561         (like <a>running transitions</a>)

   562         applies to a specific element and non-shorthand property.

   563         <span class="note">

   564           This specification maintains the invariant that

   565           there is never both a <a>running transition</a> and

   566           a <a>completed transition</a> for the same property and element.

   567         </span>

   568       </p>

   570       <p>

   571         If an element is no longer in the document,

   572         implementations must remove transitions on it

   573         from the <a>running transitions</a> and the

   574         <a>completed transitions</a>.

   575       </p>

   577       <div class="note">

   579         <p>

   580           This set of completed transitions

   581           needs to be maintained

   582           in order to prevent

   583           transitions from repeating themselves in certain cases,

   584           i.e., to maintain the invariant

   585           that this specification tries to maintain

   586           that unrelated style changes do not trigger transitions.

   587         </p>

   589         <p class="example">

   590           An example where maintaining the set of completed transitions

   591           is necessary would be a transition on

   592           an inherited property,

   593           where the parent specifies a transition of that property for

   594           a longer duration (say, ''transition: 4s text-indent'')

   595           and a child element that inherits the parent's value specifies

   596           a transition of the same property for a shorter duration

   597           (say, ''transition: 1s text-indent'').

   598           Without the maintenance of this set of completed transitions,

   599           implementations could start additional transitions on the child

   600           after the initial 1 second transition on the child completes.

   601         </p>

   603       </div>

   605       <p>

   606         Various things can cause the <a>computed values</a> of properties

   607         on an element to change.

   608         These include

   609         insertion and removal of elements from the document tree

   610         (which both changes whether those elements have <a>computed values</a> and

   611         can change the styles of other elements through selector matching),

   612         changes to the document tree that cause

   613         changes to which selectors match elements,

   614         changes to style sheets or style attributes,

   615         and other things.

   616         This specification does not define when <a>computed values</a> are updated,

   617         beyond saying that implementations must not

   618         use, present, or display something resulting from the CSS

   619         cascading, value computation, and inheritance process [[!CSS3CASCADE]]

   620         without updating the <a>computed value</a>

   621         (which means merely that implementations cannot avoid

   622         meeting requirements of this specification

   623         by claiming not to have updated the <a>computed value</a>

   624         as part of handling a style change).

   625         However,

   626         when an implementation updates the <a>computed value</a> of a

   627         property on an element

   628         to reflect one of these changes,

   629         or computes the <a>computed value</a> of a property on an element

   630         newly added to the document,

   631         it must update the <a>computed value</a>

   632         for all properties and elements to reflect all

   633         of these changes at the same time

   634         (or at least it must be undetectable that it was done at a

   635         different time).

   636         This processing of a set of simultaneous style changes is called a

   637         <dfn export>style change event</dfn>.

   638         (Implementations typically have a <a>style change event</a> to

   639         correspond with their desired screen refresh rate,

   640         and when up-to-date computed style or layout information is needed

   641         for a script API that depends on it.)

   642       </p>

   644       <p>

   645         Since this specification does not define

   646         when a <a>style change event</a> occurs,

   647         and thus what changes to computed values are considered simultaneous,

   648         authors should be aware that changing any of the transition

   649         properties a small amount of time after making a change that

   650         might transition can result in behavior that varies between

   651         implementations, since the changes might be considered

   652         simultaneous in some implementations but not others.

   653       </p>

   655       <p>

   656         When a <a>style change event</a> occurs,

   657         implementations must start transitions based on

   658         the <a>computed values</a> that changed in that event.

   659         If an element is not in the document during that

   660         style change even or was not in the document during

   661         the previous style change event,

   662         then transitions are not started for that element

   663         in that style change event.

   664         Otherwise,

   665         define the <dfn export>before-change style</dfn> as

   666         the <a>computed values</a> of all properties on the element as of

   667         the previous <a>style change event</a>,

   668         except with any styles derived from declarative

   669         animations such as CSS Transitions, CSS Animations

   670         ([[CSS3-ANIMATIONS]]),

   671         and SMIL Animations ([[SMIL-ANIMATION]], [[SVG11]])

   672         updated to the current time.

   673         Likewise, define the <dfn export>after-change style</dfn> as

   674         the <a>computed values</a> of all properties

   675         on the element based on the information

   676         known at the start of that <a>style change event</a>,

   677         but excluding any styles from CSS Transitions in the computation,

   678         and inheriting from

   679         the <a>after-change style</a> of the parent.

   680       </p>

   682       <div class="note">

   683         <p>

   684           Note that this definition of the <a>after-change style</a>

   685           means that a single change

   686           can start a transition on the same property

   687           on both an ancestor element and its descendant element.

   688           This can happen when a property change is inherited

   689           from one element with 'transition-*' properties

   690           that say to animate the changing property

   691           to another element with 'transition-*' properties

   692           that also say to animate the changing property.

   693         </p>

   695         <p>

   696           When this happens, both transitions will run,

   697           and the transition on the descendant will override

   698           the transition on the ancestor

   699           because of the normal

   700           CSS cascading and inheritance rules ([[CSS3CASCADE]]).

   701         </p>

   703         <p>

   704           If the transition on the descendant completes before

   705           the transition on the ancestor,

   706           the descendant will then resume inheriting

   707           the (still transitioning) value from its parent.

   708           This effect is likely not a desirable effect,

   709           but it is essentially doing what the author asked for.

   710         </p>

   711       </div>

   713       <p>

   714         For each element with a <a>before-change style</a> and

   715         an <a>after-change style</a>,

   716         and each property (other than shorthands),

   717         define the <dfn export>matching transition-property value</dfn> as

   718         the last value in the

   719         'transition-property' in the element's <a>after-change style</a>

   720         that matches the property,

   721         as described in

   722         [[#transition-property-property]].

   723         If there is such a value, then corresponding to it, there is

   724         a <dfn export>matching transition duration</dfn>,

   725         a <dfn export>matching transition delay</dfn>, and

   726         a <dfn export>matching transition timing function</dfn>

   727         in the values in the <a>after-change style</a> of

   728         'transition-duration', 'transition-delay', and 'transition-timing-function'

   729         (see <a href="#list-matching">the rules on matching lists</a>).

   730         Define the <dfn export for="transition">combined duration</dfn> of the transition

   731         as the sum of max(<a>matching transition duration</a>, ''0s'') and

   732         the <a>matching transition delay</a>.

   733         For each element and property, the implementation must act

   734         as follows:

   735       </p>

   737       <ol>

   738       <li>

   739         If all of the following are true:

   740         <ul>

   741           <li>

   742             the element does not have

   743             a <a>running transition</a> for the property,

   744           </li>

   745           <li>

   746             the <a>before-change style</a> is different from

   747             and can be interpolated with

   748             the <a>after-change style</a> for that property,

   749           </li>

   750           <li>

   751             the element does not have a <a>completed transition</a>

   752             for the property

   753             or the <a>end value</a> of the <a>completed transition</a>

   754             is different from the <a>after-change style</a> for the property,

   755           </li>

   756           <li>

   757             there is a <a>matching transition-property value</a>, and

   758           </li>

   759           <li>

   760             the <a>combined duration</a> is greater than ''0s'',

   761           </li>

   762         </ul>

   763         then implementations must

   764         remove the <a>completed transition</a> (if present) from the set

   765         of completed transitions and

   766         start a transition whose:

   767         <ul>

   768           <li>

   769             <a>start time</a> is

   770             the time of the <a>style change event</a> plus

   771             the <a>matching transition delay</a>,

   772           </li>

   773           <li>

   774             <a>end time</a> is

   775             the <a>start time</a> plus

   776             the <a>matching transition duration</a>,

   777           </li>

   778           <li>

   779             <a>start value</a> is

   780             the value of the transitioning property

   781             in the <a>before-change style</a>,

   782           </li>

   783           <li>

   784             <a>end value</a> is

   785             the value of the transitioning property

   786             in the <a>after-change style</a>,

   787           </li>

   788           <li>

   789             <a>reversing-adjusted start value</a> is the same as

   790             the <a>start value</a>, and

   791           <li>

   792             <a>reversing shortening factor</a> is 1.

   793           </li>

   794         </ul>

   795       </li>

   796       <li>

   797         Otherwise,

   798         if the element has a <a>completed transition</a> for the property

   799         and the <a>end value</a> of the <a>completed transition</a>

   800         is different from the <a>after-change style</a> for the property,

   801         then implementations must

   802         remove the <a>completed transition</a> from the set of

   803         <a>completed transitions</a>.

   804       </li>

   805       <li>

   806         If the element has a <a>running transition</a> or

   807         <a>completed transition</a> for the property,

   808         and there is <strong>not</strong>

   809         a <a>matching transition-property value</a>,

   810         then implementations must

   811         <a>cancel</a> the <a>running transition</a>

   812         or remove the <a>completed transition</a> from the set of

   813         <a>completed transitions</a>.

   814       </li>

   815       <li>

   816         If the element has a <a>running transition</a> for the property,

   817         there is a <a>matching transition-property value</a>,

   818         and the <a>end value</a> of the <a>running transition</a> is

   819         <strong>not</strong> equal to the value of the property in the

   820         <a>after-change style</a>, then:

   821         <ol>

   822           <li>

   823             If the <a>current value</a> of the property

   824             in the <a>running transition</a>

   825             is equal to

   826             the value of the property in the <a>after-change style</a>,

   827             or if these two values cannot be interpolated,

   828             then implementations must

   829             <a>cancel</a> the <a>running transition</a>.

   830           </li>

   831           <li>

   832             Otherwise, if the <a>combined duration</a> is

   833             less than or equal to ''0s'',

   834             or if the

   835             <a>current value</a> of the property in the <a>running transition</a>

   836             cannot be interpolated with

   837             the value of the property in the <a>after-change style</a>,

   838             then implementations must

   839             <a>cancel</a> the <a>running transition</a>.

   840           </li>

   841           <li>

   842             Otherwise, if the <a>reversing-adjusted start value</a>

   843             of the <a>running transition</a> is the same as the value of

   844             the property in the <a>after-change style</a>

   845             <span class="note">(see the

   846             <a href="#reversing">section on reversing of

   847             transitions</a> for why these case exists)</span>,

   848             implementations must

   849             <a>cancel</a> the <a>running transition</a> and

   850             start a new transition whose:

   851             <ul>

   852               <li>

   853                 <a>reversing-adjusted start value</a> is

   854                 the <a>end value</a> of the

   855                 <a>running transition</a>

   856                 <span class="note">(Note: This represents the logical start state of

   857                 the transition, and allows some calculations to ignore that

   858                 the transition started before that state was reached, which

   859                 in turn allows repeated reversals of the same transition to

   860                 work correctly),</span>

   861               <li>

   862                 <a>reversing shortening factor</a>

   863                 is the absolute value, clamped to the range [0, 1],

   864                 of the sum of:

   865                 <ol>

   866                   <li>the output of the timing function of the old transition

   867                   at the time of the <a>style change event</a>,

   868                   times the <a>reversing shortening factor</a> of the

   869                   old transition</li>

   870                   <li>1 minus the <a>reversing shortening factor</a> of

   871                   the old transition.</li>

   872                 </ol>

   873                 <span class="note">Note: This represents the portion of the

   874                 space between the <a>reversing-adjusted start value</a>

   875                 and the <a>end value</a> that the old transition has

   876                 traversed (in amounts of the value, not time), except with the

   877                 absolute value and clamping to handle timing functions that

   878                 have y1 or y2 outside the range [0, 1].</span>

   879               </li>

   880               <li>

   881                 <a>start time</a> is

   882                 the time of the <a>style change event</a> plus:

   883                 <ol>

   884                   <li>if the <a>matching transition delay</a>

   885                       is nonnegative,

   886                       the <a>matching transition delay</a>, or

   887                   <li>if the <a>matching transition delay</a>

   888                       is negative,

   889                       the product of

   890                       the new transition's

   891                       <a>reversing shortening factor</a> and

   892                       the <a>matching transition delay</a>,

   893                 </ol>

   894               </li>

   895               <li>

   896                 <a>end time</a> is

   897                 the <a>start time</a> plus the product of

   898                 the <a>matching transition duration</a> and

   899                 the new transition's <a>reversing shortening factor</a>,

   900               </li>

   901               <li>

   902                 <a>start value</a> is

   903                 the <a>current value</a> of the property

   904                 in the <a>running transition</a>,

   905               </li>

   906               <li>

   907                 <a>end value</a> is

   908                 the value of the property

   909                 in the <a>after-change style</a>,

   910               </li>

   911             </ul>

   912           </li>

   913           <li>

   914             Otherwise, implementations must

   915             <a>cancel</a> the <a>running transition</a>

   916             and start a new transition whose:

   917             <ul>

   918               <li>

   919                 <a>start time</a> is

   920                 the time of the <a>style change event</a> plus

   921                 the <a>matching transition delay</a>,

   922               </li>

   923               <li>

   924                 <a>end time</a> is

   925                 the <a>start time</a> plus

   926                 the <a>matching transition duration</a>,

   927               </li>

   928               <li>

   929                 <a>start value</a> is

   930                 the <a>current value</a> of the property

   931                 in the <a>running transition</a>,

   932               </li>

   933               <li>

   934                 <a>end value</a> is

   935                 the value of the property

   936                 in the <a>after-change style</a>,

   937               </li>

   938               <li>

   939                 <a>reversing-adjusted start value</a> is the same as

   940                 the <a>start value</a>, and

   941               <li>

   942                 <a>reversing shortening factor</a> is 1.

   943               </li>

   944             </ul>

   945           </li>

   946         </ol>

   947       </li>

   949       </ol>

   951       <div class="note">

   952         <p>

   953           Note that the above rules mean that

   954           when the computed value of an animatable property changes,

   955           the transitions that start are based on the

   956           values of the 'transition-property', 'transition-duration',

   957           'transition-timing-function', and 'transition-delay' properties

   958           at the time the animatable property would first have its new

   959           computed value.

   960           This means that when one of these 'transition-*' properties

   961           changes at the same time as

   962           a property whose change might transition,

   963           it is the <em>new</em> values of the 'transition-*' properties

   964           that control the transition.

   965         </p>

   966         <div class="example" id="manual-reversing-example">

   967           <p style="display:none">

   968             Example(s):

   969           </p>

   970           <p>This provides a way for authors to specify different values

   971           of the 'transition-*' properties for the &ldquo;forward&rdquo;

   972           and &ldquo;reverse&rdquo; transitions,

   973           when the transitions are between two states

   974           (but see <a

   975           href="#reversing">below</a> for special reversing behavior when

   976           an <em>incomplete</em> transition is interrupted).  Authors can

   977           specify the value of 'transition-duration',

   978           'transition-timing-function', or 'transition-delay' in the same

   979           rule where they specify the value that triggers the transition,

   980           or can change these properties at the same time as they change

   981           the property that triggers the transition.  Since it's the new

   982           values of these 'transition-*' properties that affect the

   983           transition, these values will be used for the transitions

   984           <em>to</em> the associated transitioning values.  For example:

   985            </p>

   986           <pre>

   987   li {

   988     transition: background-color linear 1s;

   989     background: blue;

   990   }

   991   li:hover {

   992     background-color: green;

   993     transition-duration: 2s; /* applies to the transition *to* the :hover state */

   994   }</pre>

   995           <p>

   996             When a list item with these style rules enters the :hover

   997             state, the computed 'transition-duration' at the time that

   998             'background-color' would have its new value (''green'') is ''2s'',

   999             so the transition from ''blue'' to ''green'' takes 2 seconds.

  1000             However, when the list item leaves the :hover state, the

  1001             transition from ''green'' to ''blue'' takes 1 second.

  1002           </p>

  1003         </div>

  1004       </div>

  1006       <p class="note">

  1007         Note that once the transition of a property has started

  1008         (including being in its delay phase),

  1009         it continues running based on

  1010         the original timing function, duration, and

  1011         delay, even if the 'transition-timing-function',

  1012         'transition-duration', or 'transition-delay' property changes

  1013         before the transition is complete.  However, if the

  1014         'transition-property' property changes such that the transition

  1015         would not have started, the transition stops (and the

  1016         property immediately changes to its final value).

  1017       </p>

  1019       <p class="note">

  1020         Note that above rules mean that

  1021         transitions do not start when the computed

  1022         value of a property changes as a result of declarative animation

  1023         (as opposed to scripted animation).

  1024         This happens because the before-change style includes up-to-date

  1025         style for declarative animations.

  1026       </p>

  1028 Faster reversing of interrupted transitions {#reversing}

  1029 --------------------------------------------------------

  1031       <div class="note">

  1033       <p>

  1034         Many common transitions effects involve transitions between two states,

  1035         such as the transition that occurs when the mouse pointer moves

  1036         over a user interface element, and then later moves out of that element.

  1037         With these effects, it is common for a running transition

  1038         to be interrupted before it completes,

  1039         and the property reset to the starting value of that transition.

  1040         An example is a hover effect on an element,

  1041         where a transition starts when the pointer enters the element,

  1042         and then the pointer exits the element before the effect has completed.

  1043         If the outgoing and incoming transitions

  1044         are executed using their specified durations and timing functions,

  1045         the resulting effect can be distractingly asymmetric

  1046         because the second transition

  1047         takes the full specified time to move a shortened distance.

  1048         Instead, this specification makes second transition shorter.

  1049       </p>

  1051       <p>

  1052         The mechanism the above rules use to cause this involves the

  1053         <a>reversing shortening factor</a> and the

  1054         <a>reversing-adjusted start value</a>.

  1055         In particular, the reversing behavior is present whenever

  1056         the <a>reversing shortening factor</a> is less than 1.

  1057       </p>

  1059       <p class="note">

  1060         Note that these rules do not fully address the problem for

  1061         transition patterns that involve more than two states.

  1062       </p>

  1064       <p class="note">

  1065         Note that these rules lead to the entire timing function of the

  1066         new transition being used, rather than jumping into the middle

  1067         of a timing function, which can create a jarring effect.

  1068       </p>

  1070       <p class="note">

  1071         This was one of several possibilities that was considered by the

  1072         working group.  See the

  1073         <a href="transition-reversing-demo">reversing demo</a>

  1074         demonstrating a number of them, leading to a working group

  1075         resolution made on 2013-06-07 and edits made on 2013-11-11.

  1076       </p>

  1078       </div>

  1080 Application of transitions {#application}

  1081 =========================================

  1083       <p>

  1084         When a property on an element is undergoing a transition

  1085         (that is, when or after the transition has started and before the

  1086         <a>end time</a> of the transition)

  1087         the transition adds a style called the <dfn export>current value</dfn>

  1088         to the CSS cascade

  1089         at the level defined for CSS Transitions in [[!CSS3CASCADE]].

  1090       </p>

  1092       <p class="note">

  1093         Note that this means that computed values

  1094         resulting from CSS transitions

  1095         can inherit to descendants just like

  1096         any other computed values.

  1097         In the normal case, this means that

  1098         a transition of an inherited property

  1099         applies to descendant elements

  1100         just as an author would expect.

  1101       </p>

  1103       <p>

  1104         Implementations must add this value to the cascade

  1105         if and only if

  1106         that property is not currently

  1107         undergoing a CSS Animation ([[!CSS3-ANIMATIONS]]) on the same element.

  1108       </p>

  1110       <p class="note">

  1111         Note that this behavior of transitions not applying to the cascade

  1112         when an animation on the same element and property is running

  1113         does not affect whether the transition has started or ended.

  1114         APIs that detect whether transitions are running

  1115         (such as <a href="#transition-events">transition events</a>)

  1116         still report that a transition is running.

  1117       </p>

  1119       <p>

  1120         If the current time is at or before the

  1121         <a>start time</a> of the transition

  1122         (that is, during the delay phase of the transition),

  1123         the <a>current value</a> is a specified style that will compute

  1124         to the <a>start value</a> of the transition.

  1125       </p>

  1127       <p>

  1128         If the current time is after the

  1129         <a>start time</a> of the transition

  1130         (that is, during the duration phase of the transition),

  1131         the <a>current value</a> is a specified style that will compute

  1132         to the <a href="#animatable-types">result of interpolating the property</a>

  1133         using the <a>start value</a> of the transition as

  1134         <var>V</var><sub>start</sub>,

  1135         using the <a>end value</a> of the transition as

  1136         <var>V</var><sub>end</sub>,

  1137         and using (current time - start time) / (end time - start time)

  1138         as the input to the timing function.

  1139       </p>

  1141 Completion of transitions {#complete}

  1142 =====================================

  1144       <p>

  1145         <a>Running transitions</a>

  1146         <dfn export for="transition" id="dfn-complete">complete</dfn>

  1147         at a time that equal to or after their end time,

  1148         but prior to to the first <a>style change event</a>

  1149         whose time is equal to or after their <a>end time</a>.

  1150         When a transition completes,

  1151         implementations must move

  1152         all transitions that complete at that time

  1153         from the set of <a>running transitions</a>

  1154         to the set of <a>completed transitions</a>

  1155         and then fire the <a href="#transition-events">events</a>

  1156         for those completions.

  1157         <span class="note">(Note that doing otherwise, that is,

  1158         firing some of the events before doing all of the moving

  1159         from <a>running transitions</a> to <a>completed transitions</a>,

  1160         could allow

  1161         a style change event to happen

  1162         without the necessary transitions completing,

  1163         since firing the event could cause a style change event,

  1164         if an event handler requests up-to-date computed style or

  1165         layout data.)</span>

  1166       </p>

  1168 <span id="transition-events-">Transition Events</span> {#transition-events}

  1169 ===========================================================================

  1170       <p>

  1171         The completion of a CSS Transition generates a corresponding <a href="https://www.w3.org/TR/DOM-Level-2-Events/events.html">DOM Event</a>.

  1172         An event is <a>dispatched</a> to the element

  1173         for each property that undergoes a transition on that element.

  1174         This allows a content developer to perform actions that synchronize

  1175         with the completion of a transition.

  1176       </p>

  1177       <p>

  1178         Each event provides the name of the property the transition is

  1179         associated with as well as the duration of the transition.

  1180       </p>

  1181       <dl>

  1182         <dt>

  1183           <b>Interface <dfn interface id="Events-TransitionEvent">TransitionEvent</dfn></b>

  1184         </dt>

  1185         <dd>

  1186           <p>

  1187             The {{TransitionEvent}} interface provides specific contextual information associated with transitions.

  1188           </p>

  1189           <dl>

  1190             <dt>

  1191               <b>IDL Definition</b>

  1192             </dt>

  1193             <dd>

  1194               <div class='idl-code'>

  1195                 <pre class='idl'>

  1196   [Constructor(DOMString type, optional TransitionEventInit transitionEventInitDict)]

  1197   interface TransitionEvent : Event {

  1198     readonly attribute DOMString          propertyName;

  1199     readonly attribute float              elapsedTime;

  1200     readonly attribute DOMString          pseudoElement;

  1201   };

  1203   dictionary TransitionEventInit : EventInit {

  1204     DOMString propertyName = "";

  1205     float elapsedTime = 0.0;

  1206     DOMString pseudoElement = "";

  1207   };

  1208   </pre>

  1209               </div>

  1210             </dd>

  1211             <dt>

  1212               <b>Attributes</b>

  1213             </dt>

  1214             <dd>

  1215               <dl>

  1216                 <dt>

  1217                   <code class='attribute-name'><dfn attribute for="TransitionEvent" id="Events-TransitionEvent-propertyName">propertyName</dfn></code> of type <code>DOMString</code>, readonly

  1218                 </dt>

  1219                 <dd>

  1220                   The name of the CSS property associated with the transition.

  1221                 </dd>

  1222               </dl>

  1223               <dl>

  1224                 <dt>

  1225                   <code class='attribute-name'><dfn attribute for="TransitionEvent" id="Events-TransitionEvent-elapsedTime">elapsedTime</dfn></code> of type <code>float</code>, readonly

  1226                 </dt>

  1227                 <dd>

  1228                   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>.

  1229                 </dd>

  1230               </dl>

  1231               <dl>

  1232                 <dt>

  1233                   <code class='attribute-name'><dfn attribute for="TransitionEvent" id="Events-TransitionEvent-pseudoElement">pseudoElement</dfn></code> of type <code>DOMString</code>, readonly

  1234                 </dt>

  1235                 <dd>

  1236                   The name (beginning with two colons) of the CSS

  1237                   pseudo-element on which the transition occurred (in

  1238                   which case the target of the event is that

  1239                   pseudo-element's corresponding element), or the empty

  1240                   string if the transition occurred on an element (which

  1241                   means the target of the event is that element).

  1242                 </dd>

  1243               </dl>

  1244             </dd>

  1245           </dl>

  1246           <p>

  1247             <code id="TransitionEvent-constructor">TransitionEvent(type, transitionEventInitDict)</code>

  1248             is an <a>event constructor</a>.

  1249           </p>

  1250         </dd>

  1251       </dl>

  1252       <p>

  1253         There is one type of transition event available.

  1254       </p>

  1255       <dl>

  1256         <dt>

  1257           <b><dfn event for="Element" id="transitionend">transitionend</dfn></b>

  1258         </dt>

  1259         <dd>

  1260           The {{transitionend}} event occurs at the completion of the transition. In the

  1261           case where a transition is removed before completion, such as if the

  1262           transition-property is removed, then the event will not fire.

  1263           <ul>

  1264             <li>Bubbles: Yes

  1265             </li>

  1266             <li>Cancelable: No

  1267             </li>

  1268             <li>Context Info: propertyName, elapsedTime, pseudoElement

  1269             </li>

  1270           </ul>

  1271         </dd>

  1272       </dl>

  1274 Event handlers on elements, <code>Document</code> objects, and <code>Window</code> objects {#event-handlers-on-elements-document-objects-and-window-objects}

  1275 ---------------------------------------------------------------------------

  1277 The <dfn>ontransitionend</dfn> <a>event handler</a> (corresponding to the <a

  1278 idl>transitionend</a> <a>event handler event type</a>) must be supported by all

  1279 <a>HTML elements</a>, as both <a>event handler content attributes</a> and

  1280 <a>event handler IDL attributes</a>; and must be supported by all {{Document}}

  1281 and {{Window}} objects, as <a>event handler IDL attributes</a>.

  1284 DOM Interfaces {#interface-dom}

  1285 ===============================

  1287 This specification extends the {{GlobalEventHandlers}} interface from HTML to

  1288 add <a>event handler IDL attributes</a> for <a

  1289 href="#transition-events">transition events</a> as defined in [[#event-handlers-on-elements-document-objects-and-window-objects]].

  1291 IDL Definition {#interface-globaleventhandlers-idl}

  1292 --------------

  1294 <pre class="idl">

  1295 partial interface GlobalEventHandlers {

  1296   attribute EventHandler ontransitionend;

  1297 };

  1298 </pre>

  1301 <span id="animation-of-property-types-">Animation of property types</span> {#animatable-types}

  1302 ==============================================================================================

  1304       <p>

  1305         Some property types can be interpolated,

  1306         which means they can animate smoothly from one value to another.

  1307         Other property types cannot, and thus animate only in a single

  1308         step from one value to the other.

  1309       </p>

  1311 Animation of interpolated property types {#interpolated-types}

  1312 --------------------------------------------------------------

  1314       <p>

  1315         When interpolating between two values,

  1316         <var>V</var><sub>start</sub> and <var>V</var><sub>end</sub>,

  1317         interpolation is done using the output <var>p</var> of the timing function,

  1318         which gives the portion of the value space

  1319         that the interpolation has crossed.

  1320         Thus the result of the interpolation is

  1321         <var>V</var><sub>res</sub> =

  1322           (1 - <var>p</var>) &sdot; <var>V</var><sub>start</sub> +

  1323           <var>p</var> &sdot; <var>V</var><sub>end</sub>.

  1324       </p>

  1326       <p>

  1327         However, if this value (<var>V</var><sub>res</sub>)

  1328         is outside the allowed range of values for the property,

  1329         then it is clamped to that range.

  1330         This can occur if <var>p</var> is outside of the range 0 to 1,

  1331         which can occur if a timing function is specified

  1332         with a <var>y1</var> or <var>y2</var> that is outside the range 0 to 1.

  1333       </p>

  1335       <p>

  1336         The following describes how each property type undergoes transition or

  1337         animation.

  1338       </p>

  1340       <ul>

  1341         <li id="animtype-color">

  1342           <strong>color</strong>: interpolated via red, green, blue and alpha

  1343           components (treating each as a number, see below).

  1344           The interpolation is done between premultiplied colors

  1345           (that is, colors for which the red, green, and blue components

  1346           specified have been multiplied by the alpha).

  1347         </li>

  1348         <li id="animtype-length">

  1349           <strong>length</strong>: interpolated as real numbers.

  1350         </li>

  1351         <li id="animtype-percentage">

  1352           <strong>percentage</strong>: interpolated as real numbers.

  1353         </li>

  1354         <li id="animtype-lpcalc">

  1355           <strong>length, percentage, or calc</strong>: when both values

  1356           are lengths, interpolated as lengths; when both values are

  1357           percentages, interpolated as percentages; otherwise, both

  1358           values are converted into a ''calc()'' function that is the

  1359           sum of a length and a percentage (each possibly zero), and

  1360           these ''calc()'' functions have each half interpolated as real

  1361           numbers.

  1362         </li>

  1363         <li id="animtype-integer">

  1364           <strong>integer</strong>: interpolated via discrete steps (whole

  1365           numbers). The interpolation happens in real number space and is

  1366           converted to an integer by rounding to the nearest integer, with

  1367           values halfway between a pair of integers rounded towards

  1368           positive infinity.

  1369         </li>

  1370         <li id="animtype-font-weight">

  1371           <strong>font weight</strong>: interpolated via discrete steps

  1372           (multiples of 100). The interpolation happens in real number

  1373           space and is converted to an integer by rounding to the

  1374           nearest multiple of 100, with values halfway between multiples

  1375           of 100 rounded towards positive infinity.

  1376         </li>

  1377         <li id="animtype-number">

  1378           <strong>number</strong>: interpolated as real (floating point)

  1379           numbers.

  1380         </li>

  1381         <li id="animtype-rect">

  1382           <strong>rectangle</strong>: interpolated via the x, y,

  1383           width and height components (treating each as a number).

  1384         </li>

  1385         <li id="animtype-visibility">

  1386           <strong>visibility</strong>: if one of the values is

  1387           ''visibility/visible'', interpolated as a discrete step where values of the

  1388           timing function between 0 and 1 map to ''visibility/visible'' and other

  1389           values of the timing function (which occur only at the

  1390           start/end of the transition or as a result of ''cubic-bezier()''

  1391           functions with Y values outside of [0, 1]) map to the closer

  1392           endpoint; if neither value is ''visibility/visible'' then not interpolable.

  1393         </li>

  1394         <li id="animtype-shadow-list">

  1395           <strong>shadow list</strong>: Each shadow in the list

  1396           (treating ''shadow/none'' as a 0-length list)

  1397           is interpolated via the

  1398           color (as <a href="#animtype-color">color</a>) component,

  1399           and x, y, blur, and (when appropriate) spread

  1400           (as <a href="#animtype-length">length</a>) components.

  1401           For each shadow, if both input shadows are ''shadow/inset''

  1402           or both input shadows are not ''shadow/inset'',

  1403           then the interpolated shadow must match the input shadows in that regard.

  1404           If any pair of input shadows has one ''shadow/inset'' and the other not ''shadow/inset'',

  1405           the entire <a href="#animtype-shadow-list">shadow-list</a> is uninterpolable.

  1406           If the lists of shadows have different lengths,

  1407           then the shorter list is padded at the end

  1408           with shadows whose color is ''transparent'',

  1409           all lengths are ''0'',

  1410           and whose ''shadow/inset'' (or not) matches the longer list.

  1411         </li>

  1412         <li id="animtype-gradient">

  1413           <strong>gradient</strong>: interpolated via the

  1414           positions and colors of each stop. They must have the same type

  1415           (radial or linear) and same number of stops in order to be animated.

  1416           <span class="note">Note: [[CSS3-IMAGES]] may extend this

  1417           definition.</span>

  1418         </li>

  1419         <li id="animtype-paintserver">

  1420           <strong>paint server</strong> (SVG): interpolation is only supported

  1421           between: gradient to gradient and color to color. They then

  1422           work as above.

  1423         </li>

  1424         <li id="animtype-simple-list">

  1425           <strong>simple list</strong> of other types:

  1426           If the lists have the same number of items,

  1427           and each pair of values can be interpolated,

  1428           each item in the list is interpolated using

  1429           the rules given for those types.

  1430           Otherwise the values are not interpolable.

  1431         </li>

  1432         <li id="animtype-repeatable-list">

  1433           <strong>repeatable list</strong> of other types:

  1434           The result list has a length that is the least common multiple

  1435           of the lengths of the input lists.

  1436           Each item in the result is the interpolation of the value

  1437           from each input list repeated to the length of the result list.

  1438           If a pair of values cannot be interpolated, then the lists

  1439           are not interpolable.

  1440           <span class="note">

  1441             The repeatable list concept ensures that a list that is

  1442             conceptually repeated to a certain length (as

  1443             'background-origin' is repeated to the length of the

  1444             'background-image' list) or repeated infinitely will

  1445             smoothly transition between any values, and so that the

  1446             computed value will properly represent the result (and

  1447             potentially be inherited correctly).

  1448           </span>

  1449         </li>

  1450       </ul>

  1452       <p>Future specifications may define additional types that can

  1453       be animated.</p>

  1455       <p>See the definition of 'transition-property' for how animation

  1456       of shorthand properties and the ''all'' value is applied to any

  1457       properties (in the shorthand) that can be animated.</p>

  1459 Animation in steps of other property types {#step-types}

  1460 --------------------------------------------------------

  1462       <p>

  1463         When interpolating between two values that cannot be interpolated,

  1464         <var>V</var><sub>start</sub> and <var>V</var><sub>end</sub>,

  1465         interpolation is done using the output <var>p</var> of the timing function.

  1466         If <var>p</var> is less than 0.5, then the

  1467         result of the interpolation is

  1468         <var>V</var><sub>start</sub>;

  1469         if <var>p</var> is greater than or equal to 0.5, then the

  1470         result of the interpolation is

  1471         <var>V</var><sub>end</sub>.

  1472       </p>

  1474       <p class="note" id="discrete-interpolation-at-risk">

  1475         This is a recent change to which implementations have

  1476         not yet updated.  (Prior to the change CSS Transitions

  1477         and CSS Animations did not run on such changes.)  It's

  1478         possible that it won't be compatible with existing Web content.

  1479         If that is the case, the problem may be mitigated by restricting

  1480         this behavior only to CSS Animations (and not to CSS Transitions),

  1481         and/or restricting it to step timing functions.

  1482       </p>

  1484 <span id="animatable-properties-">Animatable properties</span> {#animatable-properties}

  1485 =======================================================================================

  1487       <!--

  1488       As resolved in

  1489       http://lists.w3.org/Archives/Public/www-style/2011Sep/0497.html

  1490       -->

  1492       <p>The definition of each CSS property defines

  1493       when the values of that property can be interpolated

  1494       by referring to the definitions of property types

  1495       in the <a href="#animatable-types">previous section</a>.

  1496       The animated value is interpolated from the from and to values when

  1497       both the from and the to values of the property have the type described.

  1498       (When a composite type such as "length, percentage, or calc" is listed,

  1499       this means that both values must fit into that composite type.)

  1500       When multiple types are listed in the form "either A or B",

  1501       both values must be of the same type to be interpolable.</p>

  1503       <p>Otherwise, since the from and to values cannot be interpolated,

  1504       the animation is done <a href="#step-types">in a single step</a>.</p>

  1506       <p>The 'transition-*' properties defined in this specification do

  1507       not undergo transitions.</p>

  1509       <p>For properties that exist at the time this specification was

  1510       developed, this specification defines how they are

  1511       animated.  However, future CSS specifications may define

  1512       additional properties, additional values for existing properties,

  1513       or additional animation behavior of existing values.  In order to

  1514       describe new animation behaviors and to have the definition of

  1515       animation behavior in a more appropriate location, future CSS

  1516       specifications should include an "Animatable:" line in the summary

  1517       of the property's definition (in addition to the other lines

  1518       described in [[CSS21]], <a

  1519       href="https://www.w3.org/TR/CSS21/about.html#property-defs">section

  1520       1.4.2</a>).  This line should say "no" to indicate that a property

  1521       cannot be animated or should reference an animation behavior

  1522       (which may be one of the behaviors in the <a

  1523       href="#animation-of-property-types-">Animation of property

  1524       types</a> section above, or may be a new behavior) to define how

  1525       the property animates.  Such definitions override those given in

  1526       this specification.</p>

  1528       <p class="issue" id="issue-animatable-name">

  1529         It no longer makes sense for this line to be called

  1530         "Animatable".  It should probably be renamed to "Interpolation",

  1531         and the "no" value renamed to "discrete" or "in steps".

  1532         See mailing list thread:

  1533         <a href="https://lists.w3.org/Archives/Public/www-style/2015May/0256.html">message 1</a>,

  1534         <a href="https://lists.w3.org/Archives/Public/www-style/2015May/0257.html">message 2</a>

  1535       </p>

  1537 <span id="properties-from-css-">Properties from CSS</span> {#animatable-css}

  1538 ----------------------------------------------------------------------------

  1540       <p>

  1541       The following definitions define the animation behavior for

  1542       properties in CSS Level 2 Revision 1 ([[CSS21]]) and in Level 3 of

  1543       the CSS Color Module ([[CSS3COLOR]]).

  1544       </p>

  1546      <table class="animatable-properties">

  1547        <tr>

  1548          <th>Property Name</th>

  1549          <th>Type</th>

  1550        </tr>

  1551        <tr>

  1552          <td>'background-color'</td><td>as <a href="#animtype-color">color</a></tr>

  1553        <tr>

  1554          <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>

  1555        </tr>

  1556        <tr>

  1557          <td>'border-bottom-color'</td><td>as <a href="#animtype-color">color</a></td>

  1558        </tr>

  1559        <tr>

  1560          <td>'border-bottom-width'</td><td>as <a href="#animtype-length">length</a></td>

  1561        </tr>

  1562        <tr>

  1563          <td>'border-left-color'</td><td>as <a href="#animtype-color">color</a></td>

  1564        </tr>

  1565        <tr>

  1566          <td>'border-left-width'</td><td>as <a href="#animtype-length">length</a></td>

  1567        </tr>

  1568        <tr>

  1569          <td>'border-right-color'</td><td>as <a href="#animtype-color">color</a></td>

  1570        </tr>

  1571        <tr>

  1572          <td>'border-right-width'</td><td>as <a href="#animtype-length">length</a></td>

  1573        </tr>

  1574        <tr>

  1575          <td>'border-spacing'</td><td>as <a href="#animtype-simple-list">simple list</a> of <a href="#animtype-length">length</a></td>

  1576        </tr>

  1577        <tr>

  1578          <td>'border-top-color'</td><td>as <a href="#animtype-color">color</a></td>

  1579        </tr>

  1580        <tr>

  1581          <td>'border-top-width'</td><td>as <a href="#animtype-length">length</a></td>

  1582        </tr>

  1583        <tr>

  1584          <td>'bottom'</td><td>as <a href="#animtype-lpcalc">length, percentage, or calc</a></td>

  1585        </tr>

  1586        <tr>

  1587          <td>'clip'</td><td>as <a href="#animtype-rect">rectangle</a></td>

  1588        </tr>

  1589        <tr>

  1590          <td>'color'</td><td>as <a href="#animtype-color">color</a></td>

  1591        </tr>

  1592        <tr>

  1593          <td>'font-size'</td><td>as <a href="#animtype-length">length</a></td>

  1594        </tr>

  1595        <tr>

  1596          <td>'font-weight!!property'</td><td>as <a href="#animtype-font-weight">font weight</a></td>

  1597        </tr>

  1598        <tr>

  1599          <td>'height'</td><td>as <a href="#animtype-lpcalc">length, percentage, or calc</a></td>

  1600        </tr>

  1601        <tr>

  1602          <td>'left'</td><td>as <a href="#animtype-lpcalc">length, percentage, or calc</a></td>

  1603        </tr>

  1604        <tr>

  1605          <td>'letter-spacing'</td><td>as <a href="#animtype-length">length</a></td>

  1606        </tr>

  1607        <tr>

  1608          <td>'line-height'</td><td>as either <a href="#animtype-number">number</a> or <a href="#animtype-length">length</a></td>

  1609        </tr>

  1610        <tr>

  1611          <td>'margin-bottom'</td><td>as <a href="#animtype-length">length</a></td>

  1612        </tr>

  1613        <tr>

  1614          <td>'margin-left'</td><td>as <a href="#animtype-length">length</a></td>

  1615        </tr>

  1616        <tr>

  1617          <td>'margin-right'</td><td>as <a href="#animtype-length">length</a></td>

  1618        </tr>

  1619        <tr>

  1620          <td>'margin-top'</td><td>as <a href="#animtype-length">length</a></td>

  1621        </tr>

  1622        <tr>

  1623          <td>'max-height'</td><td>as <a href="#animtype-lpcalc">length, percentage, or calc</a></td>

  1624        </tr>

  1625        <tr>

  1626          <td>'max-width'</td><td>as <a href="#animtype-lpcalc">length, percentage, or calc</a></td>

  1627        </tr>

  1628        <tr>

  1629          <td>'min-height'</td><td>as <a href="#animtype-lpcalc">length, percentage, or calc</a></td>

  1630        </tr>

  1631        <tr>

  1632          <td>'min-width'</td><td>as <a href="#animtype-lpcalc">length, percentage, or calc</a></td>

  1633        </tr>

  1634        <tr>

  1635          <td>'opacity'</td><td>as <a href="#animtype-number">number</a></td>

  1636        </tr>

  1637        <tr>

  1638          <td>'outline-color'</td><td>as <a href="#animtype-color">color</a></td>

  1639        </tr>

  1640        <tr>

  1641          <td>'outline-width'</td><td>as <a href="#animtype-length">length</a></td>

  1642        </tr>

  1643        <tr>

  1644          <td>'padding-bottom'</td><td>as <a href="#animtype-length">length</a></td>

  1645        </tr>

  1646        <tr>

  1647          <td>'padding-left'</td><td>as <a href="#animtype-length">length</a></td>

  1648        </tr>

  1649        <tr>

  1650          <td>'padding-right'</td><td>as <a href="#animtype-length">length</a></td>

  1651        </tr>

  1652        <tr>

  1653          <td>'padding-top'</td><td>as <a href="#animtype-length">length</a></td>

  1654        </tr>

  1655        <tr>

  1656          <td>'right'</td><td>as <a href="#animtype-lpcalc">length, percentage, or calc</a></td>

  1657        </tr>

  1658        <tr>

  1659          <td>'text-indent'</td><td>as <a href="#animtype-lpcalc">length, percentage, or calc</a></td>

  1660        </tr>

  1661        <tr>

  1662          <td>'text-shadow'</td><td>as <a href="#animtype-shadow-list">shadow list</a></td>

  1663        </tr>

  1664        <tr>

  1665          <td>'top'</td><td>as <a href="#animtype-lpcalc">length, percentage, or calc</a></td>

  1666        </tr>

  1667        <tr>

  1668          <td>'vertical-align'</td><td>as <a href="#animtype-length">length</a></td>

  1669        </tr>

  1670        <tr>

  1671          <td>'visibility'</td><td>as <a href="#animtype-visibility">visibility</a></td>

  1672        </tr>

  1673        <tr>

  1674          <td>'width'</td><td>as <a href="#animtype-lpcalc">length, percentage, or calc</a></td>

  1675        </tr>

  1676        <tr>

  1677          <td>'word-spacing'</td><td>as <a href="#animtype-length">length</a></td>

  1678        </tr>

  1679        <tr>

  1680          <td>'z-index'</td><td>as <a href="#animtype-integer">integer</a></td>

  1681        </tr>

  1682      </table>

  1684 <span id="properties-from-svg-">Properties from SVG</span> {#animatable-svg}

  1685 ----------------------------------------------------------------------------

  1687      <p>

  1688        All properties defined as animatable in the SVG specification, provided

  1689        they are one of the property types listed above.

  1690       </p>

  1692      <!-- <table>

  1693        <tr>

  1694          <th>Property Name</th><th>Type</th>

  1695        </tr>

  1696        <tr>

  1697          <td>stop-color</td><td>as <a href="#animtype-color">color</a></td>

  1698        </tr>

  1699        <tr>

  1700          <td>stop-opacity</td><td>as <a href="#animtype-number">number</a></td>

  1701        </tr>

  1702        <tr>

  1703          <td>fill</td><td>as <a href="#animtype-paintserver">paint server</a></td>

  1704        </tr>

  1705        <tr>

  1706          <td>fill-opacity</td><td>as <a href="#animtype-number">number</a></td>

  1707        </tr>

  1708        <tr>

  1709          <td>stroke</td><td>as <a href="#animtype-paintserver">paint server</a></td>

  1710        </tr>

  1711        <tr>

  1712          <td>stroke-dasharray</td><td>as <a href="#animtype-repeatable-list">repeatable list</a> of <a href="#animtype-number">number</a></td>

  1713        </tr>

  1714        <tr>

  1715          <td>stroke-dashoffset</td><td>as <a href="#animtype-number">number</a></td>

  1716        </tr>

  1717        <tr>

  1718          <td>stroke-miterlimit</td><td>as <a href="#animtype-number">number</a></td>

  1719        </tr>

  1720        <tr>

  1721          <td>stroke-opacity</td><td>as <a href="#animtype-number">number</a></td>

  1722        </tr>

  1723        <tr>

  1724          <td>stroke-width</td><td>as <a href="#animtype-number">number</a></td>

  1725        </tr>

  1726        <tr>

  1727          <td>viewport-fill</td><td>as <a href="#animtype-color">color</a></td>

  1728        </tr>

  1729        <tr>

  1730          <td>viewport-fill-opacity</td><td>as <a href="#animtype-color">color</a></td>

  1731        </tr>

  1732       </table> -->

  1734 Security Considerations {#security}

  1735 ===================================

  1737 <em>This section is not normative.</em>

  1739 The security implications of this specification are limited

  1740 because it doesn't allow Web content to do things

  1741 that it could not do before.

  1742 Rather, it allows things that could previously be done with script

  1743 to be done declaratively,

  1744 and it ways that implementations can optimize (for frame rate and

  1745 CPU usage).

  1747 One of the major categories of optimizations

  1748 that implementations can make is implementing animation

  1749 of certain high-value properties (such as 'transform' and 'opacity')

  1750 run on a browser's compositor thread or process

  1751 without updating style or layout on the main Web content thread

  1752 unless up-to-date style data are needed.

  1753 This optimization often requires allocations of graphics memory

  1754 to display the contents of the element being animated.

  1755 Implementations should take care to ensure that Web content

  1756 cannot trigger unsafe out-of-memory handling

  1757 by using large numbers of animations

  1758 or animations on elements covering large areas

  1759 (where large may be defined in terms of pre-transform or post-transform size).

  1761 Privacy Considerations {#privacy}

  1762 =================================

  1764 <em>This section is not normative.</em>

  1766 As for security, the privacy considerations of this specification are limited

  1767 because it does not allow Web content to do things that it could not do before.

  1769 This specification may provide additional mechanisms that help to determine

  1770 characteristics of the user's hardware or software.

  1771 However, ability to determine performance characteristics of the user's

  1772 hardware or software is common to many Web technologies,

  1773 and this specification does not introduce new capabilities.

  1775 As described in [[#accessibility]],

  1776 implementations may provide mitigations to help users with disabilities.

  1777 These mitigations are likely to be detectable by Web content,

  1778 which means that users who would benefit from these mitigations

  1779 may face a tradeoff between keeping their disability private from

  1780 the Web content or benefiting from the mitigation.

  1782 Accessibility Considerations {#accessibility}

  1783 =============================================

  1785 <em>This section is not normative.</em>

  1787 Motion {#accessibility-motion}

  1788 ------------------------------

  1790 This specification provides declarative mechanisms for animations

  1791 that previously needed to be done using script.

  1792 Providing a declarative mechanism has multiple effects:

  1793 it makes such animations easier to make and thus likely to be more common,

  1794 but it also makes it easier for user agents to modify those animations

  1795 if such modifications are needed to meet a user's accessibility needs.

  1797 Thus, users who are sensitive to movement,

  1798 or who require additional time to read or understand content,

  1799 may benefit from user agent features that allow

  1800 animations to be disabled or slowed down.

  1801 (But see [[#privacy]] for information on the privacy implications

  1802 of such mitigations.)

  1804 User agent implementors should be aware that Web content

  1805 may depend on the firing of <a href="#transition-events">transition events</a>,

  1806 so implementations of such mitigations may wish to fire transition events

  1807 even if the transitions were not run as continuous animations.

  1808 However, it is probably poor practice for Web content to depend on

  1809 such events to function correctly.

  1811 Cascade {#accessibility-cascade}

  1812 --------------------------------

  1814 The CSS <a>cascade</a> is a general mechanism in CSS

  1815 that allows user needs to interact with author styles.

  1816 This specification interacts with the cascade,

  1817 but since it only allows animation between values

  1818 that result from the existing cascade rules,

  1819 it does not interfere with the user's ability to force

  1820 CSS properties to have particular values.

  1822 The cascade also allows users to disable transitions entirely

  1823 by overriding the transition properties.

  1826 Changes since Working Draft of 19 November 2013 {#changes}

  1827 ==========================================================

  1829 <p>The following are the substantive changes made since the

  1830 <a href="https://www.w3.org/TR/2013/WD-css3-transitions-20131119/">Working Draft

  1831 dated 19 November 2013</a>:</p>

  1833 <ul>

  1834   <li>Values that cannot be interpolated are transitioned when the timing function crosses its midpoint, instead of not running transitions and changing immediately.</li>

  1835   <li>Canceling and interrupting of running transitions is defined much more precisely.  This includes the after-change style no longer including styles from CSS Transitions.</li>

  1836   <li>Completion of transitions is defined somewhat more precisely.</li>

  1837   <li>The transitionend event is no longer cancelable.  This is since it has no default action, so canceling it would have no meaning.  It also matches the animation events.</li>

  1838   <li>The interpolation of ''shadow/inset'' values on shadow lists is no longer backwards.</li>

  1839   <li>A [[#conformance]] section, [[#security]] section, [[#privacy]] section, [[#accessibility]] section, and [[#idl-index]] have been added</li>

  1840   <li>The identifiers accepted by 'transition-property' are defined in terms of <<custom-ident>>.</li>

  1841   <li>Define a little bit more about when changes to computed values happen, by saying at least that implementations must not update the effects of computed values without actually updating computed values.</li>

  1842 </ul>

  1844 <p>For more details on these changes, see the version control <a href="https://hg.csswg.org/drafts/log/tip/css-transitions/Overview.bs">change log since 2015 January 26</a> and the <a href="https://hg.csswg.org/drafts/log/tip/css-transitions/Overview.src.html">change log from 2013 March 28 to 2015 January 26</a>.</p>

  1846 <p>For changes in earlier working drafts:</p>

  1848 <ol>

  1849   <li>see the <a href="https://www.w3.org/TR/2013/WD-css3-transitions-20131119/#changes">changes section in the 19 November 2013 Working Draft</a>

  1850   <li>see the <a href="https://www.w3.org/TR/2013/WD-css3-transitions-20130212/ChangeLog">the ChangeLog</a> for changes in previous working drafts

  1851   <li>For more details on these changes, see the version control change logs, which are split in three parts because of file renaming: <a href="https://hg.csswg.org/drafts/log/tip/css-transitions/Overview.bs">change log since 2015 January 26</a>, <a href="https://hg.csswg.org/drafts/log/tip/css-transitions/Overview.src.html">change log from 2013 March 28 to 2015 January 26</a>, <a href="https://hg.csswg.org/drafts/log/tip/css3-transitions/Overview.src.html">change log before 2013 March 28</a>.

  1852 </ol>

  1854 Acknowledgments {#acknowledgments}

  1855 ==================================

  1857 <p>Thanks especially to the feedback from

  1858 Tab Atkins,

  1859 Carine Bournez,

  1860 Aryeh Gregor,

  1861 Vincent Hardy,

  1862 Anne van Kesteren,

  1863 Cameron McCormack,

  1864 Alex Mogilevsky,

  1865 Jasper St. Pierre,

  1866 Estelle Weyl,

  1867 and all the rest of the

  1868 <a href="http://lists.w3.org/Archives/Public/www-style/">www-style</a> community.</p>

Mercurial > drafts / file revision

css-transitions/Overview.bs@ed61a21f7929

css-transitions/Overview.bs