transition

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

.example {
    transition: [transition-property] [transition-duration] [transition-timing-function] [transition-delay];
}

These transition properties allow elements to change values over a specified duration, animating the property changes, rather than having them occur immediately. Here is a simple example that transitions the background color of a <div> element on :hover:

div {
  transition: background-color 0.5s ease;
  background-color: red;
}
div:hover {
  background-color: green;
}

That div will take half a second when the mouse is over it to turn from red to green. Here is a live demonstration of such a transition:

<div class="box"></div>

.box {
  width: 150px;
  height: 150px;
  background: red;
  margin-top: 20px;
  margin-left: auto;
  margin-right: auto;
  -webkit-transition: background-color 2s ease-out;
  -moz-transition: background-color 2s ease-out;
  -o-transition: background-color 2s ease-out;
  transition: background-color 2s ease-out;
}

.box:hover {
  background-color: green;
  cursor: pointer;
}

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

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

In this above example, both background and padding will transition, due to the value “all” specified for the transition-property portion of the shorthand.

You may comma separate value sets to do different transitions on different properties:

div {
  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:

<div class="box"></div>

.box {
  width: 150px;
  height: 150px;
  background: red;
  margin-top: 20px;
  margin-left: auto;
  margin-right: auto;
}

.box:hover {
  background-color: green;
  cursor: pointer;
  -webkit-transition: background-color 2s ease-out;
  -moz-transition: background-color 2s ease-out;
  -o-transition: background-color 2s ease-out;
  transition: background-color 2s ease-out;
}

This happens because the transition has been moved to the :hover state selector and there is no matching transition on the selector that targets the element directly without the :hover state.

For compatibility in all supporting browsers, vendor prefixes are required, with the standard syntax declared last:

.example {
    -webkit-transition: background-color 500ms ease-out 1s;
    -moz-transition: background-color 500ms ease-out 1s;
    -o-transition: background-color 500ms ease-out 1s;
    transition: background-color 500ms ease-out 1s;
}

IE10 (the first stable version of IE to support transition) does not require the -ms- prefix.

Related Properties

• transition-property
• transition-timing-function
• transition-duration
• transition-delay

Browser Support