transition

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

CSS tricks that use transition

More information

• CSS Transitions Specification (W3C)
• CSS Transition Shorthand Property (DigitalOcean)
• An Interactive Guide to CSS Transitions (Josh Comeau)
• CSS will-change Property: When and When Not to Use It (DigitalOcean)

Related