CSS transition-timing-function

The CSS transition-timing-function property is used to define the way to process the transition during specified transition-duration. For example:

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      div{width: 120px; height: 120px; background-color: gray;
         transition-duration: 1.4s;
         transition-timing-function: ease-in-out;}
      div:hover{border-radius: 50%; background-color: blue;}
   </style>
</head>
<body>
   
   <div></div>
   
</body>
</html>

Output

Hover the mouse cursor over the box to see the transition effect.

Basically the transition-timing-function defines the speed curve of transition.

CSS transition-timing-function Syntax

The syntax of transition-timing-function property in CSS, is:

transition-timing-function: x;

The value of x should be any of the following:

linear - Apply the same speed curve to transition, from start to end. The transition-timing-function: linear; is equal to transition-timing-function: cubic-bezier(0,0,1,1);
ease - Starts the transition slowly, then fast, then ends slowly. This is the default value. It is equal to cubic-bezier(0.25,0.1,0.25,1)
ease-in - Defines slow start to the transition. It is equal to cubic-bezier(0.42,0,1,1)
ease-out - Defines slow end to the transition. It is equal to cubic-bezier(0,0,0.58,1)
ease-in-out - Defines slow start and end to the transition. It is equal to cubic-bezier(0.42,0,0.58,1)
steps(int, start|end) - Used to define transition in intervals as defined using the int (a number greater than 0) parameter. The second parameter is optional. The default value of second parameter is end
step-start - Used when we need to apply the final style. In place of step-start, we can also use steps(1, start)
step-end - Used when we need to apply the initial style. In place of step-end, we can also use steps(1, end)
cubic-bezier(v, v, v, v) - Used to apply completely custom speed curve for the transition. Here v parameter refers to a number from 0 to 1 including negative values. The first and last values are starting and ending point of the Cubic Bezier curve
initial - Used to use the default value
inherit - Used to use the value inherited by the parent element

CSS transition-timing-function Example

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      div{width: 80px; height: 60px; background-color: gray;
         transition-duration: 2s;}

      div.a{transition-timing-function: linear;}
      div.b{transition-timing-function: ease;}
      div.c{transition-timing-function: ease-in;}
      div.d{transition-timing-function: ease-out;}
      div.e{transition-timing-function: ease-in-out;}

      div:hover{width: 280px; background-color: chocolate;}
   </style>
</head>
<body>
   
   <h2>transition-timing-function: linear</h2>
   <div class="a"></div>

   <h2>transition-timing-function: ease</h2>
   <div class="b"></div>

   <h2>transition-timing-function: ease-in</h2>
   <div class="c"></div>

   <h2>transition-timing-function: ease-out</h2>
   <div class="d"></div>

   <h2>transition-timing-function: ease-in-out</h2>
   <div class="e"></div>
   
</body>
</html>

Output

transition-timing-function: linear

transition-timing-function: ease

transition-timing-function: ease-in

transition-timing-function: ease-out

transition-timing-function: ease-in-out

Let's create another example that uses step-start, step-end, and steps() to define the transition-timing-function property:

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      div{width: 80px; height: 60px; background-color: gray;
         transition-duration: 2s;}

      div.a{transition-timing-function: step-start;}
      div.b{transition-timing-function: step-end;}
      div.c{transition-timing-function: steps(10, start);}
      div.d{transition-timing-function: steps(30, start);}
      div.e{transition-timing-function: steps(10, end);}
      div.f{transition-timing-function: steps(30, end);}

      div:hover{width: 280px; background-color: blue;}
   </style>
</head>
<body>
   
   <h2>transition-timing-function: step-start</h2>
   <div class="a"></div>

   <h2>transition-timing-function: step-end</h2>
   <div class="b"></div>

   <h2>transition-timing-function: steps(10, start)</h2>
   <div class="c"></div>

   <h2>transition-timing-function: steps(30, start)</h2>
   <div class="d"></div>

   <h2>transition-timing-function: steps(10, end)</h2>
   <div class="e"></div>

   <h2>transition-timing-function: steps(30, end)</h2>
   <div class="f"></div>
   
</body>
</html>

Output

transition-timing-function: step-start

transition-timing-function: step-end

transition-timing-function: steps(10, start)

transition-timing-function: steps(30, start)

transition-timing-function: steps(10, end)

transition-timing-function: steps(30, end)

Now it is the to create last example for this article, that uses cubic-bezier() with different combination of its parameters values to define the transition-timing-function property:

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      div{width: 80px; height: 60px; background-color: gray;
         transition-duration: 2s;}

      div.a{transition-timing-function: cubic-bezier(1, 0, 0, 1);}
      div.b{transition-timing-function: cubic-bezier(1, 1, 0.22, 1);}
      div.c{transition-timing-function: cubic-bezier(0.23, 1, 0.720, 1);}
      div.d{transition-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);}
      div.e{transition-timing-function: cubic-bezier(0.6, -0.28, 0.735, 0.045);}
      div.f{transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);}

      div:hover{width: 280px; background-color: blue;}
   </style>
</head>
<body>
   
   <h2>transition-timing-function: cubic-bezier(1, 0, 0, 1)</h2>
   <div class="a"></div>

   <h2>transition-timing-function: cubic-bezier(1, 1, 0.22, 1)</h2>
   <div class="b"></div>

   <h2>transition-timing-function: cubic-bezier(0.23, 1, 0.720, 1)</h2>
   <div class="c"></div>

   <h2>transition-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955)</h2>
   <div class="d"></div>

   <h2>transition-timing-function: cubic-bezier(0.6, -0.28, 0.735, 0.045)</h2>
   <div class="e"></div>

   <h2>transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55)</h2>
   <div class="f"></div>
   
</body>
</html>