The transition property is a shorthand property for setting the longhand properties: transition-delay. 3k1t3q

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-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.

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 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 experience.

Transitions are widely used in 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.

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