In this section, we will learn what the transition-timing-function property is and how to use it in CSS.

Click here to run the example of transition-timing-function property.

CSS transition-timing-function Property Definition and Usage

When we set an element to be smoothly transitioned from one value to another using `transition-property` and `transition-duration`, by default, the movement of this transition happens in “ease” way.

But as the picture above shows, there are other types of transition movements and CSS provided a property named `transition-timing-function` by which we can set these values and make a different type of movement for a transition.

CSS transition-timing-function Property Syntax

transition-timing-function: linear|ease|ease-in|ease-out|ease-in-out|step-start|step-end|steps(int,start|end)|cubic-bezier(n,n,n,n)|initial|inherit;

CSS transition-timing-function Property Value

Name	Description
linear	The movement of transition is even
ease	The speed of transition increase until it reaches the middle of transition then slows down towards the end. (this is the default value)
ease-in	The speed of transition is slow at the beginning but increases as it progress.
ease-out	The speed of transition is fast at the beginning, but slows down as it progress.
ease-in-out	The speed of transition is slow at the beginning, and then speeds up until it reaches the middle of transition, and then slows down again towards the end.

Example: transition-timing-function in CSS

See the Pen transition-timing-function in CSS by Omid Dehghan (@enjoytutorials1) on CodePen.

Example: CSS ease in out

See the Pen CSS ease in out by Omid Dehghan (@enjoytutorials1) on CodePen.

Example: CSS transition ease in

See the Pen CSS transition ease in by Omid Dehghan (@enjoytutorials1) on CodePen.

CSS cubic-bezier() Function:

There’s a CSS function called ` cubic-bezier()` that can also be used for the value of this property.

Using this property, we can create our own type of speed for a transition.

This function takes 4 values, each ranged from 0 to 1. But setting those values is a little confusing and it’s best to use tools that are already available.

Two of them are Chrome’s Styles pane and Firefox’s Rules pane.

Example: CSS Animation cubic-bezier() Function

See the Pen CSS Animation cubic-bezier() Function by Omid Dehghan (@enjoytutorials1) on CodePen.

In the example above, we’ve set four values in cubic-bezier() function but those might not be what we want.

If this example is running in Firefox bowser, we can right click on the <li> element in the page and select Inspect-Element (just like the picture below):

Then, in the opened window, we can select the icon declared in the picture below and start to visually modifying the values set in cubic-bezier() function.

Also, if the example above is running in the Chrome browser, we can right click on the <li> element and select “inspect” (just like the picture below).

Then, in the opened window, we can select the icon declared in the picture below and start to visually modifying the values set in cubic-bezier() function.

Other browsers like Safari and Opera have the same editor that you can find and use them in order to set the value for cubic-bezier() function.

CSS steps() Function

Other than values mentioned so far, the `transition-timing-function` property also takes another value which itself is a function named `steps( )`.

CSS steps() Function Parameters:

This function takes 2 arguments (or parameters):

• number: which is the number of steps that a transition should be completed in.
• keyword: the value for this part is either “start” or “end” indicating whether each change should take place at the start or end of each step.

CSS Animation Steps Example:

See the Pen CSS Animation Steps Example by Omid Dehghan (@enjoytutorials1) on CodePen.

If you run this example, you’ll see that instead of fluidly moving along, the transition is divided into three steps (because of the value 3 that we set for steps() function).

We can also use two values named “step-start” which are equal to “steps(1, start)” and “step-end” which is equal to “steps(1, end)” for this function.

Example: CSS steps animation

See the Pen CSS steps animation by Omid Dehghan (@enjoytutorials1) on CodePen.