What are CSS Transitions

Currently, all the transitions are linear, meaning the speed of change remains constant throughout the transition process.

However, you can customize this using the transition-timing-function property.

Some common values include:

linear transition

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

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

The Cubic Bezier curve

cubic-bezier() defines a Cubic Bezier curve. I'll spare you the complex mathematical definition.

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

This curve means that the transition will start slow, accelerate in the middle, and finish slowly.

You don't need to know precisely how to calculate these points, instead, you can easily find the desired control points using this website.

ease transition

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

div {
  /* . . . */
 
  transition-property: width, color, background-color;
  transition-duration: 2s;
  transition-timing-function: ease;
  /* transition-timing-function: cubic-bezier(0.25,0.1,0.25,1); */
}

ease-in transition

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

ease-out transition

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 transition

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 looks 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 transitions

These two options are a bit different.

They are 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 where the change occurs within the step, either start or end.

For example:

div {
  /* . . . */
 
  transition-property: width, color, background-color;
  transition-duration: 2s;
  transition-timing-function: steps(5, start);
}

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

When transition-timing-function is set to step-start, it corresponds to the function steps(1, start)

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