8000 csswg-drafts/css-transitions/Overview.html at a72febdd10bcd512e20a490a40fca71024b0ed42 · w3c/csswg-drafts · GitHub
Skip to content 8000

Overview.html

Latest commit

 

History

History
2104 lines (1609 loc) · 77.9 KB

Overview.html

File metadata and controls

2104 lines (1609 loc) · 77.9 KB
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang=en>
<head profile="http://dublincore.org/documents/2008/08/04/dc-html/ ">
<title>CSS Transitions</title>
<link href="http://purl.org/dc/terms/" rel=schema.dcterms>
<link href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright"
rel=dcterms.rights>
<meta content="CSS Transitions" name=dcterms.title>
<meta content=text name=dcterms.type>
<meta content=2014-01-29 name=dcterms.date>
<meta content="L. David Baron" name=dcterms.creator>
<meta content=W3C name=dcterms.publisher>
<meta content="http://dev.w3.org/csswg/css3-transitions/"
name=dcterms.identifier>
<script defer=defer
src="http://test.csswg.org/harness/annotate.js#css-transitions-1_dev"
type="text/javascript"></script>
<meta content="text/html; charset=utf-8" http-equiv=Content-Type>
<link href="../default.css" rel=stylesheet type="text/css">
<style type="text/css">
table.animatable-properties {
border-collapse: collapse;
}
table.animatable-properties td {
padding: 0.2em 1em;
border: 1px solid black;
}
div.prod { margin: 1em 2em; }
</style>
<link href="http://www.w3.org/StyleSheets/TR/W3C-ED.css" rel=stylesheet
type="text/css">
<body>
<div class=head> <!--begin-logo-->
<p><a href="http://www.w3.org/"><img alt=W3C height=48
src="http://www.w3.org/Icons/w3c_home" width=72></a> <!--end-logo-->
<h1>CSS Transitions</h1>
<h2 class="no-num no-toc">Editor's Draft 29 January 2014</h2>
<dl>
<dt>This version:
<dd> <a
href="http://dev.w3.org/csswg/css3-transitions/">http://dev.w3.org/csswg/css3-transitions/</a>
<dt>Latest version:
<dd><a href="http://www.w3.org/TR/css3-transitions/">
http://www.w3.org/TR/css3-transitions/</a>
<dt>Editor's draft:
<dd><a
href="http://dev.w3.org/csswg/css-transitions/">http://dev.w3.org/csswg/css-transitions/</a>
(<a
href="https://dvcs.w3.org/hg/csswg/log/tip/css-transitions/Overview.src.html">change
log</a>, <a
href="https://dvcs.w3.org/hg/csswg/log/tip/css3-transitions/Overview.src.html">older
change log</a>)
<dt>Previous version:
<dd><a
href="http://www.w3.org/TR/2013/WD-css3-transitions-20131119/">http://www.w3.org/TR/2013/WD-css3-transitions-20131119/</a>
<dt id=editors-list>Editors:
<dd><a href="mailto:dino@apple.com">Dean Jackson</a> (<a
href="http://www.apple.com/">Apple Inc</a>)
<dd><a href="mailto:hyatt@apple.com">David Hyatt</a> (<a
href="http://www.apple.com/">Apple Inc</a>)
<dd><a href="mailto:cmarrin@apple.com">Chris Marrin</a> (<a
href="http://www.apple.com/">Apple Inc</a>)
<dd class=vcard><a class=fn href="http://dbaron.org/">L. David Baron</a>
(<a class=org href="http://www.mozilla. 77EC org/">Mozilla</a>)
<dt>Issues list:
<dd>In Bugzilla: <a
href="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">for
this level</a>, <a
href="https://www.w3.org/Bugs/Public/buglist.cgi?query_format=advanced&amp;product=CSS&amp;component=Transitions&amp;resolution=---">for
all levels</a>
<dt>Feedback:
<dd><a
href="mailto:www-style@w3.org?subject=%5Bcss-transitions%5D%20feedback">www-style@w3.org</a>
with subject line “<kbd>[css-transitions] <var>… message topic
…</var></kbd>” (<a
href="http://lists.w3.org/Archives/Public/www-style/"
rel=discussion>archives</a>)
<dt>Test suite:
<dd> <a
href="http://test.csswg.org/suites/css-transitions-1/nightly-unstable/">http://test.csswg.org/suites/css-transitions-1/nightly-unstable/</a>
</dl>
<!--begin-copyright-->
<p class=copyright><a
href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright"
rel=license>Copyright</a> © 2014 <a href="http://www.w3.org/"><abbr
title="World Wide Web Consortium">W3C</abbr></a><sup>®</sup> (<a
href="http://www.csail.mit.edu/"><abbr
title="Massachusetts Institute of Technology">MIT</abbr></a>, <a
href="http://www.ercim.eu/"><abbr
title="European Research Consortium for Informatics and Mathematics">ERCIM</abbr></a>,
<a href="http://www.keio.ac.jp/">Keio</a>, <a
href="http://ev.buaa.edu.cn/">Beihang</a>), All Rights Reserved. W3C <a
href="http://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer">liability</a>,
<a
href="http://www.w3.org/Consortium/Legal/ipr-notice#W3C_Trademarks">trademark</a>
and <a
href="http://www.w3.org/Consortium/Legal/copyright-documents">document
use</a> rules apply.</p>
<!--end-copyright-->
<hr title="Separator for header">
</div>
<h2 class="no-num no-toc" id=abstract>Abstract</h2>
<p>CSS Transitions allows property changes in CSS values to occur smoothly
over a specified duration.
<h2 class="no-num no-toc" id=status>Status of this document</h2>
<!--begin-status-->
<p>This is a public copy of the editors' draft. It is provided for
discussion only and may change at any moment. Its publication here does
not imply endorsement of its contents by W3C. Don't cite this document
other than as work in progress.
<p>The (<a
href="http://lists.w3.org/Archives/Public/www-style/">archived</a>) public
mailing list <a
href="mailto:www-style@w3.org?Subject=%5Bcss3-transitions%5D%20PUT%20SUBJECT%20HERE">
www-style@w3.org</a> (see <a
href="http://www.w3.org/Mail/Request">instructions</a>) is preferred for
discussion of this specification. When sending e-mail, please put the text
“css3-transitions” in the subject, preferably like this:
“[<!---->css3-transitions<!---->] <em>…summary of comment…</em>”
<p>This document was produced by the <a
href="http://www.w3.org/Style/CSS/members">CSS Working Group</a> (part of
the <a href="http://www.w3.org/Style/">Style Activity</a>).
<p>This document was produced by a group operating under the <a
href="http://www.w3.org/Consortium/Patent-Policy-20040205/">5 February
2004 W3C Patent Policy</a>. W3C maintains a <a
href="http://www.w3.org/2004/01/pp-impl/32061/status"
rel=disclosure>public list of any patent disclosures</a> made in
connection with the deliverables of the group; that page also includes
instructions for disclosing a patent. An individual who has actual
knowledge of a patent which the individual believes contains <a
href="http://www.w3.org/Consortium/Patent-Policy-20040205/#def-essential">Essential
Claim(s)</a> must disclose the information in accordance with <a
href="http://www.w3.org/Consortium/Patent-Policy-20040205/#sec-Disclosure">section
6 of the W3C Patent Policy</a>.</p>
<!--end-status-->
<p> <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.
<h2 class="no-num no-toc" id=contents>Table of Contents</h2>
<!--begin-toc-->
<ul class=toc>
<li><a href="#introduction"><span class=secno>1. </span>Introduction</a>
<li><a href="#transitions"><span class=secno>2. </span>Transitions</a>
<ul class=toc>
<li><a href="#transition-property-property"><span class=secno>2.1.
</span> The ‘<code class=property>transition-property</code>’
Property </a>
<li><a href="#transition-duration-property"><span class=secno>2.2.
</span> The ‘<code class=property>transition-duration</code>’
Property </a>
<li><a href="#transition-timing-function-property"><span
class=secno>2.3. </span> The ‘<code
class=property>transition-timing-function</code>’ Property </a>
<li><a href="#transition-delay-property"><span class=secno>2.4. </span>
The ‘<code class=property>transition-delay</code>’ Property </a>
<li><a href="#transition-shorthand-property"><span class=secno>2.5.
</span> The ‘<code class=property>transition</code>’ Shorthand
Property </a>
</ul>
<li><a href="#starting"><span class=secno>3. </span> Starting of
transitions </a>
<ul class=toc>
<li><a href="#reversing"><span class=secno>3.1. </span> Faster reversing
of interrupted transitions </a>
</ul>
<li><a href="#application"><span class=secno>4. </span> Application of
transitions </a>
<li><a href="#transition-events"><span class=secno>5. </span> Transition
Events </a>
<li><a href="#animatable-types"><span class=secno>6. </span> Animation of
property types </a>
<li><a href="#animatable-properties"><span class=secno>7. </span>
Animatable properties </a>
<ul class=toc>
<li><a href="#animatable-css"><span class=secno>7.1. </span> Properties
from CSS </a>
<li><a href="#animatable-svg"><span class=secno>7.2. </span> Properties
from SVG </a>
</ul>
<li><a href="#changes"><span class=secno>8. </span>Changes since Working
Draft of 19 November 2013</a>
<li><a href="#acknowledgments"><span class=secno>9.
</span>Acknowledgments</a>
<li><a href="#references"><span class=secno>10. </span>References</a>
<ul class=toc>
<li class=no-num><a href="#normative-references">Normative
references</a>
<li class=no-num><a href="#other-references">Other references</a>
</ul>
<li class=no-num><a href="#property-index">Property index</a>
<li class=no-num><a href="#index">Index</a>
</ul>
<!--end-toc-->
<h2 id=introduction><span class=secno>1. </span>Introduction</h2>
<p><em>This section is not normative.</em>
<p> 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.
<h2 id=transitions><span class=secno>2. </span><a id=transitions-
title="">Transitions</a></h2>
<p> 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.
<p> For example, suppose that transitions of one second have been defined
on the ‘<code class=property>left</code>’ and ‘<code
class=property>background-color</code>’ 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.
<div class=figure> <img alt="" src=transition1.png></div>
<p class=caption> Transitions of ‘<code class=property>left</code>’ and
‘<code class=property>background-color</code>’
<p> Transitions are a presentational effect. The computed value of a
property transitions over time from the old value to the new value.
Therefore if a script queries the computed style of a property as it is
transitioning, it will see an intermediate value that represents the
current animated value of the property.
<p> Only animatable CSS properties can be transitioned. See the table at
the end of this document for a list of properties that are animatable.
<p> The transition for a property is defined using a number of new
properties. For example:
<div class=example>
<p style="display:none"> Example(s):
<pre>
div {
transition-property: opacity;
transition-duration: 2s;
}
</pre>
The above example defines a transition on the ‘<code
class=property>opacity</code>’ 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.</div>
<p> 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:
<div class=example>
<p style="display:none"> Example(s):
<pre>
div {
transition-property: opacity, left;
transition-duration: 2s, 4s;
}
</pre>
This will cause the ‘<code class=property>opacity</code>’ property to
transition over a period of two seconds and the left property to
transition over a period of four seconds.</div>
<p id=list-matching> In the case where the lists of values in transition
properties do not have the same length, the length of the ‘<a
href="#transition-property"><code
class=property>transition-property</code></a>’ list determines the
number of items in each list examined when starting transitions. The lists
are matched up from the first value: excess values at the end are not
used. If one of the other properties doesn't have enough comma-separated
values to match the number of values of ‘<a
href="#transition-property"><code
class=property>transition-property</code></a>’, the UA must calculate
its used value by repeating the list of values until there are enough.
This truncation or repetition does not affect the computed value. <span
class=note> Note: This is analogous to the behavior of the ‘<code
class=css>background-*</code>’ properties, with ‘<code
class=property>background-image</code>’ analogous to ‘<a
href="#transition-property"><code
class=property>transition-property</code></a>’. </span>
<div class=example>
<p style="display:none"> Example(s):
<pre>
div {
transition-property: opacity, left, top, width;
transition-duration: 2s, 1s;
}
</pre>
The above example defines a transition on the ‘<code
class=property>opacity</code>’ property of 2 seconds duration, a
transition on the ‘<code class=property>left</code>’ property of 1
second duration, a transition on the ‘<code class=property>top</code>’
property of 2 seconds duration and a transition on the ‘<code
class=property>width</code>’ property of 1 second duration.</div>
<p> While authors can use transitions to create dynamically changing
content, dynamically changing content can lead to seizures in some users.
For information on how to avoid content that can lead to seizures, see <a
href="http://www.w3.org/TR/WCAG20/#seizure">Guideline 2.3: Seizures: Do
not design content in a way that is known to cause seizures</a> (<a
href="#ref-WCAG20" rel=biblioentry>[WCAG20]<!--{{WCAG20}}--></a>).</p>
<!-- ======================================================================================================= -->
<h3 id=transition-property-property><span class=secno>2.1. </span><a
id=the-transition-property-property- title=""> The ‘<code
class=property>transition-property</code>’ Property </a></h3>
<p> The ‘<a href="#transition-property"><code
class=property>transition-property</code></a>’ property specifies the
name of the CSS property to which the transition is applied.
<table class=propdef>
<tbody>
<tr>
<th> Name:
<td> <dfn id=transition-property>transition-property</dfn>
<tr>
<th> Value:
<td> none | <a
href="#single-transition-property">&lt;single-transition-property&gt;</a>
[ ‘<code class=css>,</code>’ <a
href="#single-transition-property">&lt;single-transition-property&gt;</a>
]*
<tr>
<th> Initial:
<td> all
<tr>
<th> Applies to:
<td> all elements, :before and :after pseudo elements
<tr>
<th> Inherited:
<td> no
<tr>
<th> Animatable:
<td> no
<tr>
<th> Percentages:
<td> N/A
<tr>
<th> Media:
<td> visual
<tr>
<th> Computed value:
<td> Same as specified value.
<tr>
<th> Canonical order:
<td> <abbr title="follows order of property value definition">per
grammar</abbr>
</table>
<div class=prod> <dfn
id=single-transition-property>&lt;single-transition-property&gt;</dfn> =
all | &lt;IDENT&gt;</div>
<p> A value of ‘<code class=css>none</code>’ means that no property
will transition. Otherwise, a list of properties to be transitioned, or
the keyword ‘<code class=css>all</code>’ which indicates that all
properties are to be transitioned, is given.
<p> If one of the identifiers listed is not a recognized property name or
is not an animatable property, the implementation must still start
transitions on the animatable properties in the list using the duration,
delay, and timing function at their respective indices in the lists for
‘<a href="#transition-duration"><code
class=property>transition-duration</code></a>’, ‘<a
href="#transition-delay"><code
class=property>transition-delay</code></a>’, and ‘<a
href="#transition-timing-function"><code
class=property>transition-timing-function</code></a>’. In other words,
unrecognized or non-animatable properties must be kept in the list to
preserve the matching of indices.
<p> The keywords ‘<code class=css>none</code>’, ‘<code
class=css>inherit</code>’, and ‘<code class=css>initial</code>’ are
not permitted as items within a list of more that one identifier; any list
that uses them is syntactically invalid. In other words, the &lt;IDENT&gt;
production in <a
href="#single-transition-property">&lt;single-transition-property&gt;</a>
matches any identifier other than these three keywords.
<p> For the keyword ‘<code class=css>all</code>’, or if one of the
identifiers listed is a shorthand property, implementations must start
transitions for any of its longhand sub-properties that are animatable
(or, for ‘<code class=css>all</code>’, all animatable properties),
using the duration, delay, and timing function at the index corresponding
to the shorthand.
<p> If a property is specified multiple times in the value of ‘<a
href="#transition-property"><code
class=property>transition-property</code></a>’ (either on its own, via a
shorthand that contains it, or via the ‘<code class=css>all</code>’
value), then the transition that starts uses the duration, delay, and
timing function at the index corresponding to the <em>last</em> item in
the value of ‘<a href="#transition-property"><code
class=property>transition-property</code></a>’ that calls for animating
that property.
<p class=note> Note: The ‘<code class=css>all</code>’ value and
‘<code class=property>all</code>’ shorthand property work in similar
ways, so the ‘<code class=css>all</code>’ value is just like a
shorthand that covers all properties.</p>
<!-- ======================================================================================================= -->
<h3 id=transition-duration-property><span class=secno>2.2. </span><a
id=the-transition-duration-property- title=""> The ‘<code
class=property>transition-duration</code>’ Property </a></h3>
<p> The ‘<a href="#transition-duration"><code
class=property>transition-duration</code></a>’ property defines the
length of time that a transition takes.
<table class=propdef>
<tbody>
<tr>
<th> Name:
<td> <dfn id=transition-duration>transition-duration</dfn>
<tr>
<th> Value:
<td> <span>&lt;time&gt;</span> [, <span>&lt;time&gt;</span>]*
<tr>
<th> Initial:
<td> 0s
<tr>
<th> Applies to:
<td> all elements, :before and :after pseudo elements
<tr>
<th> Inherited:
<td> no
<tr>
<th> Animatable:
<td> no
<tr>
<th> Percentages:
<td> N/A
<tr>
<th> Media:
<td> interactive
<tr>
<th> Computed value:
<td> Same as specified value.
<tr>
<th> Canonical order:
<td> <abbr title="follows order of property value definition">per
grammar</abbr>
</table>
<p> This property specifies how long the transition from the old value to
the new value should take. By default the value is ‘<code
class=css>0s</code>’, meaning that the transition is immediate (i.e.
there will be no animation). A negative value for ‘<a
href="#transition-duration"><code
class=property>transition-duration</code></a>’ renders the declaration
invalid.</p>
<!-- =======================================================================================================
-->
<h3 id=transition-timing-function-property><span class=secno>2.3. </span><a
id="transition-timing-function_tag" title=""> The ‘<code
class=property>transition-timing-function</code>’ Property </a></h3>
<p> The ‘<a href="#transition-timing-function"><code
class=property>transition-timing-function</code></a>’ property describes
how the intermediate values used during a transition will be calculated.
It allows for a transition to change speed over its duration. These
effects are commonly called <em>easing</em> functions. In either case, a
mathematical function that provides a smooth curve is used.
<p> Timing functions are either defined as a stepping function or a <a
href="http://en.wikipedia.org/wiki/B%C3%A9zier_curve#Cubic_B.C3.A9zier_curves">cubic
Bézier curve</a>. The timing function takes as its input the current
elapsed percentage of the transition duration and outputs the percentage
of the way the transition is from its start value to its end value. How
this output is used is defined by the <a
href="#animatable-types">interpolation rules</a> for the value type.
<p> A <a href="http://en.wikipedia.org/wiki/Step_function">stepping</a>
function is defined by a number that divides the domain of operation into
equally sized intervals. Each subsequent interval is a equal step closer
to the goal state. The function also specifies whether the change in
output percentage happens at the start or end of the interval (in other
words, if 0% on the input percentage is the point of initial change).
<div class=figure> <img
alt="The step timing function splits the function domain into a number of disjoint straight line segments. steps(1, start) is a function whose output value is 1 for all input values. steps(1, end) is a function whose output value is 0 for all input values less than 1, and output is 1 for the input value of 1. steps(3, start) is a function that divides the input domain into three segments, each 1/3 in length, and 1/3 above the previous segment, with the first segment starting at 1/3. steps(3, end) is a function that divides the input domain into three segments, each 1/3 in length, and 1/3 above the previous segment, with the first segment starting at 0."
src=step.png></div>
<p class=caption> Step timing functions
<p> A <a
href="http://en.wikipedia.org/wiki/B%C3%A9zier_curve#Cubic_B.C3.A9zier_curves">cubic
Bézier curve</a> is defined by four control points 6D50 , P<sub>0</sub> through
P<sub>3</sub> (see Figure 1). P<sub>0</sub> and P<sub>3</sub> are always
set to (0,0) and (1,1). The ‘<a href="#transition-timing-function"><code
class=property>transition-timing-function</code></a>’ property is used
to specify the values for points P<sub>1</sub> and P<sub>2</sub>. These
can be set to preset values using the keywords listed below, or can be set
to specific values using the ‘<code class=css>cubic-bezier</code>’
function. In the ‘<code class=css>cubic-bezier</code>’ function,
P<sub>1</sub> and P<sub>2</sub> are each specified by both an X and Y
value.
<div class=figure> <img
alt="The Bézier timing function is a smooth curve from point P0 = (0,0) to point P3 = (1,1). The length and orientation of the line segment P0-P1 determines the tangent and the curvature of the curve at P0 and the line segment P2-P3 does the same at P3."
src=TimingFunction.png></div>
<p class=caption> Bézier Timing Function Control Points
<table class=propdef>
<tbody>
<tr>
<th> Name:
<td> <dfn id=transition-timing-function>transition-timing-function</dfn>
<tr>
<th> Value:
<td> <a
href="#single-transition-timing-function">&lt;single-transition-timing-function&gt;</a>
[ ‘<code class=css>,</code>’ <a
href="#single-transition-timing-function">&lt;single-transition-timing-function&gt;</a>
]*
<tr>
<th> Initial:
<td> ease
<tr>
<th> Applies to:
<td> all elements, :before and :after pseudo elements
<tr>
<th> Inherited:
<td> no
<tr>
<th> Animatable:
<td> no
<tr>
<th> Percentages:
<td> N/A
<tr>
<th> Media:
<td> interactive
<tr>
<th> Computed value:
<td> Same as specified value.
<tr>
<th> Canonical order:
<td> <abbr title="follows order of property value definition">per
grammar</abbr>
</table>
<div class=prod> <dfn
id=single-transition-timing-function>&lt;single-transition-timing-function&gt;</dfn>
= ease | linear | ease-in | ease-out | ease-in-out | step-start | step-end
| steps(&lt;integer&gt;[, [ start | end ] ]?) |
cubic-bezier(&lt;number&gt;, &lt;number&gt;, &lt;number&gt;,
&lt;number&gt;)</div>
<p> The timing functions have the following definitions.
<dl>
<dt> ease
<dd> The ease function is equivalent to cubic-bezier(0.25, 0.1, 0.25, 1).
<dt> linear
<dd> The linear function is equivalent to cubic-bezier(0, 0, 1, 1).
<dt> ease-in
<dd> The ease-in function is equivalent to cubic-bezier(0.42, 0, 1, 1).
<dt> ease-out
<dd> The ease-out function is equivalent to cubic-bezier(0, 0, 0.58, 1).
<dt> ease-in-out
<dd> The ease-in-out function is equivalent to cubic-bezier(0.42, 0, 0.58,
1)
<dt> step-start
<dd> The step-start function is equivalent to steps(1, start).
<dt> step-end
<dd> The step-end function is equivalent to steps(1, end).
<dt> steps(&lt;integer&gt;[, [ start | end ] ]?)
<dd> Specifies a stepping function, described above, taking two
parameters. The first parameter specifies the number of intervals in the
function. It must be a positive integer (greater than 0). The second
parameter, which is optional, is either the value ‘<code
class=css>start</code>’ or ‘<code class=css>end</code>’, and
specifies the point at which the change of values occur within the
interval. If the second parameter is omitted, it is given the value
‘<code class=css>end</code>’.
<dt> cubic-bezier(&lt;number&gt;, &lt;number&gt;, &lt;number&gt;,
&lt;number&gt;)
<dd> Specifies a <a
href="http://en.wikipedia.org/wiki/B%C3%A9zier_curve">cubic-bezier
curve</a>. The four values specify points P<sub>1</sub> and P<sub>2</sub>
of the curve as (x1, y1, x2, y2). Both x values must be in the range [0,
1] or the definition is invalid. The y values can exceed this range.
</dl>
<!-- ======================================================================================================= -->
<h3 id=transition-delay-property><span class=secno>2.4. </span><a
id=the-transition-delay-property- title=""> The ‘<code
class=property>transition-delay</code>’ Property </a></h3>
<p> The ‘<a href="#transition-delay"><code
class=property>transition-delay</code></a>’ 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 ‘<a
href="#transition-delay"><code
class=property>transition-delay</code></a>’ value of ‘<code
class=css>0s</code>’ 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.
<p> If the value for ‘<a href="#transition-delay"><code
class=property>transition-delay</code></a>’ 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 ‘<a
href="#transition-delay"><code
class=property>transition-delay</code></a>’, the starting values are
taken from the moment the property is changed.
<table class=propdef>
<tbody>
<tr>
<th> Name:
<td> <dfn id=transition-delay>transition-delay</dfn>
<tr>
<th> Value:
<td> <span>&lt;time&gt;</span> [, <span>&lt;time&gt;</span>]*
<tr>
<th> Initial:
<td> 0s
<tr>
<th> Applies to:
<td> all elements, :before and :after pseudo elements
<tr>
<th> Inherited:
<td> no
<tr>
<th> Animatable:
<td> no
<tr>
<th> Percentages:
<td> N/A
<tr>
<th> Media:
<td> interactive
<tr>
<th> Computed value:
<td> Same as specified value.
<tr>
<th> Canonical order:
<td> <abbr title="follows order of property value definition">per
grammar</abbr>
</table>
<!-- ======================================================================================================= -->
<h3 id=transition-shorthand-property><span class=secno>2.5. </span><a
id=the-transition-shorthand-property- title=""> The ‘<code
class=property>transition</code>’ Shorthand Property </a></h3>
<p> The ‘<a href="#transition"><code
class=property>transition</code></a>’ shorthand property combines the
four properties described above into a single property.
<table class=propdef>
<tbody>
<tr>
<th> Name:
<td> <dfn id=transition>transition</dfn>
<tr>
<th> Value:
<td> <a href="#single-transition">&lt;single-transition&gt;</a> [
‘<code class=css>,</code>’ <a
href="#single-transition">&lt;single-transition&gt;</a> ]*
<tr>
<th> Initial:
<td> see individual properties
<tr>
<th> Applies to:
<td> all elements, :before and :after pseudo elements
<tr>
<th> Inherited:
<td> no
<tr>
<th> Animatable:
<td> no
<tr>
<th> Percentages:
<td> N/A
<tr>
<th> Media:
<td> interactive
<tr>
<th> Computed value:
<td> see individual properties
<tr>
<th> Canonical order:
<td> <abbr title="follows order of property value definition">per
grammar</abbr>
</table>
<div class=prod> <dfn id=single-transition>&lt;single-transition&gt;</dfn>
= [ none | <a
href="#single-transition-property">&lt;single-transition-property&gt;</a>
] || <span>&lt;time&gt;</span> || <a
href="#single-transition-timing-function">&lt;single-transition-timing-function&gt;</a>
|| <span>&lt;time&gt;</span></div>
<p> Note that order is important within the items in this property: the
first value that can be parsed as a time is assigned to the
transition-duration, and the second value that can be parsed as a time is
assigned to transition-delay.
<p> If there is more than one <a
href="#single-transition">&lt;single-transition&gt;</a> in the shorthand,
and any of the transitions has ‘<code class=css>none</code>’ as the <a
href="#single-transition-property">&lt;single-transition-property&gt;</a>,
then the declaration is invalid.
<h2 id=starting><span class=secno>3. </span> Starting of transitions</h2>
<p> When the computed value of an animatable property changes,
implementations must decide what transitions to start based on the values
of the ‘<a href="#transition-property"><code
class=property>transition-property</code></a>’, ‘<a
href="#transition-duration"><code
class=property>transition-duration</code></a>’, ‘<a
href="#transition-timing-function"><code
class=property>transition-timing-function</code></a>’, and ‘<a
href="#transition-delay"><code
class=property>transition-delay</code></a>’ properties at the time the
animatable property would first have its new computed value. This means
that when one of these ‘<code class=css>transition-*</code>’
properties changes at the same time as a property whose change might
transition, it is the <em>new</em> values of the ‘<code
class=css>transition-*</code>’ properties that control the transition.
<div class=example id=manual-reversing-example>
<p style="display:none"> Example(s):
<p>This provides a way for authors to specify different values of the
‘<code class=css>transition-*</code>’ properties for the
“forward” and “reverse” transitions (but see <a
href="#reversing">below</a> for special reversing behavior when an
<em>incomplete</em> transition is interrupted). Authors can specify the
value of ‘<a href="#transition-duration"><code
class=property>transition-duration</code></a>’, ‘<a
href="#transition-timing-function"><code
class=property>transition-timing-function</code></a>’, or ‘<a
href="#transition-delay"><code
class=property>transition-delay</code></a>’ in the same rule where they
specify the value that triggers the transition, or can change these
properties at the same time as they change the property that triggers the
transition. Since it's the new values of these ‘<code
class=css>transition-*</code>’ properties that affect the transition,
these values will be used for the transitions <em>to</em> the associated
transitioning values. For example:
<pre>li {
transition: background-color linear 1s;
background: blue;
}
li:hover {
background-color: green;
transition-duration: 2s; /* applies to the transition *to* the :hover state */
}</pre>
<p> When a list item with these style rules enters the :hover state, the
computed ‘<a href="#transition-duration"><code
class=property>transition-duration</code></a>’ at the time that
‘<code class=property>background-color</code>’ would have its new
value (‘<code class=css>green</code>’) is ‘<code
class=css>2s</code>’, so the transition from ‘<code
class=css>blue</code>’ to ‘<code class=css>green</code>’ takes 2
seconds. However, when the list item leaves the :hover state, the
transition from ‘<code class=css>green</code>’ to ‘<code
class=css>blue</code>’ takes 1 second.
</div>
<p> Various things can cause the computed style of an element to change, or
for an element to start or stop having computed style. (For the purposes
of this specification, an element has computed style when it is in the
document tree, and does not have computed style when it is not in the
document tree.) These include insertion and removal of elements from the
document tree (which both changes whether those elements have computed
styles and can change the styles of other elements through selector
matching), changes to the document tree that cause changes to which
selectors match elements, changes to style sheets or style attributes, and
other things. This specification does not define when computed styles are
updated. However, when an implementation updates the computed style for an
element to reflect one of these changes, it must update the computed style
for all elements to reflect all of these changes at the same time (or at
least it must be undetectable that it was done at a different time). This
processing of a set of simultaneous style changes is called a <dfn
id=style-change-event>style change event</dfn>. (Implementations typically
have a <a href="#style-change-event">style change event</a> to correspond
with their desired screen refresh rate, and when up-to-date computed style
is needed for a script API that depends on it.)
<p> Since this specification does not define when a <a
href="#style-change-event">style change event</a> occurs, and thus what
changes to computed values are considered simultaneous, authors should be
aware that changing any of the transition properties a small amount of
time after making a change that might transition can result in behavior
that varies between implementations, since the changes might be considered
simultaneous in some implementations but not others.
<p> When a <a href="#style-change-event">style change event</a> occurs,
implementations must start transitions based on the computed styles that
changed in that event. If an element does not have a computed style either
before or after the style change event, then transitions are not started
for that element in that style change event. Otherwise, define the <dfn
id=before-change-style>before-change style</dfn> as the computed style for
the element as of the previous <a href="#style-change-event">style change
event</a>, except with any styles derived from declarative animations such
as CSS Transitions, CSS Animations (<a href="#ref-CSS3-ANIMATIONS"
rel=biblioentry>[CSS3-ANIMATIONS]<!--{{CSS3-ANIMATIONS}}--></a>), and SMIL
Animations (<a href="#ref-SMIL-ANIMATION"
rel=biblioentry>[SMIL-ANIMATION]<!--{{SMIL-ANIMATION}}--></a>, <a
href="#ref-SVG11" rel=biblioentry>[SVG11]<!--{{SVG11}}--></a>) updated to
the current time. Likewise, define the <dfn
id=after-change-style>after-change style</dfn> as the computed style for
the element based on the information known at the start of that <a
href="#style-change-event">style change event</a>, in other words,
excluding any changes resulting from CSS Transitions that start during
that <a href="#style-change-event">style change event</a>.
<p class=issue> This wording needs to handle already-running transitions
better! Need to cancel a transition that hasn't moved yet when we're
resetting to its start value! Define canceling as not firing transition
events. And point to other occurrence of canceling in reversing section.
<div class=note>
View remainder of file in raw view