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:

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 »