CSS Transitions Module Level 2
CSS Transitions Module Level 2
Editor’s Draft
22 April 2026
More details about this document
This version:
Latest published version:
Previous Versions:
Feedback:
CSSWG Issues Repository
Bugzilla bugs for all levels
Inline In Spec
Editors:
L. David Baron
Google
Brian Birtles
Invited Expert
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 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.
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
1.
Delta specification
This is a delta specification, meaning that it currently contains
only the differences from CSS Transitions Level 1
[CSS-TRANSITIONS-1]
Once the Level 1 specification is closer to complete, it will be merged
with the additions here into a complete level 2 specification.
2.
Transitions
2.1.
The
transition-property
Property
Insert text from
CSS Transitions 1
§ 2.1 The transition-property Property
and backport the following paragraph.
Although the
transition-property
may specify shorthand properties and the
all
keyword, individual transitions are generated for each longhand
sub-property that is
transitionable
. The
expanded transition property
name
of a transition is the name of the longhand sub-property for which
the transition was generated (e.g.
border-left-width
).
Update the defining instance of
transitionable
once it is ported from Level 1.
In CSS Transitions Level 2, 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
, or
The
transition-behavior
is
allow-discrete
and they have an
animation type
that is
discrete
Note:
When values with a
discrete
animation type
are transitioned, they
flip at 50% progress.
2.2.
The
transition-duration
Property
The
transition-duration
property specifies the
iteration duration
of the transition’s associated
animation effect
2.3.
The
transition-timing-function
Property
The
transition-timing-function
property specifies the
timing function
of the transition’s associated
animation effect
(see
Web Animations
§ 4.6.11 Easing (effect timing transformations)
).
Note:
Unlike CSS animations, the timing function for CSS transitions applies to
the animation effect as opposed to the individual keyframes since this allows
it to be reflected in the
transformed progress
as used when calculating
the reversing shortening factor.
2.4.
The
transition-delay
Property
The
transition-delay
property specifies the
start delay
of the transition’s associated
animation effect
2.5.
The
transition-behavior
Property
The
transition-behavior
property specifies whether transitions will be
started or not for discrete properties.
Name:
transition-behavior
Value:

Initial:
normal
Applies to:
All elements
Inherited:
no
Percentages:
N/A
Computed value:
as specified
Canonical order:
per grammar
Animation type:
not animatable
The syntax for specifying
transition-behavior
is as follows:

= normal
allow-discrete
When
normal
is specified, transitions will not be
started for discrete properties, only for interpolable properties. When
allow-discrete
is specified, transitions will be started for discrete
properties as well as interpolable properties.
2.6.
The
transition
Shorthand Property
The syntax for specifying an item in the
transition
shorthand is as follows:

= [
none

||

Exposed
Window
partial
interface
TransitionEvent
readonly
attribute
CSSTransition
animation
};
partial
dictionary
TransitionEventInit
CSSTransition
animation
null
};

Exposed
Window
interface
CSSTransition
Animation
readonly
attribute
CSSOMString
transitionProperty
};
Issues Index
Insert text from
CSS Transitions 1
§ 2.1 The transition-property Property
and backport the following paragraph.
Update the defining instance of
transitionable
once it is ported from Level 1.
More powerful timing function syntax
is a common request from developers.
See, for example:
2013 message
or
2015 thread
Developers frequently have to trigger style flushes
in order to force transitions to start.
It would be good to have an API
that would avoid this requirement.
See, for example,
2011 proposal
We may ultimately want to support a keypath syntax
for the
transition-property
property.
A keypath syntax
would enable different transitions
to be specified
for components of a property.
For example
the blur of a shadow
could have
a different transition
than the color of a shadow.
MDN
CSSTransition/transitionProperty
In all current engines.
Firefox
75+
Safari
13.1+
Chrome
84+
Opera
Edge
84+
Edge (Legacy)
IE
None
Firefox for Android
iOS Safari
Chrome for Android
Android WebView
Samsung Internet
Opera Mobile
MDN
CSSTransition
In all current engines.
Firefox
75+
Safari
13.1+
Chrome
84+
Opera
Edge
84+
Edge (Legacy)
IE
None
Firefox for Android
iOS Safari
Chrome for Android
Android WebView
Samsung Internet
Opera Mobile