Web/CSS/transition

The transition CSS property is a shorthand property for transition-property, transition-duration, transition-timing-function, and transition-delay.

The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.

Transitions enable you to define the transition between two states of an element. Different states may be defined using pseudo-classes like :hover or :active or dynamically set using JavaScript.

Constituent properties

This property is a shorthand for the following CSS properties:

Syntax

/* Apply to 1 property */
/* property name | duration */
transition: margin-right 4s;

/* property name | duration | delay */
transition: margin-right 4s 1s;

/* property name | duration | timing function */
transition: margin-right 4s ease-in-out;

/* property name | duration | timing function | delay */
transition: margin-right 4s ease-in-out 1s;

/* Apply to 2 properties */
transition: margin-right 4s, color 1s;

/* Apply to all changed properties */
transition: all 0.5s ease-out;

/* Global values */
transition: inherit;
transition: initial;
transition: unset;

The transition property is specified as one or more single-property transitions, separated by commas.

Each single-property transition describes the transition that should be applied to a single property (or the special values all and none). It includes:

zero or one value representing the property to which the transition should apply. This may be any one of:
- the keyword none
- the keyword all
- a <custom-ident> naming a CSS property.
zero or one <single-transition-timing-function> value representing the timing function to use
zero, one, or two <time> values. 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.

See how things are handled when lists of property values aren't the same length. In short, extra transition descriptions beyond the number of properties actually being animated are ignored.

Formal definition

Initial value	as each of the properties of the shorthand: `transition-delay`: `0s` `transition-duration`: `0s` `transition-property`: all `transition-timing-function`: `ease`
Applies to	all elements, `::before` and `::after` pseudo-elements
Inherited	no
Computed value	as each of the properties of the shorthand: `transition-delay`: as specified `transition-duration`: as specified `transition-property`: as specified `transition-timing-function`: as specified
Animation type	discrete

Formal syntax

<single-transition>#where <single-transition> = [ none | <single-transition-property> ] || <time> || <timing-function> || <time>where <single-transition-property> = all | <custom-ident><timing-function> = linear | <cubic-bezier-timing-function> | <step-timing-function>where <cubic-bezier-timing-function> = ease | ease-in | ease-out | ease-in-out | cubic-bezier(<number <a href="/en-US/docs/CSS/Value_definition_syntax#Brackets" title="Brackets: enclose several entities, combinators, and multipliers to transform them as a single component">[0,1]>, <number>, <number <a href="/en-US/docs/CSS/Value_definition_syntax#Brackets" title="Brackets: enclose several entities, combinators, and multipliers to transform them as a single component">[0,1]>, <number>)<step-timing-function> = step-start | step-end | steps(<integer>[, <step-position>]?)where <step-position> = jump-start | jump-end | jump-none | jump-both | start | end

Examples

Simple example

This example performs a four-second font size transition with a one-second delay when the user hovers over the element.

HTML

<a class="target">Hover over me</a>

CSS

.target {
  font-size: 14px;
  transition: font-size 4s 1s;
}

.target:hover {
  font-size: 36px;
}

There are several more examples of CSS transitions included in the Using CSS transitions article.

Specifications

Specification	Status	Comment
CSS TransitionsThe definition of 'transition' in that specification.	Working Draft	Initial definition

Browser compatibility

Update compatibility data on GitHub

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
`transition`	Chrome Full support 26 Full support 26 Full support 1 Prefixed' Prefixed' Implemented with the vendor prefix: -webkit-	Edge Full support 12 Full support 12 Full support 12 Prefixed' Prefixed' Implemented with the vendor prefix: -webkit-	Firefox Full support 16 Notes' Full support 16 Notes' Notes' 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). Notes' 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). Notes' 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). Full support 4 Prefixed' Prefixed' Implemented with the vendor prefix: -moz- Full support 49 Prefixed' Prefixed' Implemented with the vendor prefix: -webkit- Full support 44 Prefixed' Disabled' Prefixed' Implemented with the vendor prefix: -webkit- Disabled' From version 44: this feature is behind the `layout.css.prefixes.webkit` preference (needs to be set to `true`). To change preferences in Firefox, visit about:config.	IE Full support 10 Full support 10 Full support 10 Prefixed' Prefixed' Implemented with the vendor prefix: -ms-	Opera Full support 12.1 Full support 12.1 Full support 15 Prefixed' Prefixed' Implemented with the vendor prefix: -webkit- No support 10.1 — 15 Prefixed' Prefixed' Implemented with the vendor prefix: -o-	Safari Full support 9 Full support 9 Full support 3.1 Prefixed' Prefixed' Implemented with the vendor prefix: -webkit-	WebView Android Full support ≤37 Full support ≤37 Full support 2 Prefixed' Prefixed' Implemented with the vendor prefix: -webkit-	Chrome Android Full support 26 Full support 26 Full support 18 Prefixed' Prefixed' Implemented with the vendor prefix: -webkit-	Firefox Android Full support 16 Notes' Full support 16 Notes' Notes' 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). Notes' 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). Notes' 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). Full support 4 Prefixed' Prefixed' Implemented with the vendor prefix: -moz- Full support 49 Prefixed' Prefixed' Implemented with the vendor prefix: -webkit- Full support 44 Prefixed' Disabled' Prefixed' Implemented with the vendor prefix: -webkit- Disabled' From version 44: this feature is behind the `layout.css.prefixes.webkit` preference (needs to be set to `true`). To change preferences in Firefox, visit about:config.	Opera Android Full support 12.1 Full support 12.1 Full support 14 Prefixed' Prefixed' Implemented with the vendor prefix: -webkit- No support 10.1 — 14 Prefixed' Prefixed' Implemented with the vendor prefix: -o-	Safari iOS Full support 9 Full support 9 Full support 2 Prefixed' Prefixed' Implemented with the vendor prefix: -webkit-	Samsung Internet Android Full support 1.5 Full support 1.5 Full support 1.0 Prefixed' Prefixed' Implemented with the vendor prefix: -webkit-
Gradients	Chrome No support No	Edge No support 12 — 79	Firefox No support No	IE Full support 10	Opera No support No	Safari No support No	WebView Android No support No	Chrome Android No support No	Firefox Android No support No	Opera Android No support No	Safari iOS No support No	Samsung Internet Android No support No

Legend

Full support: Full support
No support: No support
See implementation notes.': See implementation notes.
User must explicitly enable this feature.': User must explicitly enable this feature.
Requires a vendor prefix or different name for use.': Requires a vendor prefix or different name for use.