CSS Transition-timing-function

Please Share On:

CSS transition-timing-function sets the speed of the transition effect from start to end.

Syntax:

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

Note:

This property does not work in Internet Explorer 9 and earlier versions.

Source Code:

<!DOCTYPE html>
<html>
  <head>
    <style>
     div{
        background: blue;
        color: white;
        border: 2px dotted black;
        width: 200px;
        height: 30px;
        text-align: center;
        padding-top: 15px;
        transition: width 3s;}
      
      div:hover{width: 400px;}
      
      #ease {transition-timing-function: ease;}
      #ease-in {transition-timing-function: ease-in;}
      #ease-out {transition-timing-function: ease-out;}
      #ease-in-out {transition-timing-function: ease-in-out;}
      #linear {transition-timing-function: linear;}
      
    </style>
  </head> 

  <body> 
    <h2 class="title">CSS transition-timing-function</h2>
    
    <div id="ease">ease</div>
    <div id="ease-in">ease-in</div>
    <div id="ease-out">ease-out</div>
    <div id="ease-in-out">ease-in-out</div>
    <div id="linear">Linear</div>
  </body>
</html>

Output:

Click below the “Try it Yourself” button to understand more in detail about the CSS transition-timing function.

try it yourself

Steps Function Values

See an example below of how you can use the step function value in the CSS transition-timing-function.

Syntax:

transition-timing-function: step-start;
transition-timing-function: step-end;
transition-timing-function: steps (5, start);
transition-timing-function: steps (5, end);
transition-timing-function: steps (5, jump-start);
transition-timing-function: steps (5, jump-end);
transition-timing-function: steps (5, jump-both);
transition-timing-function: steps (5, jump-none);

Source Code:

<!DOCTYPE html>
<html>
  <head>
    <style>
     div{
        background: blue;
        color: white;
        border: 2px dotted black;
        width: 200px;
        height: 30px;
        text-align: center;
        padding-top: 15px;
        transition: width 3s;}
      
      div:hover{width: 400px;}
      
      #step-start {transition-timing-function: step-start;}
      #step-end {transition-timing-function: step-end;}
      #step-int-start {transition-timing-function: steps (5, start);}
      #step-int-end {transition-timing-function: steps (5, end);}
      #jump-start {transition-timing-function: steps (5, jump-start);}
      #jump-end {transition-timing-function: steps (5, jump-end);}
      #jump-both {transition-timing-function: steps (5, jump-both);}
      #jump-none {transition-timing-function: steps (5, jump-none);}
      
    </style>
  </head> 

  <body> 
    <h2 class="title">CSS transition-timing-function</h2>
    
    <div id="step-start">step-start</div>
    <div id="step-end">step-end</div>
    <div id="step-int-start">step-int-start</div>
    <div id="step-int-endt">step-int-end</div>
    <div id="jump-start">jump-start</div>
    <div id="jump-end">jump-end</div>
    <div id="jump-both">jump-both</div>
    <div id="jump-none">jump-none</div>
  </body>
  
</html>

Output:

Try it yourself

Cubic-Bezier:

The ease, ease-in, ease-out, ease-in-out, linear, and cubic-bezier() timing functions use a bezier curve.

Syntax:

 #ease{transition-timing-function: cubic-bezier (0.25, 0.1, 0.25, 1.0);}
      #ease-in{transition-timing-function: cubic-bezier (0.42, 0, 1.0, 1.0);}
      #ease-out{transition-timing-function: cubic-bezier (0, 0, 0.58 ,1.0);}
      #ease-in-out{transition-timing-function: cubic-bezier (0.42, 0, 0.58, 1.0);}
      #linear{transition-timing-function: cubic-bezier (0, 0, 1.0, 1.0);}

ease

The ease function is equivalent to cubic-bezier (0.25, 0.1, 0.25, 1.0).

ease-in

The ease function is equivalent to cubic-bezier (0.42, 0, 1.0, 1.0).

ease-out

The ease function is equivalent to cubic-bezier (0, 0, 0.58, 1.0).

ease-in-out

The ease function is equivalent to cubic-bezier (0.42, 0, 0.58, 1.0).

linear

The ease function is equivalent to cubic-bezier (0, 0, 1.0, 1.0).

Cubic-Bezier()

It specifies a cubic bezier curve and values are x1, y1, x2, y2. x1 and x2 values must be in a range of 0,1 but y1 and y2 can exceed the range.

Source Code:

<!DOCTYPE html>
<html>
  <head>
    <style>
     div{
        background: blue;
        color: white;
        border: 2px dotted black;
        width: 200px;
        height: 30px;
        text-align: center;
        padding-top: 15px;
        transition: width 3s;}
      
      div:hover{width: 400px;}
      
      #ease{transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1.0);}
      #ease-in{transition-timing-function: cubic-bezier(0.42, 0, 1.0, 1.0);}
      #ease-out{transition-timing-function: cubic-bezier(0, 0, 0.58 ,1.0);}
      #ease-in-out{transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1.0);}
      #linear{transition-timing-function: cubic-bezier(0, 0, 1.0, 1.0);}
      
    </style>
  </head> 

  <body> 
    <h2 class="title">CSS transition-timing-function: cubic-bezier</h2>
    
    <div id="ease">ease</div>
    <div id="ease-in">ease-in</div>
    <div id="ease-out">ease-out</div>
    <div id="ease-in-out">ease-in-out</div>
    <div id="linear">linear</div>   
  </body>
</html>

Output:

try it yourself

You may be interested in the following topics:

Post Views: 965

Leave a Reply

Your email address will not be published. Required fields are marked *

Copyright @2023. All Right Reserved.


Social media & sharing icons powered by UltimatelySocial