Widely availableUseful when Transitions (CSS) improves perceived continuity or state change, but motion should remain optional and purposeful.
Animation Widely available

Transitions (CSS)

The transition shorthand CSS property sets how changes to an element's styles may occur over time. Transitions can be applied to specific CSS properties, all properties, or none.

Animation

Overview

The transition shorthand CSS property sets how changes to an element's styles may occur over time. Transitions can be applied to specific CSS properties, all properties, or none.

Browser support

Feature Desktop Mobile
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
transition
26
12
16
9
26
9
DOM API
CSSTransition

The CSSTransition interface of the Web Animations API represents an Animation object used for a CSS Transition.
84
84
75
13.1
84
13.4
transitionProperty

The transitionProperty property of the CSSTransition interface returns the expanded transition property name of the transition. This is the longhand CSS property for which the transition was generated.
84
84
75
13.1
84
13.4
transitioncancel_event

The transitioncancel event is fired when a CSS transition is canceled.
87
87
53
13.1
87
13.4
transitionend_event

The transitionend event is fired when a CSS transition has completed. In the case where a transition is removed before completion, such as if the transition-property is removed or display is set to none, then the event will not be generated.
26
18
51
7
26
7
transitionrun_event

The transitionrun event is fired when a CSS transition is first created, i.e., before any transition-delay has begun.
74
12
53
13.1
74
13.4
transitionstart_event

The transitionstart event is fired when a CSS transition has actually started, i.e., after any transition-delay has ended.
74
12
53
13.1
74
13.4
TransitionEvent

The TransitionEvent interface represents events providing information related to transitions.
27
12
4
7
27
7
elapsedTime

The TransitionEvent.elapsedTime read-only property is a float giving the amount of time the animation has been running, in seconds, when this event fired. This value is not affected by the transition-delay property.
2
12
4
6
18
6
propertyName

The propertyName read-only property of TransitionEvent objects is a string containing the name of the CSS property associated with the transition.
2
12
4
6
18
6
pseudoElement

The TransitionEvent.pseudoElement read-only property is a string, starting with '::', containing the name of the pseudo-element the animation runs on. If the transition doesn't run on a pseudo-element but on the element, an empty string: "".
2
79
23
6
18
6
TransitionEvent

The TransitionEvent() constructor returns a new TransitionEvent object, representing an event in relation with a transition.
27
14
23
7
27
7
Other
css.properties.transition-delay

The transition-delay CSS property specifies the duration to wait before starting a property's transition effect when its value changes.
26
12
16
9
26
9
css.properties.transition-duration

The transition-duration CSS property sets the length of time a transition animation should take to complete. By default, the value is 0s, meaning that no animation will occur.
26
12
16
9
26
9
css.properties.transition-property

The transition-property CSS property sets the CSS properties to which a transition effect should be applied.
26
12
16
9
26
9
CSS property
IDENT value

`IDENT` value
1
12
16
4
18
3
all
1
12
4
3.1
18
2
none
1
12
4
3.1
18
2
Other
css.properties.transition-timing-function

The transition-timing-function CSS property sets how intermediate values are calculated for CSS properties being affected by a transition effect.
26
12
16
9
26
9
CSS property
ease
1
12
4
3.1
18
2
ease-in
1
12
4
3.1
18
2
ease-in-out
1
12
4
3.1
18
2
ease-out
1
12
4
3.1
18
2
jump

`jump-` keywords for `steps()`
77
79
65
14
77
14
linear
1
12
4
3.1
18
2
step-end
1
12
4
3.1
18
2
step-start
1
12
4
3.1
18
2
all
1
12
4
3.1
18
2
ease
1
12
4
3.1
18
2
ease-in
1
12
4
3.1
18
2
ease-in-out
1
12
4
3.1
18
2
ease-out
1
12
4
3.1
18
2
gradients can animate

Gradients can be animated
12
Preview
linear
1
12
4
3.1
18
2
none
1
12
4
3.1
18
2
step-end
1
12
4
3.1
18
2
step-start
1
12
4
3.1
18
2
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)
Notes 1 item(s)
Compatibility
  • Available with a vendor prefix: -webkit- (1)
Notes 1 item(s)
Compatibility
  • Available with a vendor prefix: -webkit- (12)
Notes 6 item(s)
Implementation note
  • Before Firefox 57, transitions do not work when transitioning from a `text-shadow` with a color specified to a `text-shadow` without a color specified (see bug 726550).
  • Before Firefox 57, cancelling a filling animation (for example, with `animation-fill-mode: forwards` set) can trigger a transition set on the same element, although only once (see bug 1192592 and these test cases for more information).
  • Before Firefox 57, the `background-position` property can't be transitioned between two values containing different numbers of `<position>` values, for example `background-position: 10px 10px;` and `background-position: 20px 20px, 30px 30px;` (see bug 1390446).
Compatibility
  • Available with a vendor prefix: -webkit- (49)
  • Available with a vendor prefix: -moz- (4)
Removed
  • This feature was removed in a later browser version (preview)
Notes 1 item(s)
Compatibility
  • Available with a vendor prefix: -webkit- (3.1)
Notes 1 item(s)
Compatibility
  • Available with a vendor prefix: -webkit- (18)
Notes 1 item(s)
Compatibility
  • Available with a vendor prefix: -webkit- (2)
Notes 3 item(s)
Limitation
  • This browser only partially implements this feature
Removed
  • This feature was removed in a later browser version (87)
Implementation note
  • The `ontransitioncancel` event handler property is not supported. To listen to this event, use `element.addEventListener('transitioncancel', function() {});`.
Notes 3 item(s)
Limitation
  • This browser only partially implements this feature
Removed
  • This feature was removed in a later browser version (87)
Implementation note
  • The `ontransitioncancel` event handler property is not supported. To listen to this event, use `element.addEventListener('transitioncancel', function() {});`.
Notes 3 item(s)
Limitation
  • This browser only partially implements this feature
Removed
  • This feature was removed in a later browser version (13.1)
Implementation note
  • Although the `ontransitioncancel` event handler property is supported, the `transitioncancel` event is never fired.
Notes 3 item(s)
Limitation
  • This browser only partially implements this feature
Removed
  • This feature was removed in a later browser version (87)
Implementation note
  • The `ontransitioncancel` event handler property is not supported. To listen to this event, use `element.addEventListener('transitioncancel', function() {});`.
Notes 3 item(s)
Limitation
  • This browser only partially implements this feature
Removed
  • This feature was removed in a later browser version (13.4)
Implementation note
  • Although the `ontransitioncancel` event handler property is supported, the `transitioncancel` event is never fired.
Notes 1 item(s)
Compatibility
  • Available with a vendor prefix: webkit (1)
Notes 4 item(s)
Limitation
  • This browser only partially implements this feature
Removed
  • This feature was removed in a later browser version (18)
Implementation note
  • The `ontransitionend` event handler property is not supported. To listen to this event, use `element.addEventListener('transitionend', function() {});`.
Compatibility
  • Available with a vendor prefix: webkit (79)
Notes 1 item(s)
Compatibility
  • Available with a vendor prefix: webkit (4)
Notes 1 item(s)
Compatibility
  • Available with a vendor prefix: webkit (18)
Notes 1 item(s)
Compatibility
  • Available with a vendor prefix: webkit (3.2)
Notes 3 item(s)
Limitation
  • This browser only partially implements this feature
Removed
  • This feature was removed in a later browser version (13.1)
Implementation note
  • The event handler exists but will never be called.
Notes 3 item(s)
Limitation
  • This browser only partially implements this feature
Removed
  • This feature was removed in a later browser version (13.4)
Implementation note
  • The event handler exists but will never be called.
Notes 3 item(s)
Limitation
  • This browser only partially implements this feature
Removed
  • This feature was removed in a later browser version (13.1)
Implementation note
  • The event handler exists but will never be called.
Notes 3 item(s)
Limitation
  • This browser only partially implements this feature
Removed
  • This feature was removed in a later browser version (13.4)
Implementation note
  • The event handler exists but will never be called.
Notes 2 item(s)
Removed
  • This feature was removed in a later browser version (71)
Compatibility
  • Available with a vendor prefix: WebKit (2)
Notes 1 item(s)
Compatibility
  • Available with a vendor prefix: WebKit (4)
Notes 2 item(s)
Removed
  • This feature was removed in a later browser version (71)
Compatibility
  • Available with a vendor prefix: WebKit (18)
Notes 1 item(s)
Compatibility
  • Available with a vendor prefix: WebKit (3)
Notes 1 item(s)
Compatibility
  • Available with a vendor prefix: WebKit (6)
Notes 1 item(s)
Compatibility
  • Available with a vendor prefix: WebKit (6)
Notes 1 item(s)
Compatibility
  • Available with a vendor prefix: -webkit- (1)
Notes 1 item(s)
Compatibility
  • Available with a vendor prefix: -webkit- (12)
Notes 3 item(s)
Compatibility
  • Available with a vendor prefix: -webkit- (49)
  • Available with a vendor prefix: -moz- (4)
Removed
  • This feature was removed in a later browser version (126)
Notes 1 item(s)
Compatibility
  • Available with a vendor prefix: -webkit- (4)
Notes 1 item(s)
Compatibility
  • Available with a vendor prefix: -webkit- (18)
Notes 1 item(s)
Compatibility
  • Available with a vendor prefix: -webkit- (2)
Notes 1 item(s)
Compatibility
  • Available with a vendor prefix: -webkit- (1)
Notes 1 item(s)
Compatibility
  • Available with a vendor prefix: -webkit- (12)
Notes 3 item(s)
Compatibility
  • Available with a vendor prefix: -webkit- (49)
  • Available with a vendor prefix: -moz- (4)
Removed
  • This feature was removed in a later browser version (126)
Notes 1 item(s)
Compatibility
  • Available with a vendor prefix: -webkit- (3.1)
Notes 1 item(s)
Compatibility
  • Available with a vendor prefix: -webkit- (18)
Notes 1 item(s)
Compatibility
  • Available with a vendor prefix: -webkit- (2)
Notes 1 item(s)
Compatibility
  • Available with a vendor prefix: -webkit- (1)
Notes 1 item(s)
Compatibility
  • Available with a vendor prefix: -webkit- (12)
Notes 3 item(s)
Compatibility
  • Available with a vendor prefix: -webkit- (49)
  • Available with a vendor prefix: -moz- (4)
Removed
  • This feature was removed in a later browser version (126)
Notes 1 item(s)
Compatibility
  • Available with a vendor prefix: -webkit- (3.1)
Notes 1 item(s)
Compatibility
  • Available with a vendor prefix: -webkit- (18)
Notes 1 item(s)
Compatibility
  • Available with a vendor prefix: -webkit- (2)
Notes 1 item(s)
Compatibility
  • Available with a vendor prefix: -webkit- (1)
Notes 1 item(s)
Compatibility
  • Available with a vendor prefix: -webkit- (12)
Notes 3 item(s)
Compatibility
  • Available with a vendor prefix: -webkit- (49)
  • Available with a vendor prefix: -moz- (4)
Removed
  • This feature was removed in a later browser version (126)
Notes 1 item(s)
Compatibility
  • Available with a vendor prefix: -webkit- (3.1)
Notes 1 item(s)
Compatibility
  • Available with a vendor prefix: -webkit- (18)
Notes 1 item(s)
Compatibility
  • Available with a vendor prefix: -webkit- (2)
Notes 1 item(s)
Removed
  • This feature was removed in a later browser version (79)

Syntax

CSS 
/* Transitions (CSS) */
/* See MDN Web Docs for details */

Use cases

  • State transitions

    Use Transitions (CSS) to clarify UI changes such as opening, reordering, or page transitions.

  • Polished feedback

    Add motion only where it reinforces direction, hierarchy, or system response.

Cautions

  • Motion features can quickly become distracting if they are applied too broadly.
  • Keep animation rules paired with sensible non-animated fallbacks.

Accessibility

  • Respect reduced-motion preferences and keep essential information available without animation.
  • Motion should support understanding, not become a barrier to interaction.

Related links

Powered by web-features