CSS Transitions Module Level 1

CSS Transitions Module Level 1
CSS Transitions Module Level 1
W3C Working Draft
6 January 2026
More details about this document
This version:
Latest published version:
Editor's Draft:
Previous Versions:
History:
Test Suites:
Feedback:
CSSWG Issues Repository
Bugzilla bugs for all levels
Editors:
L. David Baron
Google
Brian Birtles
Mozilla
Former Editors:
Dean Jackson
Apple Inc
David Hyatt
Apple Inc
Chris Marrin
Apple Inc
Suggest an Edit for this Spec:
GitHub Editor
World Wide Web Consortium
W3C
liability
trademark
and
permissive document license
rules apply.
Abstract
CSS Transitions allows property changes in CSS values to occur smoothly over a specified duration.
CSS
is a language for describing the rendering of structured documents
(such as HTML and XML)
on screen, on paper, etc.
Status of this document
This section describes the status of this document at the time of its publication.
A list of current W3C publications
and the latest revision of this technical report
can be found in the
W3C standards and drafts index.
This document was published
by the
CSS Working Group
as a
Working Draft
using the
Recommendation
track
Publication as a Working Draft
does not imply endorsement by
W3C
and its Members.
This is a draft document
and may be updated, replaced
or obsoleted by other documents at any time.
It is inappropriate to cite this document as other than a work in progress.
Please send feedback
by
filing issues in GitHub
(preferred),
including the spec code “css-transitions” in the title, like this:
“[css-transitions]
…summary of comment…
”.
All issues and comments are
archived
Alternately, feedback can be sent to the (
archived
) public mailing list
www-style@w3.org
This document is governed by the
18 August 2025 W3C Process Document
This document was produced by a group operating under the
W3C Patent Policy
W3C maintains a
public list of any patent disclosures
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 that the individual believes
contains
Essential Claim(s)
must disclose the information in accordance with
section 6 of the W3C Patent Policy
This document
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.
1.
Introduction
This section is not normative.
This document introduces new CSS features to enable
implicit transitions
, which describe how CSS properties can be made to change smoothly from one value to another over a given duration.
Tests
crashes
delete-image-set.html
(live test)
(source)
size-container-transition-crash.html
(live test)
(source)
transition-during-style-attr-mutation.html
(live test)
(source)
transition-large-word-spacing-001.html
(live test)
(source)
1.1.
Value Definitions
This specification follows the
CSS property definition conventions
from
[CSS2]
using the
value definition syntax
from
[CSS-VALUES-3]
Value types not defined in this specification are defined in CSS Values & Units
[CSS-VALUES-3]
Combination with other CSS modules may expand the definitions of these value types.
In addition to the property-specific values listed in their definitions,
all properties defined in this specification
also accept the
CSS-wide keywords
as their property value.
For readability they have not been repeated explicitly.
2.
Transitions
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 gradual transitions using new CSS properties. These properties are used to animate smoothly from the old state to the new state over time.
For example, suppose that transitions of one second have been defined on the
left
and
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.
Transitions of
left
and
background-color
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 value
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.
The transition for a property is defined using a number of new properties. For example:
Example(s):
div {
transition-property: opacity;
transition-duration: 2s;
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.
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:
Example(s):
div {
transition-property: opacity, left;
transition-duration: 2s, 4s;
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.
In the case where the lists of values in transition properties
do not have the same length, the length of the
transition-property
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
transition-property
, the user agent 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.
Note: This is analogous to the behavior of the
background-*
properties, with
background-image
analogous to
transition-property
Example(s):
div {
transition-property: opacity, left, top, width;
transition-duration: 2s, 1s;
The above example defines a transition on the
opacity
property of 2 seconds duration, a
transition on the
left
property of 1
second duration, a transition on the
top
property of 2 seconds duration and a
transition on the
width
property of 1
second duration.
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
Guideline 2.3:
Seizures:
Do not design content in a way that is known to cause seizures
[WCAG20]
).
Tests
animate-with-color-mix.html
(live test)
(source)
color-transition-premultiplied.html
(live test)
(source)
text-shadow-composition.html
(live test)
(source)
text-shadow-interpolation.html
(live test)
(source)
vertical-align-composition.html
(live test)
(source)
vertical-align-interpolation.html
(live test)
(source)
z-index-interpolation.html
(live test)
(source)
idlharness.html
(live test)
(source)
inherit-background-color-transition.html
(live test)
(source)
inheritance.html
(live test)
(source)
properties-value-001.html
(live test)
(source)
properties-value-002.html
(live test)
(source)
properties-value-003.html
(live test)
(source)
properties-value-implicit-001.html
(live test)
(source)
retargetted-transition-with-box-sizing.html
(live test)
(source)
shadow-root-insertion.html
(live test)
(source)
transition-base-response-001.html
(live test)
(source)
transition-base-response-002.html
(live test)
(source)
transition-base-response-003.html
(live test)
(source)
transition-in-iframe-001.html
(live test)
(source)
2.1.
The
transition-property
Property
The
transition-property
property specifies the name of the CSS property to which the transition is applied.
Name:
transition-property
Value:
none

Initial:
all
Applies to:
all elements
Inherited:
no
Percentages:
N/A
Computed value:
the keyword
none
else a list of identifiers
Canonical order:
per grammar
Animation type:
not animatable
Tests
move-after-transition.html
(live test)
(source)
transition-end-event-shorthands.html
(live test)
(source)
transition-property-computed.html
(live test)
(source)
transition-property-invalid.html
(live test)
(source)
transition-property-valid.html
(live test)
(source)
pseudo-element-transform.html
(live test)
(source)
pseudo-elements-001.html
(live test)
(source)
pseudo-elements-002.html
(live test)
(source)
transition-background-position-with-edge-offset.html
(live test)
(source)
transition-property-001.html
(live test)
(source)
transition-property-002.html
(live test)
(source)
transition-property-003-manual.html (manual test)
(source)
transition-property-004-manual.html (manual test)
(source)
transition-property-005-manual.html (manual test)
(source)
transition-property-006-manual.html (manual test)
(source)
transition-property-007-manual.html (manual test)
(source)
transition-property-008-manual.html (manual test)
(source)
transition-property-009-manual.html (manual test)
(source)
transition-property-010-manual.html (manual test)
(source)
transition-property-011-manual.html (manual test)
(source)
transition-property-012-manual.html (manual test)
(source)
transition-property-013-manual.html (manual test)
(source)
transition-property-014-manual.html (manual test)
(source)
transition-property-015-manual.html (manual test)
(source)
transition-property-016-manual.html (manual test)
(source)
transition-property-017-manual.html (manual test)
(source)
transition-property-018-manual.html (manual test)
(source)
transition-property-019-manual.html (manual test)
(source)
transition-property-020-manual.html (manual test)
(source)
transition-property-021-manual.html (manual test)
(source)
transition-property-022-manual.html (manual test)
(source)
transition-property-023-manual.html (manual test)
(source)
transition-property-024-manual.html (manual test)
(source)
transition-property-025-manual.html (manual test)
(source)
transition-property-026-manual.html (manual test)
(source)
transition-property-027-manual.html (manual test)
(source)
transition-property-028-manual.html (manual test)
(source)
transition-property-029-manual.html (manual test)
(source)
transition-property-030-manual.html (manual test)
(source)
transition-property-031-manual.html (manual test)
(source)
transition-property-032-manual.html (manual test)
(source)
transition-property-033-manual.html (manual test)
(source)
transition-property-034-manual.html (manual test)
(source)
transition-property-035-manual.html (manual test)
(source)
transition-property-036-manual.html (manual test)
(source)
transition-property-037-manual.html (manual test)
(source)
transition-property-038-manual.html (manual test)
(source)
transition-property-039-manual.html (manual test)
(source)
transition-property-040-manual.html (manual test)
(source)
transition-property-041-manual.html (manual test)
(source)
transition-property-042-manual.html (manual test)
(source)
transition-property-043-manual.html (manual test)
(source)
transition-property-044-manual.html (manual test)
(source)
transition-property-045-manual.html (manual test)
(source)
transition-test.html
(live test)
(source)
transition-zero-duration-with-delay.html
(live test)
(source)

all

A value of
none
means that no property will transition.
Otherwise, a list of properties to be transitioned, or the
keyword
all
which indicates that all properties are to be
transitioned, is given.
If one of the identifiers listed is not a recognized property
name, 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
transition-duration
transition-delay
, and
transition-timing-function
. In other
words, unrecognized properties must be kept in
the list to preserve the matching of indices.
The

production in

also excludes the keyword
none
in addition to the keywords always excluded from

This means that
none
inherit
, and
initial
are not
permitted as items within a list of more that one identifier;
any list that uses them is syntactically invalid.
For the keyword
all
or if one of the identifiers listed is a
shorthand property, implementations must start transitions for
all its longhand sub-properties (or, for
all
, all properties), using the duration, delay,
and timing function at the index corresponding to the shorthand.
If a property is specified multiple times in the value of
transition-property
(either on its own, via a shorthand that
contains it, or via the
all
value), then the transition that
starts uses the duration, delay, and timing function at the
index corresponding to the
last
item in the value of
transition-property
that calls for animating that property.
Note: The
all
value and
all
shorthand
property work in similar ways, so the
all
value is just like a shorthand that
covers all properties.
2.2.
The
transition-duration
Property
The
transition-duration
property defines the length of time that a transition takes.
Name:
transition-duration
Value:

Initial:
0s
Applies to:
all elements
Inherited:
no
Percentages:
N/A
Computed value:
list, each item a duration
Canonical order:
per grammar
Animation type:
not animatable
Tests
infinite-duration-crash.html
(live test)
(source)
transition-duration-computed.html
(live test)
(source)
transition-duration-invalid.html
(live test)
(source)
transition-duration-valid.html
(live test)
(source)
transition-duration-001.html
(live test)
(source)
transition-duration-002-manual.html (manual test)
(source)
transition-duration-003-manual.html (manual test)
(source)
transition-duration-004-manual.html (manual test)
(source)
transition-duration-shorthand.html
(live test)
(source)
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.
2.3.
The
transition-timing-function
Property
The
transition-timing-function
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
easing
functions.
Timing functions are defined in the separate CSS Easing Functions module
[css-easing-1]
The
input progress value
used is the percentage
of the transition duration, and the
output progress
value
is used as the
value when
interpolating
the property value (see
§ 4 Application of transitions
).
Name:
transition-timing-function
Value:

Initial:
ease
Applies to:
all elements
Inherited:
no
Percentages:
N/A
Computed value:
as specified
Canonical order:
per grammar
Animation type:
not animatable
Tests
transition-timing-function.html
(live test)
(source)
transition-timing-function-computed.html
(live test)
(source)
transition-timing-function-invalid.html
(live test)
(source)
transition-timing-function-valid.html
(live test)
(source)
transition-timing-function-002-manual.html (manual test)
(source)
transition-timing-function-003-manual.html (manual test)
(source)
transition-timing-function-004-manual.html (manual test)
(source)
transition-timing-function-005-manual.html (manual test)
(source)
transition-timing-function-006-manual.html (manual test)
(source)
transition-timing-function-010-manual.html (manual test)
(source)
2.4.
The
transition-delay
Property
The
transition-delay
property defines when the transition will start. It allows a transition to begin execution after 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.
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.
Name:
transition-delay
Value:

Initial:
0s
Applies to:
all elements
Inherited:
no
Percentages:
N/A
Computed value:
list, each item a duration
Canonical order:
per grammar
Animation type:
not animatable
Tests
transition-delay-computed.html
(live test)
(source)
transition-delay-invalid.html
(live test)
(source)
transition-delay-valid.html
(live test)
(source)
transition-delay-000-manual.html (manual test)
(source)
transition-delay-001.html
(live test)
(source)
transition-delay-002-manual.html (manual test)
(source)
transition-delay-003-manual.html (manual test)
(source)
2.5.
The
transition
Shorthand Property
The
transition
shorthand property combines the four properties described above into a single property.
Name:
transition
Value:

Initial:
see individual properties
Applies to:
all elements
Inherited:
no
Percentages:
N/A
Computed value:
see individual properties
Animation type:
not animatable
Canonical order:
per grammar
Tests
transition-computed.html
(live test)
(source)
transition-invalid.html
(live test)
(source)
transition-valid.html
(live test)
(source)
transition-shorthand.html
(live test)
(source)
transition-001.html
(live test)
(source)

= [
none

||

||

||

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.
If there is more than one

in the shorthand,
and any of the transitions has
none
as the

then the declaration is invalid.
3.
Starting of transitions
Implementations must maintain a set of
running transitions
each of which applies to a specific element and non-shorthand
property. Each of these transitions also has a
start time
end time
start value
end value
reversing-adjusted start value
, and
reversing shortening factor
Transitions are added to this set as described in this section,
and are removed from this set
when they
complete
or when implementations are required to
cancel
them.
For the rationale behind the
reversing-adjusted start value
and
reversing shortening factor
, see
§ 3.1 Faster reversing of interrupted transitions
Tests
transitioncancel-003.html
(live test)
(source)
Implementations must also maintain a set of
completed transitions
each of which
(like
running transitions
applies to a specific element and non-shorthand property.
This specification maintains the invariant that
there is never both a
running transition
and
completed transition
for the same property and element.
If an element is no longer in the document,
implementations must
cancel
any
running transitions
on it and remove transitions on it from the
completed transitions
This set of completed transitions
needs to be maintained
in order to prevent
transitions from repeating themselves in certain cases,
i.e., to maintain the invariant
that this specification tries to maintain
that unrelated style changes do not trigger transitions.
An example where maintaining the set of completed transitions
is necessary would be a transition on
an inherited property,
where the parent specifies a transition of that property for
a longer duration (say,
transition: 4s text-indent
and a child element that inherits the parent’s value specifies
a transition of the same property for a shorter duration
(say,
transition: 1s text-indent
).
Without the maintenance of this set of completed transitions,
implementations could start additional transitions on the child
after the initial 1 second transition on the child completes.
Various things can cause the
computed values
of properties
on an element to change.
These include
insertion and removal of elements from the document tree
(which both changes whether those elements have
computed values
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 values
are updated,
beyond saying that implementations must not
use, present, or display something resulting from the CSS
cascading, value computation, and inheritance process
[CSS3CASCADE]
without updating the
computed value
(which means merely that implementations cannot avoid
meeting requirements of this specification
by claiming not to have updated the
computed value
as part of handling a style change).
However,
when an implementation updates the
computed value
of a
property on an element
to reflect one of these changes,
or computes the
computed value
of a property on an element
newly added to the document,
it must update the
computed value
for all properties and 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
style change event
(Implementations typically have a
style change event
to
correspond with their desired screen refresh rate,
and when up-to-date computed style or layout information is needed
for a script API that depends on it.)
Tests
no-transition-from-ua-to-blocking-stylesheet.html
(live test)
(source)
Since this specification does not define
when a
style change event
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.
When a
style change event
occurs,
implementations must start transitions based on
the
computed values
that changed in that event.
If an element is not in the document during that
style change event or was not in the document during
the previous style change event,
then transitions are not started for that element
in that style change event.
Otherwise,
define the
before-change style
as
the
computed values
of all properties on the element as of
the previous
style change event
except with any styles derived from declarative
animations such as CSS Transitions, CSS Animations
[CSS3-ANIMATIONS]
),
and SMIL Animations (
[SMIL-ANIMATION]
[SVG11]
updated to the current time.
Likewise, define the
after-change style
as
the
computed values
of all properties
on the element based on the information
known at the start of that
style change event
but using the computed values of the
animation-*
properties from the
before-change style
excluding any styles from CSS Transitions in the computation,
and inheriting from
the
after-change style
of the parent.
Note that this means the
after-change style
does not differ from
the
before-change style
due to newly created or canceled CSS
Animations.
Tests
after-change-style-inherited-try-fallback.html
(live test)
(source)
after-change-style-inherited.html
(live test)
(source)
change-duration-during-transition.html
(live test)
(source)
Note that this definition of the
after-change style
means that a single change
can start a transition on the same property
on both an ancestor element and its descendant element.
This can happen when a property change is inherited
from one element with
transition-*
properties
that say to animate the changing property
to another element with
transition-*
properties
that also say to animate the changing property.
When this happens, both transitions will run,
and the transition on the descendant will override
the transition on the ancestor
because of the normal
CSS cascading and inheritance rules (
[CSS3CASCADE]
).
If the transition on the descendant completes before
the transition on the ancestor,
the descendant will then resume inheriting
the (still transitioning) value from its parent.
This effect is likely not a desirable effect,
but it is essentially doing what the author asked for.
For each element with a
before-change style
and
an
after-change style
and each property (other than shorthands),
define the
matching transition-property value
as
the last value in the
transition-property
in the element’s
after-change style
that matches the property,
as described in
§ 2.1 The transition-property Property
If there is such a value, then corresponding to it, there is
matching transition duration
matching transition delay
, and
matching transition timing function
in the values in the
after-change style
of
transition-duration
transition-delay
, and
transition-timing-function
(see
the rules on matching lists
).
Define the
combined duration
of the transition
as the sum of max(
matching transition duration
0s
) and
the
matching transition delay
When comparing the
before-change style
and
after-change style
for a given property,
the property values are
transitionable
if they have an
animation type
that is
neither
not animatable
nor
discrete
Note:
Even if a
property
is defined to have an
animation type
that is
not
discrete
for a particular pair of
property values
the
animation type
may be
discrete
For example,
the
animation type
of the
box-shadow
property is
shadow list
which defines that
when the
inset
keyword is absent in one value
but present in the other,
discrete
animation is used.
As a result
0px 0px black
and
inset 10px 10px black
are
not
transitionable
For each element and property, the implementation must act
as follows:
If all of the following are true:
the element does not have
running transition
for the property,
the
before-change style
is different from
the
after-change style
for that property,
and the values for the property are
transitionable
the element does not have a
completed transition
for the property
or the
end value
of the
completed transition
is different from the
after-change style
for the property,
there is a
matching transition-property value
, and
the
combined duration
is greater than
0s
then implementations must
remove the
completed transition
(if present) from the set
of completed transitions and
start a transition whose:
start time
is
the time of the
style change event
plus
the
matching transition delay
end time
is
the
start time
plus
the
matching transition duration
start value
is
the value of the transitioning property
in the
before-change style
end value
is
the value of the transitioning property
in the
after-change style
reversing-adjusted start value
is the same as
the
start value
, and
reversing shortening factor
is 1.
Otherwise,
if the element has a
completed transition
for the property
and the
end value
of the
completed transition
is different from the
after-change style
for the property,
then implementations must
remove the
completed transition
from the set of
completed transitions
If the element has a
running transition
or
completed transition
for the property,
and there is
not
matching transition-property value
then implementations must
cancel
the
running transition
or remove the
completed transition
from the set of
completed transitions
If the element has a
running transition
for the property,
there is a
matching transition-property value
and the
end value
of the
running transition
is
not
equal to the value of the property in the
after-change style
, then:
If the
current value
of the property
in the
running transition
is equal to
the value of the property in the
after-change style
or if these two values are not
transitionable
then implementations must
cancel
the
running transition
Otherwise, if the
combined duration
is
less than or equal to
0s
or if the
current value
of the property in the
running transition
is not
transitionable
with
the value of the property in the
after-change style
then implementations must
cancel
the
running transition
Otherwise, if the
reversing-adjusted start value
of the
running transition
is the same as the value of
the property in the
after-change style
(see the
section on reversing of
transitions
for why these case exists)
implementations must
cancel
the
running transition
and
start a new transition whose:
reversing-adjusted start value
is
the
end value
of the
running transition
(Note: This represents the logical start state of
the transition, and allows some calculations to ignore that
the transition started before that state was reached, which
in turn allows repeated reversals of the same transition to
work correctly),
reversing shortening factor
is the absolute value, clamped to the range [0, 1],
of the sum of:
the output of the timing function of the old transition
at the time of the
style change event
times the
reversing shortening factor
of the
old transition
1 minus the
reversing shortening factor
of
the old transition.
Note: This represents the portion of the
space between the
reversing-adjusted start value
and the
end value
that the old transition has
traversed (in amounts of the value, not time), except with the
absolute value and clamping to handle timing functions that
have y1 or y2 outside the range [0, 1].
start time
is
the time of the
style change event
plus:
if the
matching transition delay
is nonnegative,
the
matching transition delay
, or
if the
matching transition delay
is negative,
the product of
the new transition’s
reversing shortening factor
and
the
matching transition delay
end time
is
the
start time
plus the product of
the
matching transition duration
and
the new transition’s
reversing shortening factor
start value
is
the
current value
of the property
in the
running transition
end value
is
the value of the property
in the
after-change style
Otherwise, implementations must
cancel
the
running transition
and start a new transition whose:
start time
is
the time of the
style change event
plus
the
matching transition delay
end time
is
the
start time
plus
the
matching transition duration
start value
is
the
current value
of the property
in the
running transition
end value
is
the value of the property
in the
after-change style
reversing-adjusted start value
is the same as
the
start value
, and
reversing shortening factor
is 1.
Note that the above rules mean that
when the computed value of an animatable property changes,
the transitions that start are based on the
values of the
transition-property
transition-duration
transition-timing-function
, and
transition-delay
properties
at the time the animatable property would first have its new
computed value.
This means that when one of these
transition-*
properties
changes at the same time as
a property whose change might transition,
it is the
new
values of the
transition-*
properties
that control the transition.
Example(s):
This provides a way for authors to specify different values
of the
transition-*
properties for the “forward”
and “reverse” transitions,
when the transitions are between two states
(but see
below
for special reversing behavior when
an
incomplete
transition is interrupted). Authors can
specify the value of
transition-duration
transition-timing-function
, or
transition-delay
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
transition-*
properties that affect the
transition, these values will be used for the transitions
to
the associated transitioning values. For example:
li {
transition: background-color linear 1s;
background: blue;
li:hover {
background-color: green;
transition-duration: 2s; /* applies to the transition *to* the :hover state */
When a list item with these style rules enters the :hover
state, the computed
transition-duration
at the time that
background-color
would have its new value (
green
) is
2s
so the transition from
blue
to
green
takes 2 seconds.
However, when the list item leaves the :hover state, the
transition from
green
to
blue
takes 1 second.
Note that once the transition of a property has started
(including being in its delay phase),
it continues running based on
the original timing function, duration, and
delay, even if the
transition-timing-function
transition-duration
, or
transition-delay
property changes
before the transition is complete. However, if the
transition-property
property changes such that the transition
would not have started, the transition stops (and the
property immediately changes to its final value).
Note that above rules mean that
transitions do not start when the computed
value of a property changes as a result of declarative animation
(as opposed to scripted animation).
This happens because the before-change style includes up-to-date
style for declarative animations.
Tests
before-load-001.html
(live test)
(source)
changing-while-transition-001.html
(live test)
(source)
changing-while-transition-002.html
(live test)
(source)
changing-while-transition-003.html
(live test)
(source)
changing-while-transition-004.html
(live test)
(source)
currentcolor-animation-001.html
(live test)
(source)
disconnected-element-001.html
(live test)
(source)
dynamic-root-element.html
(live test)
(source)
historical.html
(live test)
(source)
inherit-height-transition.html
(live test)
(source)
non-rendered-element-001.html
(live test)
(source)
non-rendered-element-002.html
(live test)
(source)
properties-value-inherit-001.html
(live test)
(source)
properties-value-inherit-002.html
(live test)
(source)
properties-value-inherit-003.html
(live test)
(source)
starting-of-transitions-001.html
(live test)
(source)
root-color-transition.html
(live test)
(source)
transition-after-animation-001.html
(live test)
(source)
transition-remove-and-change-immediate.html
(live test)
(source)
transition-reparented.html
(live test)
(source)
transitions-retarget.html
(live test)
(source)
zero-duration-multiple-transition.html
(live test)
(source)
3.1.
Faster reversing of interrupted transitions
Many common transitions effects involve transitions between two states,
such as the transition that occurs when the mouse pointer moves
over a user interface element, and then later moves out of that element.
With these effects, it is common for a running transition
to be interrupted before it completes,
and the property reset to the starting value of that transition.
An example is a hover effect on an element,
where a transition starts when the pointer enters the element,
and then the pointer exits the element before the effect has completed.
If the outgoing and incoming transitions
are executed using their specified durations and timing functions,
the resulting effect can be distractingly asymmetric
because the second transition
takes the full specified time to move a shortened distance.
Instead, this specification makes second transition shorter.
The mechanism the above rules use to cause this involves the
reversing shortening factor
and the
reversing-adjusted start value
In particular, the reversing behavior is present whenever
the
reversing shortening factor
is less than 1.
Note that these rules do not fully address the problem for
transition patterns that involve more than two states.
Note that these rules lead to the entire timing function of the
new transition being used, rather than jumping into the middle
of a timing function, which can create a jarring effect.
This was one of several possibilities that was considered by the
working group. See the
reversing demo
demonstrating a number of them, leading to a working group
resolution made on 2013-06-07 and edits made on 2013-11-11.
4.
Application of transitions
When a property on an element is undergoing a transition
(that is, when or after the transition has started and before the
end time
of the transition)
the transition adds a style called the
current value
to the CSS cascade
at the level defined for CSS Transitions in
[CSS3CASCADE]
Tests
transition-important.html
(live test)
(source)
Note that this means that computed values
resulting from CSS transitions
can inherit to descendants just like
any other computed values.
In the normal case, this means that
a transition of an inherited property
applies to descendant elements
just as an author would expect.
Implementations must add this value to the cascade
if and only if
that property is not currently
undergoing a CSS Animation (
[CSS3-ANIMATIONS]
) on the same element.
Note that this behavior of transitions not applying to the cascade
when an animation on the same element and property is running
does not affect whether the transition has started or ended.
APIs that expose whether transitions are running
(such as
transition events
still report that a transition is running.
If the current time is at or before the
start time
of the transition
(that is, during the delay phase of the transition),
the
current value
is a specified style that will compute
to the
start value
of the transition.
If the current time is after the
start time
of the transition
(that is, during the duration phase of the transition),
the
current value
is a specified style that will compute
to the result of
interpolating
the property
using the following values:
start value
of the transition
end value
of the transition
: the output of the
timing function
for input (current time - start time) / (end time - start time)
The specific
interpolation
procedure to be used
is defined by the property’s
animation type
5.
Completion of transitions
Running transitions
complete
at a time that is equal to or after their end time,
but prior to the first
style change event
whose time is equal to or after their
end time
When a transition completes,
implementations must move
all transitions that complete at that time
from the set of
running transitions
to the set of
completed transitions
and then fire the
events
for those completions.
(Note that doing otherwise, that is,
firing some of the events before doing all of the moving
from
running transitions
to
completed transitions
could allow
a style change event to happen
without the necessary transitions completing,
since firing the event could cause a style change event,
if an event handler requests up-to-date computed style or
layout data.)
6.
Transition Events
The creation, beginning, completion, and cancellation of CSS transitions
generate corresponding DOM Events.
An event is
dispatched
to the element for each property that undergoes
a transition on that element.
This allows a content developer to perform actions that synchronize
with changes to transitions.
Each event provides the name of the property the transition is
associated with as well as the duration of the transition.
Tests
transition-events-with-document-change.html
(live test)
(source)
6.1.
Interface
TransitionEvent
The
TransitionEvent
interface provides specific contextual information
associated with transitions.
6.1.1.
IDL Definition
Exposed
Window
interface
TransitionEvent
Event
constructor
CSSOMString
type
optional
TransitionEventInit
transitionEventInitDict
= {});
readonly
attribute
CSSOMString
propertyName
readonly
attribute
double
elapsedTime
readonly
attribute
CSSOMString
pseudoElement
};
dictionary
TransitionEventInit
EventInit
CSSOMString
propertyName
= "";
double
elapsedTime
= 0.0;
CSSOMString
pseudoElement
= "";
};
Tests
transitionevent-interface.html
(live test)
(source)
6.1.2.
Attributes
propertyName
of type
CSSOMString
, readonly
The name of the CSS property associated with the transition.
Note: This is always the name of a longhand property. See
transition-property
for how specifying shorthand properties causes transitions on longhands.
elapsedTime
of type
double
, readonly
The amount of time the transition has been running, in seconds, when this
event fired not including any time spent in the delay phase.
The calculation for of this member is defined along with each event type.
pseudoElement
of type
CSSOMString
, readonly
The name (beginning with two colons) of the CSS
pseudo-element on which the transition occurred (in
which case the target of the event is that
pseudo-element’s corresponding element), or the empty
string if the transition occurred on an element (which
means the target of the event is that element).
TransitionEvent(type, transitionEventInitDict)
is an
event constructor
6.2.
Types of
TransitionEvent
The different types of transition events that can occur are:
transitionrun
The
transitionrun
event occurs when a transition is created (i.e.,
when it is added to the set of
running transitions
).
A negative
transition-delay
will cause the event to fire with
an
elapsedTime
equal to the absolute value of the
delay capped to the
transition-duration
of the animation. That is,
the elapsed time is equal to
min(max(-
transition-delay
, 0),
transition-duration
Bubbles: Yes
Cancelable: No
Context Info: propertyName, elapsedTime, pseudoElement
transitionstart
The
transitionstart
event occurs when a transition’s delay phase ends.
The value of
elapsedTime
for
transitionstart
events is the same as the value used for
transitionrun
events.
Bubbles: Yes
Cancelable: No
Context Info: propertyName, elapsedTime, pseudoElement
transitionend
The
transitionend
event occurs at the completion of the transition. In
the case where a transition is removed before completion, such as if the
transition-property
is removed, then the event will not fire.
The value of
elapsedTime
for this event is equal to
the value of
transition-duration
Bubbles: Yes
Cancelable: No
Context Info: propertyName, elapsedTime, pseudoElement
Tests
events-001.html
(live test)
(source)
events-002.html
(live test)
(source)
events-003.html
(live test)
(source)
events-004.html
(live test)
(source)
events-005.html
(live test)
(source)
events-006.html
(live test)
(source)
events-007.html
(live test)
(source)
transitioncancel
The
transitioncancel
event occurs when a transition is
canceled
The
elapsedTime
for
transitioncancel
events is
the number of seconds from the end of the transition’s delay to the
moment when the transition was canceled.
If the transition had a negative
transition-delay
, the beginning of the
transition is the moment equal to the absolute value of
transition-delay
seconds
prior
to when the transition was actually triggered.
Alternatively, if the transition had a positive
transition-delay
and the
event is fired before the transition’s delay has expired, the
elapsedTime
will be zero.
Bubbles: Yes
Cancelable: No
Context Info: propertyName, elapsedTime, pseudoElement
Tests
transitioncancel-001.html
(live test)
(source)
transitioncancel-002.html
(live test)
(source)
6.3.
Event handlers on elements,
Document
objects, and
Window
objects
The following are the
event handlers
(and their corresponding
event
handler event types
) that must be supported by all
HTML elements
, as
both
event handler content attributes
and
event handler IDL
attributes
; and that must be supported by all
Document
and
Window
objects, as
event handler IDL attributes
Event handler
Event handler event type
ontransitionrun
transitionrun
ontransitionstart
transitionstart
ontransitionend
transitionend
ontransitioncancel
transitioncancel
7.
DOM Interfaces
This specification extends the
GlobalEventHandlers
interface mixin from HTML to
add
event handler IDL attributes
for
transition events
as defined in
§ 6.3 Event handlers on elements, Document objects, and Window objects
7.1.
IDL Definition
partial
interface
mixin
GlobalEventHandlers
attribute
EventHandler
ontransitionrun
attribute
EventHandler
ontransitionstart
attribute
EventHandler
ontransitionend
attribute
EventHandler
ontransitioncancel
};
8.
Security Considerations
This section is not normative.
The security implications of this specification are limited
because it doesn’t allow Web content to do things
that it could not do before.
Rather, it allows things that could previously be done with script
to be done declaratively,
and it ways that implementations can optimize (for frame rate and
CPU usage).
One of the major categories of optimizations
that implementations can make is implementing animation
of certain high-value properties (such as
transform
and
opacity
run on a browser’s compositor thread or process
without updating style or layout on the main Web content thread
unless up-to-date style data are needed.
This optimization often requires allocations of graphics memory
to display the contents of the element being animated.
Implementations should take care to ensure that Web content
cannot trigger unsafe out-of-memory handling
by using large numbers of animations
or animations on elements covering large areas
(where large may be defined in terms of pre-transform or post-transform size).
9.
Privacy Considerations
This section is not normative.
As for security, the privacy considerations of this specification are limited
because it does not allow Web content to do things that it could not do before.
This specification may provide additional mechanisms that help to determine
characteristics of the user’s hardware or software.
However, ability to determine performance characteristics of the user’s
hardware or software is common to many Web technologies,
and this specification does not introduce new capabilities.
As described in
§ 10 Accessibility Considerations
implementations may provide mitigations to help users with disabilities.
These mitigations are likely to be detectable by Web content,
which means that users who would benefit from these mitigations
may face a tradeoff between keeping their disability private from
the Web content or benefiting from the mitigation.
10.
Accessibility Considerations
This section is not normative.
10.1.
Motion
This specification provides declarative mechanisms for animations
that previously needed to be done using script.
Providing a declarative mechanism has multiple effects:
it makes such animations easier to make and thus likely to be more common,
but it also makes it easier for user agents to modify those animations
if such modifications are needed to meet a user’s accessibility needs.
Thus, users who are sensitive to movement,
or who require additional time to read or understand content,
may benefit from user agent features that allow
animations to be disabled or slowed down.
(But see
§ 9 Privacy Considerations
for information on the privacy implications
of such mitigations.)
User agent implementors should be aware that Web content
may depend on the firing of
transition events
so implementations of such mitigations may wish to fire transition events
even if the transitions were not run as continuous animations.
However, it is probably poor practice for Web content to depend on
such events to function correctly.
10.2.
Cascade
The CSS
cascade
is a general mechanism in CSS
that allows user needs to interact with author styles.
This specification interacts with the cascade,
but since it only allows animation between values
that result from the existing cascade rules,
it does not interfere with the user’s ability to force
CSS properties to have particular values.
The cascade also allows users to disable transitions entirely
by overriding the transition properties.
11.
Changes
11.1.
Changes since Working Draft of 11 October 2018
The following are the substantive changes made since the
Working Draft
dated 11 October 2018
Clarified that
GlobalEventHandlers
is a mixin.
Replaced defunct

by

Added default value to
transitionEventInitDict
dictionary.
Removed trailing semicolon from

syntax.
Associated event definitions with their
GlobalEventHandlers
container.
Added range definition notations to property values.
Added Web Platform Tests coverage.
Minor editorial fixes and improvements.
For more details on these changes, see the version control
change log
11.2.
Earlier changes
For changes in earlier working drafts:
See the
changes
section in the 11 October 2018 Working Draft
See the
changes
section in the 30 November 2017 Working Draft
See the
changes
section in the 19 November 2013 Working Draft
See the
the
ChangeLog
for changes in previous working drafts.
For more details on these changes, see the version control change logs,
which are split in many parts because of file renaming:
change log since 2017 October 12
change log from 2015 January 26 to 2017 October 12
change log from 2013 March 28 to 2015 January 26
change log before 2013 March 28
12.
Acknowledgments
Thanks especially to the feedback from
Tab Atkins,
Carine Bournez,
Aryeh Gregor,
Vincent Hardy,
Anne van Kesteren,
Cameron McCormack,
Alex Mogilevsky,
Jasper St. Pierre,
Estelle Weyl,
and all the rest of the
www-style
community.
Tests
Tests related to later levels of this specification
allow-discrete-auto-inset.html
(live test)
(source)
custom-property-and-allow-discrete.html
(live test)
(source)
display-none-no-animations.html
(live test)
(source)
idlharness-2.html
(live test)
(source)
inert-while-transitioning-to-display-none.html
(live test)
(source)
starting-style-parsing.html
(live test)
(source)
transition-behavior.html
(live test)
(source)
starting-style-adjustment.html
(live test)
(source)
starting-style-cascade.html
(live test)
(source)
starting-style-first-letter-crash.html
(live test)
(source)
starting-style-name-defining-rules.html
(live test)
(source)
starting-style-rule-basic.html
(live test)
(source)
starting-style-rule-none.html
(live test)
(source)
starting-style-rule-pseudo-elements.html
(live test)
(source)
starting-style-size-container.html
(live test)
(source)
transition-behavior.html
(live test)
(source)
transition-behavior-events.html
(live test)
(source)
Conformance
Document conventions
Conformance requirements are expressed with a combination of
descriptive assertions and RFC 2119 terminology. The key words “MUST”,
“MUST NOT”, “REQUIRED”, “SHALL”, “SHALL NOT”, “SHOULD”, “SHOULD NOT”,
“RECOMMENDED”, “MAY”, and “OPTIONAL” in the normative parts of this
document are to be interpreted as described in RFC 2119.
However, for readability, these words do not appear in all uppercase
letters in this specification.
All of the text of this specification is normative except sections
explicitly marked as non-normative, examples, and notes.
[RFC2119]
Examples in this specification are introduced with the words “for example”
or are set apart from the normative text with
class="example"
like this:
This is an example of an informative example.
Informative notes begin with the word “Note” and are set apart from the
normative text with
class="note"
, like this:
Note, this is an informative note.
Advisements are normative sections styled to evoke special attention and are
set apart from other normative text with

, like
this:
UAs MUST provide an accessible alternative.
Tests
Tests relating to the content of this specification
may be documented in “Tests” blocks like this one.
Any such block is non-normative.
Conformance classes
Conformance to this specification
is defined for three conformance classes:
style sheet
CSS
style sheet
renderer
UA
that interprets the semantics of a style sheet and renders
documents that use them.
authoring tool
UA
that writes a style sheet.
A style sheet is conformant to this specification
if all of its statements that use syntax defined in this module are valid
according to the generic CSS grammar and the individual grammars of each
feature defined in this module.
A renderer is conformant to this specification
if, in addition to interpreting the style sheet as defined by the
appropriate specifications, it supports all the features defined
by this specification by parsing them correctly
and rendering the document accordingly. However, the inability of a
UA to correctly render a document due to limitations of the device
does not make the UA non-conformant. (For example, a UA is not
required to render color on a monochrome monitor.)
An authoring tool is conformant to this specification
if it writes style sheets that are syntactically correct according to the
generic CSS grammar and the individual grammars of each feature in
this module, and meet all other conformance requirements of style sheets
as described in this module.
Partial implementations
So that authors can exploit the forward-compatible parsing rules to
assign fallback values, CSS renderers
must
treat as invalid (and
ignore
as appropriate
) any at-rules, properties, property values, keywords,
and other syntactic constructs for which they have no usable level of
support. In particular, user agents
must not
selectively
ignore unsupported component values and honor supported values in a single
multi-value property declaration: if any value is considered invalid
(as unsupported values must be), CSS requires that the entire declaration
be ignored.
Implementations of Unstable and Proprietary Features
To avoid clashes with future stable CSS features,
the CSSWG recommends
following best practices
for the implementation of
unstable
features and
proprietary extensions
to CSS.
Non-experimental implementations
Once a specification reaches the Candidate Recommendation stage,
non-experimental implementations are possible, and implementors should
release an unprefixed implementation of any CR-level feature they
can demonstrate to be correctly implemented according to spec.
To establish and maintain the interoperability of CSS across
implementations, the CSS Working Group requests that non-experimental
CSS renderers submit an implementation report (and, if necessary, the
testcases used for that implementation report) to the W3C before
releasing an unprefixed implementation of any CSS features. Testcases
submitted to W3C are subject to review and correction by the CSS
Working Group.
Further information on submitting testcases and implementation reports
can be found from on the CSS Working Group’s website at
Questions should be directed to the
public-css-testsuite@w3.org
mailing list.
Index
Terms defined by this specification
after-change style
, in § 3
all
, in § 2.1
before-change style
, in § 3
cancel
, in § 3
combined duration
, in § 3
complete
, in § 5
completed transition
, in § 3
constructor(type)
, in § 6.1.2
constructor(type, transitionEventInitDict)
, in § 6.1.2
current value
, in § 4
elapsedTime
attribute for TransitionEvent
, in § 6.1.2
dict-member for TransitionEventInit
, in § 6.1.1
end time
, in § 3
end value
, in § 3
matching transition delay
, in § 3
matching transition duration
, in § 3
matching transition-property value
, in § 3
matching transition timing function
, in § 3
none
, in § 2.1
ontransitioncancel
, in § 7.1
ontransitionend
, in § 7.1
ontransitionrun
, in § 7.1
ontransitionstart
, in § 7.1
propertyName
attribute for TransitionEvent
, in § 6.1.2
dict-member for TransitionEventInit
, in § 6.1.1
pseudoElement
attribute for TransitionEvent
, in § 6.1.2
dict-member for TransitionEventInit
, in § 6.1.1
reversing-adjusted start value
, in § 3
reversing shortening factor
, in § 3
running transition
, in § 3

, in § 2.5

, in § 2.1
start time
, in § 3
start value
, in § 3
style change event
, in § 3
transition
, in § 2.5
transitionable
, in § 3
transitioncancel
, in § 6.2
transition-delay
, in § 2.4
transition-duration
, in § 2.2
transitionend
, in § 6.2
TransitionEvent
, in § 6.1.1
TransitionEventInit
, in § 6.1.1
TransitionEvent(type)
, in § 6.1.2
TransitionEvent(type, transitionEventInitDict)
, in § 6.1.2
transition-property
, in § 2.1
transitionrun
, in § 6.2
Transitions
, in § 1.1
transitionstart
, in § 6.2
transition-timing-function
, in § 2.3
Terms defined by reference
[]
defines the following terms:
event constructor
inset
[CSS-BACKGROUNDS-3]
defines the following terms:
background-image
box-shadow
[CSS-CASCADE-5]
defines the following terms:
all
computed value
inherit
initial
[CSS-CASCADE-6]
defines the following terms:
cascade
[CSS-COLOR-4]
defines the following terms:
blue
green
opacity
[CSS-EASING-2]
defines the following terms:

input progress value
output progress value
[CSS-TRANSFORMS-1]
defines the following terms:
transform
[CSS-VALUES-3]
defines the following terms:

[CSS-VALUES-4]
defines the following terms:

CSS-wide keywords
interpolate
interpolation
||
[CSS2]
defines the following terms:
background-color
left
top
width
[CSS3-ANIMATIONS]
defines the following terms:
elapsedTime
[CSSOM-1]
defines the following terms:
CSSOMString
[DOM]
defines the following terms:
Event
EventInit
[HTML]
defines the following terms:
Document
EventHandler
GlobalEventHandlers
Window
dispatch
event handler content attributes
event handler event type
event handler IDL attributes
event handlers
HTML elements
[WEB-ANIMATIONS-1]
defines the following terms:
animation type
combining shadow lists
discrete
not animatable
[WEBIDL]
defines the following terms:
Exposed
double
References
Normative References
[CSS-CASCADE-5]
Elika Etemad; Miriam Suzanne; Tab Atkins Jr..
CSS Cascading and Inheritance Level 5
. 13 January 2022. CR. URL:
[CSS-CASCADE-6]
Elika Etemad; Miriam Suzanne; Tab Atkins Jr..
CSS Cascading and Inheritance Level 6
. 6 September 2024. WD. URL:
[CSS-COLOR-4]
Tab Atkins Jr.; Chris Lilley; Lea Verou.
CSS Color Module Level 4
. 14 April 2026. CRD. URL:
[CSS-EASING-1]
Brian Birtles; Dean Jackson; Matt Rakow.
CSS Easing Functions Level 1
. 13 February 2023. CRD. URL:
[CSS-EASING-2]
CSS Easing Functions Level 2
. 29 August 2024. FPWD. URL:
[CSS-TRANSFORMS-1]
Simon Fraser; et al.
CSS Transforms Module Level 1
. 14 February 2019. CR. URL:
[CSS-VALUES-3]
Tab Atkins Jr.; Elika Etemad.
CSS Values and Units Module Level 3
. 22 March 2024. CRD. URL:
[CSS-VALUES-4]
Tab Atkins Jr.; Elika Etemad.
CSS Values and Units Module Level 4
. 12 March 2024. WD. URL:
[CSS2]
Bert Bos; et al.
Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification
. 7 June 2011. REC. URL:
[CSS3-ANIMATIONS]
David Baron; et al.
CSS Animations Level 1
. 2 March 2023. WD. URL:
[CSS3CASCADE]
Elika Etemad; Tab Atkins Jr..
CSS Cascading and Inheritance Level 3
. 11 February 2021. REC. URL:
[CSSOM-1]
Daniel Glazman; Emilio Cobos Álvarez.
CSS Object Model (CSSOM)
. 26 August 2021. WD. URL:
[DOM]
Anne van Kesteren.
DOM Standard
. Living Standard. URL:
[HTML]
Anne van Kesteren; et al.
HTML Standard
. Living Standard. URL:
[RFC2119]
S. Bradner.
Key words for use in RFCs to Indicate Requirement Levels
. March 1997. Best Current Practice. URL:
[WEB-ANIMATIONS-1]
Brian Birtles; et al.
Web Animations
. 5 June 2023. WD. URL:
[WEBIDL]
Edgar Chen; Timothy Gu.
Web IDL Standard
. Living Standard. URL:
Non-Normative References
[CSS-BACKGROUNDS-3]
Elika Etemad; Brad Kemper.
CSS Backgrounds and Borders Module Level 3
. 11 March 2024. CRD. URL:
[SMIL-ANIMATION]
Patrick Schmitz; Aaron Cohen.
SMIL Animation
. 4 September 2001. REC. URL:
[SVG11]
Erik Dahlström; et al.
Scalable Vector Graphics (SVG) 1.1 (Second Edition)
. 16 August 2011. REC. URL:
[WCAG20]
Ben Caldwell; et al.
Web Content Accessibility Guidelines (WCAG) 2.0
. 11 December 2008. REC. URL:
Property Index
Name
Value
Initial
Applies to
Inh.
%ages
Anim­ation type
Canonical order
Com­puted value
transition
#
see individual properties
all elements
no
N/A
not animatable
per grammar
see individual properties
transition-delay
#
0s
all elements
no
N/A
not animatable
per grammar
list, each item a duration
transition-duration
#
0s
all elements
no
N/A
not animatable
per grammar
list, each item a duration
transition-property
none | #
all
all elements
no
N/A
not animatable
per grammar
the keyword none else a list of identifiers
transition-timing-function
#
ease
all elements
no
N/A
not animatable
per grammar
as specified
IDL Index
Exposed
Window
interface
TransitionEvent
Event
constructor
CSSOMString
type
optional
TransitionEventInit
transitionEventInitDict
= {});
readonly
attribute
CSSOMString
propertyName
readonly
attribute
double
elapsedTime
readonly
attribute
CSSOMString
pseudoElement
};
dictionary
TransitionEventInit
EventInit
CSSOMString
propertyName
= "";
double
elapsedTime
= 0.0;
CSSOMString
pseudoElement
= "";
};
partial
interface
mixin
GlobalEventHandlers
attribute
EventHandler
ontransitionrun
attribute
EventHandler
ontransitionstart
attribute
EventHandler
ontransitionend
attribute
EventHandler
ontransitioncancel
};