The CSS Transition Property

CSS transition: the shorthand

The CSS transition property is a shorthand for four transition-related subproperties:

• transition-property
• transition-duration
• transition-timing-function
• transition-delay

The syntax for CSS transition is similar to that of many shorthands – you need to list the values without naming the subproperties:

transition: property duration timing-function delay;

A skipped subproperty will be set to its default value automatically. We will explain each subproperty in detail in the following sections. All of them can also be used individually.

Using the transition-property property

The transition-property property specifies the CSS property that the transition effect will be applied to:

div {
    transition-property: width;
}

div:hover {
    width: 200px;
}

The syntax for this CSS transition property is simple:

transition-property: value;

The default value for transition-property is none, which means transitions aren't applied to any CSS properties. You can also use they keyword all to select all the properties that can have CSS transitions applied, or name an exact one.

You can also specify multiple properties by separating them with commas:

div {
    transition-property: width, height;
}

div:hover {
    width: 250px;
    height: 250px;
}

Defining CSS transition duration

Using the CSS transition-duration property allows you to set how long a transition will take to finish:

a {
    transition-duration: 4s;
}

To define the CSS transition duration, you need to specify it in time units (e.g., s or ms):

transition-duration: time;

The default value for this CSS transition property is 0s. That means the browser will show no transition effect – the element will simply switch from its initial stage to the result.

CSS transition speed: ease in or out

The CSS transition-timing-function property lets you set the pace for the transition.

transition-timing-function: value;

To make the changes smoother, we use a curve model defined by four points, also called the Bezier Curve:

a {
    transition-timing-function: cubic-bezier(0, 0.25, 0.5, 1);
}

You can define custom values for your curve as seen in the example above, or choose predefined options:

You can also specify the pace of the transition by using steps:

transition-timing-function: steps(x, term);

The x represents the number of transition steps. Each of them will be shown for the same amount of time. The term defines the way it behaves:

If you want to only specify one step, use step-start instead of steps(1, jump-start), and step-end instead of steps(1, jump-end):

a {
    transition-timing-function: step-end;
}

Delaying CSS transitions

To manipulate the starting time of your transition, you can use the CSS transition-delay property:

div {         
   -webkit-transition-delay: 2s; /* Safari */ 
   transition-delay: 2s;
} 

Note: when using the transition CSS shorthand, keep in mind that the first time value defined will always be interpreted as the duration and the second one as the delay.

To define the delay, you need to specify it in time units (e.g., s or ms):

transition-delay: time;

The default value for this CSS transition property is 0s, which means the transition effect will start immediately. You can either delay it by using a positive value. Negative values are also allowed: they make the effect start immediately but at a certain point of the transition instead of the beginning.

Note: you can define multiple delay times if the transition will affect multiple CSS properties.

Browser support

Mobile browser support