The transition property in CSS

The transition (transition) allows elements to change their values over a specified period of time, animating property changes.

transition — This is a short-term action for which there are four transition-related properties:

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

Below is a simple example that changes <div> background color on hover (hover:):

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

When the mouse pointer hovers over <div> it will take half a second to change the color from red to green.

You can specify a specific property, as we did above, or use the all to reference transition properties.

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

In the example above, a transition will be applied to both the background and padding, thanks to the “all” value used in the property transition-property.

You can separate sets of values with commas to apply different transitions to different properties:

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

For the most part, the order of the values doesn’t matter—unless a delay is specified. If you specify a delay, you must specify its duration first.

The first value that the browser recognizes as a valid time value will always be the duration.

Any subsequent valid time value will be used as a delay.

Some properties cannot be animated because they are not animatable properties. To understand which properties can be animated and which cannot, it’s best to consult the official documentation.

For example, the following example shows how the transition occurs on mouseover but does not trigger when the cursor is removed.

This happens because the transition was moved to the state selector :hover, and there is no corresponding transition in the selector that targets the element directly without a state :hover.

For compatibility across all supported browsers, vendor prefixes are required, with the standard syntax listed 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 the transition) does not require a prefix -ms-.