Transitions (CSS)Baseline · Widely available

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.

Supported in all major browsers for at least 30 months — safe to use without fallbacks. Baseline since Sep 30, 2015. Widely available since Mar 30, 2018.

How to use ↓Compare browsers

Browser support

DesktopChrome

1–25Not supported

26+Supportedsince Mar 26, 2013

Current: 155

Edge

12+Supportedsince Jul 29, 2015

Current: 154

Firefox

1–15Not supported

16+Supportedsince Oct 9, 2012

Current: 157

Safari

1–8Not supported

9+Supportedsince Sep 30, 2015

Current: 27

MobileChrome Android

18–25Not supported

26+Supportedsince Apr 3, 2013

Current: 155

Firefox Android

4–15Not supported

16+Supportedsince Oct 9, 2012

Current: 157

Safari iOS

1–8Not supported

9+Supportedsince Sep 16, 2015

Current: 27

How to use

This feature is Baseline widely available — use it freely, no fallback needed.

Example

Full syntax and examples are on MDN: CSSTransition.

Feature detection

CSS · check before using

@supports (transition: initial) {
  /* styles that rely on transition */
}

/* or in JavaScript */
if (CSS.supports("transition", "initial")) {
  // use it
}

Documentation (MDN)

Specification

drafts.csswg.org/css-transitions-2 ↗

Usage share

caniuse.com/css-transitions ↗

Sub-features

Support for each part of the feature (37). The overall table above shows when the whole feature works.

Sub-feature	Chrome	Edge	Firefox	Safari	Chrome Android	Firefox Android	Safari iOS
CSSTransition	84	84	75	13.1	84	79	13.4
CSSTransition.transitionProperty	84	84	75	13.1	84	79	13.4
Element.transitioncancel_event	87	87	53	13.1	87	53	13.4
Element.transitionend_event	26	18	51	7	26	51	7
Element.transitionrun_event	74	12	53	13.1	74	53	13.4
Element.transitionstart_event	74	12	53	13.1	74	53	13.4
TransitionEvent	27	12	4	7	27	4	7
TransitionEvent.TransitionEvent	27	14	23	7	27	23	7
TransitionEvent.elapsedTime	27	12	4	7	27	4	7
TransitionEvent.propertyName	27	12	4	7	27	4	7
TransitionEvent.pseudoElement	27	79	23	7	27	23	7
transition	26	12	16	9	26	16	9
transition-delay	26	12	16	9	26	16	9
transition-duration	26	12	16	9	26	16	9
transition-property	26	12	16	9	26	16	9
transition-property.IDENT_value	26	12	16	9	26	16	9
transition-property.all	26	12	16	9	26	16	9
transition-property.none	26	12	16	9	26	16	9
transition-timing-function	26	12	16	9	26	16	9
transition-timing-function.ease	26	12	16	9	26	16	9

Show 17 more

Sub-feature	Chrome	Edge	Firefox	Safari	Chrome Android	Firefox Android	Safari iOS
transition-timing-function.ease-in	26	12	16	9	26	16	9
transition-timing-function.ease-in-out	26	12	16	9	26	16	9
transition-timing-function.ease-out	26	12	16	9	26	16	9
transition-timing-function.jump	77	79	65	14	77	65	14
transition-timing-function.linear	26	12	16	9	26	16	9
transition-timing-function.step-end	26	12	16	9	26	16	9
transition-timing-function.step-start	26	12	16	9	26	16	9
transition.all	26	12	16	9	26	16	9
transition.ease	26	12	16	9	26	16	9
transition.ease-in	26	12	16	9	26	16	9
transition.ease-in-out	26	12	16	9	26	16	9
transition.ease-out	26	12	16	9	26	16	9
transition.gradients_can_animate	✕	✕	✕	✕	✕	✕	✕
transition.linear	26	12	16	9	26	16	9
transition.none	26	12	16	9	26	16	9
transition.step-end	26	12	16	9	26	16	9
transition.step-start	26	12	16	9	26	16	9