Widely Available
Transitions (CSS)
id: transitions
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.
Baseline Status:
Achieved Widely Available on Mar 30, 2018 (Cross-browser Newly Available since Sep 30, 2015).
Desktop Browser Engine Support
Google Chrome
26
Supported
Mozilla Firefox
16
Supported
Apple Safari
9
Supported
Microsoft Edge
12
Supported
Mobile Browser Engine Support
Chrome Android
26
Firefox Android
16
Safari iOS
9
Specifications and References
MDN Browser Compat Data Keys:
api.CSSTransition ↗
api.CSSTransition.transitionProperty ↗
api.Element.transitioncancel_event ↗
api.Element.transitionend_event ↗
api.Element.transitionrun_event ↗
api.Element.transitionstart_event ↗
api.TransitionEvent ↗
api.TransitionEvent.TransitionEvent ↗
api.TransitionEvent.elapsedTime ↗
api.TransitionEvent.propertyName ↗
api.TransitionEvent.pseudoElement ↗
css.properties.transition ↗
css.properties.transition-delay ↗
css.properties.transition-duration ↗
css.properties.transition-property ↗
css.properties.transition-property.IDENT_value ↗
css.properties.transition-property.all ↗
css.properties.transition-property.none ↗
css.properties.transition-timing-function ↗
css.properties.transition-timing-function.ease ↗
css.properties.transition-timing-function.ease-in ↗
css.properties.transition-timing-function.ease-in-out ↗
css.properties.transition-timing-function.ease-out ↗
css.properties.transition-timing-function.jump ↗
css.properties.transition-timing-function.linear ↗
css.properties.transition-timing-function.step-end ↗
css.properties.transition-timing-function.step-start ↗
css.properties.transition.all ↗
css.properties.transition.ease ↗
css.properties.transition.ease-in ↗
css.properties.transition.ease-in-out ↗
css.properties.transition.ease-out ↗
css.properties.transition.gradients_can_animate ↗
css.properties.transition.linear ↗
css.properties.transition.none ↗
css.properties.transition.step-end ↗
css.properties.transition.step-start ↗