What are CSS Transitions

The transition timing function

Currently, all the transitions are linear, meaning the speed of changes remains constant throughout the transition process. You can customize this effect using the transition-timing-function property. Some common values include:

linear

This is the default behavior. The transition speed remains constant from start to end, as we've demonstrated before. This option is equivalent to using a cubic-bezier() function with values cubic-bezier(0,0,1,1).

1div {
2  . . .
3
4  transition-property: width, color, background-color;
5  transition-duration: 2s;
6  transition-timing-function: linear;
7  /* transition-timing-function: cubic-bezier(0,0,1,1); */
8}

The function defines a Cubic Bezier curve. I'll spare you the complex mathematical definition, which looks like this:

Instead, all you need to know is that this curve is defined by four control points:

With these four control points in the above example, the transition will start slow, accelerate in the middle, and finish slowly. You don't need to know precisely how to calculate these points. You can easily find the desired control points using this website.

ease

Corresponds to the Cubic Bezier function cubic-bezier(0.25,0.1,0.25,1). The transition will begin slowly, fast in the middle, and finish slowly.

ease-in

Corresponds to the Cubic Bezier function cubic-bezier(0.42,0,1,1). The transition will begin slowly and then accelerate.

ease-out

Corresponds to the Cubic Bezier function cubic-bezier(0,0,0.58,1). The transition will begin fast and then decelerate to end slowly.

ease-in-out

Corresponds to the Cubic Bezier function cubic-bezier(0.42,0,0.58,1). The transition will begin slowly, accelerate in the middle, and finish slowly. This is very similar to ease, but as you can see from the curve, it is much smoother, which means there won't be a noticeable acceleration or deceleration phase.

step-start and step-end

This transition is a bit different. It is defined by a stepping function, steps(), which takes two values. The first one specifies the number of steps, and the second one sets the point at which the change occurs within the step, either start or end. For example:

1div {
2  . . .
3
4  transition-property: width, color, background-color;
5  transition-duration: 2s;
6  transition-timing-function: steps(5, start);
7}

In this case, the transition will take five steps, and the change happens at the start of each step.

The step-start option corresponds to the function steps(1, start), and the step-end option corresponds to the function steps(1, end).

Transition delay

You can also set a delay for the transition using the transition-delay property.

1div {
2  . . .
3
4  transition-property: width, color, background-color;
5  transition-duration: 2s;
6  transition-timing-function: ease-in-out;
7  transition-delay: 1s;
8}

Notice that the transition only starts one second after the cursor is hovered over the <div> element.

The shorthand

Lastly, CSS also provides a shorthand property that enables you to define all transition properties together. The shorthand has the following syntax:

1transition: <property> <duration> <timing_function> <delay>;

1div {
2  . . .
3  transition: width 2s ease-in-out 1s;
4}

You can also define multiple transitions using the transition shorthand by dividing different cases with commas:

1div {
2  . . .
3  transition: width 2s ease-in-out 1s,
4    color 2s ease-in-out 1s,
5    background-color 2s ease-in-out 1s;
6}