CSS Reference Property

transition

The transition property is a shorthand property for setting the longhand properties: transition-property, transition-duration, transition-timing-function, and transition-delay.

The order of properties within the transition property is important, and should be the same order as the one mentioned above. The first value that can be parsed as a time is assigned to the transition-duration, and the second value that can be parsed as a time is assigned to transition-delay.

You can specify either one transition in the transition property, or multiple comma-separated transitions. For example:

/* one transition */
transition: background-color .3s linear;
/* multiple transitions */
transition: color .6s ease, font-size .3s linear;
transition: background-color 1s linear,
            left .6s ease-out 1s,
            transform 1s steps(3, start);

If you specify more than one transition and any of the transitions has none as the transition-property, then the declaration is invalid.

Trivia & Notes

CSS Transitions allows property changes in CSS values to occur smoothly over a specified duration. A transition is defined on an element to animate the change of values on certain properties of an element smoothly, instead of changing the values abruptly. Transition are useful to help cue the user that a change is happening, thus allowing them to know what and how the changes occur. They are used to smooth certain interactions in web pages and applications, allowing for an overall better and more meaningful user experience.

Transitions are widely used in user interface interactions today. There is a very long list of great tutorials here on Codrops that use transitions to create different kinds of effects. Make sure you check the tutorials out.

Not all properties in CSS can be transitioned. The W3C has a list of animatable types and properties in the CSS Transitions Module. Oli Studholme has also created a list of animatable CSS properties on his website that you can check out.

Official Syntax

Syntax:

transition: <single-transition> [ ',' <single-transition> ]*  where <single-transition> = [ none | <single-transition-property> ] || <time> || <single-transition-timing-function> || <time>

Initial: none 0s ease 0s; which is the concatenation of the initial value of each of the longhand properties.
Applies To: all elements; and ::before and ::after pseudo-elements
Animatable: no

Values

<single-transition>#: One or multiple comma-separated transitions where each transition is defined using the four longhand transition properties. See the longhand properties’ entries for more information about the possible values for each.

Examples

The following defines two transitions on an element: moving its position and changing its background color when it is hovered. The change transition in the background color occurs after the transition of the position.

.element {
    position: relative;
    left: 0;
    background-color: purple;
    transition: left 1s ease-in-out, background-color 1s ease-out 1s;
}

See the live demo section below for an example.

Live Demo

View this demo on the Codrops Playground

Browser Support

CSS3 Transitions

Simple method of animating certain properties of an element, with ability to define property, duration, delay and timing function.

W3C Working Draft

Supported from the following versions:

Desktop

Mobile / Tablet

* denotes prefix required.

Supported:
Yes
No
Partially
Polyfill

Stats from caniuse.com