transition

Avatar of Sara Cope
Sara Cope on (Updated on )

Take your JavaScript to the next level at Frontend Masters.

The transition property is a shorthand property used to represent up to four transition-related longhand properties:

.element {
  transition: background-color 0.5s ease;
}

Syntax

transition: [transition-property] [transition-duration] [transition-timing-function] [transition-delay];

Demo

transition properties allow elements to change values over a specified duration, animating the property changes, rather than having them occur immediately. So, if we have, say, a box with a red background that we want to change to a green background when it is hovered, we can reach right for the transition property to move between background colors:

Specifying which properties to transition

Notice that we’ve called out the background-color property in the transition declaration. That tells the browser that we’re planning to transition background colors and nothing else when a transition occurs between hovered and non-hovered states. Notice, too, that we told the browser that the transition should take two seconds and follow and ease-out timing function, which means the transition starts fast, then slows down towards the end.

You can specify a particular property as we have above, or use a value of all to refer to transition properties:

.element {
  transition: all 0.5s ease;
  background: red;
  padding: 10px;
}
.element:hover {
  background: green;
  padding: 20px;
}

all specified for the transition-property portion of the shorthand. You may also comma separate value sets to do different transitions on different properties:

.element {
  transition: background 0.2s ease,
              padding 0.8s linear;
}

For the most part, the order of the values does not matter — unless a delay is specified. If you specify a delay, you must first specify a duration. The first value that the browser recognizes as a valid time value will always represent the duration. Any subsequent valid time value will be parsed as the delay.

Some properties cannot be transitioned because they are not animatable properties. See the spec for a full list of which properties are animatable.

By specifying the transition on the element itself, you define the transition to occur in both directions. That is, when the styles are changed (e.g. on hover on), they properties will transition, and when the styles change back (e.g. on hover off) they will transition. For example, the following demo transitions on hover, but not on hover off:

Browser support

This browser support data is from Caniuse, which has more detail. A number indicates that browser supports the feature at that version and up.

Desktop

ChromeFirefoxIEEdgeSafari
4*5*10125.1*

Mobile / Tablet

Android ChromeAndroid FirefoxAndroidiOS Safari
94922.1*6.0-6.1*

Other resources

Related properties