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

/* 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;

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.

Initial valueas each of the properties of the shorthand:
Applies toall elements, ::before and ::after pseudo-elements
Inheritedno
Mediainteractive
Computed valueas each of the properties of the shorthand:
Animation typediscrete
Canonical orderorder of appearance in the formal grammar of the values

Syntax

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 syntax

<single-transition>#

where
<single-transition> = [ none | <single-transition-property> ] || <time> || <single-transition-timing-function> || <time>

where
<single-transition-property> = all | <custom-ident>
<single-transition-timing-function> = <single-timing-function>

where
<single-timing-function> = linear | <cubic-bezier-timing-function> | <step-timing-function> | <frames-timing-function>

where
<cubic-bezier-timing-function> = ease | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>)
<step-timing-function> = step-start | step-end | steps(<integer>[, [ start | end ] ]?)
<frames-timing-function> = frames(<integer>)

Examples

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

Specifications

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

Browser compatibility

Feature Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari
Basic support 1.0 -webkit
26.0 #
(Yes)-webkit
(Yes)
4.0 (2.0) -moz
16.0 (16.0)[1]
10.0 10.1 -o
12.10 #
3.0 -webkit
6.1
Gradients[2] No support (Yes) No support 10.0 No support No support
frames() timing function No support[3] ? No support[3] No support No support[3] ?
Feature Android Edge Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support 2.1 -webkit (Yes)-webkit
(Yes)
4.0 (2.0) -moz
16.0 (16.0)[1]
10.0 10.0 -o
12.10 #
3.2 -webkit
Gradients[1] No support (Yes) No support 10.0 No support No support
frames() timing function ? ? No support[3] No support (Yes) ?

[1] In addition to the unprefixed support, Gecko 44.0 (Firefox 44.0 / Thunderbird 44.0 / SeaMonkey 2.41) added support for a -webkit prefixed version of the property for web compatibility reasons behind the preference layout.css.prefixes.webkit, defaulting to false. Since Gecko 49.0 (Firefox 49.0 / Thunderbird 49.0 / SeaMonkey 2.46) the preference defaults to true.

[2] PPK test

[3] The name of the frames() timing function is currently under discussion, so it is currently disabled in browser release versions until a final decision is reached. It is currently turned on in Nightly/Canary only.

Quantum CSS notes

  • Gecko has a bug whereby transitions will not work when transitioning from a text-shadow with a color specified to a text-shadow without a color specified  (bug 726550). This has been fixed in Firefox's new parallel CSS engine (also known as Quantum CSS or Stylo, planned for release in Firefox 57).
  • Another Gecko bug means that cancelling a filling animation (e.g. 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). In general declarative animations should not trigger transitions. This has been fixed in Quantum.
  • Another Gecko bug means that 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). Quantum fixes this.

See also