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>
Output

transition-timing-function: cubic-bezier(1, 0, 0, 1)

transition-timing-function: cubic-bezier(1, 1, 0.22, 1)

transition-timing-function: cubic-bezier(0.23, 1, 0.720, 1)

transition-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955)

transition-timing-function: cubic-bezier(0.6, -0.28, 0.735, 0.045)

transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55)

CSS Online Test


« Previous Tutorial Next Tutorial »



Like/Share Us on Facebook 😋