transition

Last updated on: October 1, 2012

The transition property in CSS allows you specify how any particular property changes values. For instance, perhaps the background of a div changes background-color 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.

You can specify a particular property as we have above, or us "all" to refer to all properties.

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

That will transition both the background and padding.

Similarly, you could comma separate the transitions to give different timings and easings to different properties.

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

For best browser support, you'll need vendor prefixes:

div {
  -webkit-transition: all 0.2s ease;
  -moz-transition: all 0.2s ease;
  -ms-transition: all 0.2s ease;
  -o-transition: all 0.2s ease;
  transition: all 0.2s ease;
}

More Information

• MDN Docs
• Visualizing transition timings

Browser Support