w3docs logo

CSS transition-timing-function Property

The transition-timing-function CSS property specifies transition proceeding over its duration allowing to change the speed.

The transition-timing-function property is one of the CSS3 properties.

It has the following values:

  • ease
  • linear
  • ease-in
  • ease-out
  • ease-in-out
  • step-start
  • step-end

For maximum browser compatibility extensions such as -webkit- for Safari, Google Chrome, and Opera (newer versions), -moz- for Firefox,-o- for older versions of Opera are used with this property.

Initial Value ease
Applies to All elements, ::before and ::after pseudo-elements.
Inherited No.
Animatable No.
Version CSS3
DOM Syntax object.style.transitionTimingFunction = "ease in";

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;

Example of transition-timing-function:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .box {
        padding: 2em;
        width: 40px;
        height: 40px;
        left: 0;
        background-color: #666;
        position: relative;
        -webkit-transition-property: background-color, left;
        -moz-transition-property: background-color, left;
        -o-transition-property: background-color, left;
        transition-property: background-color, left;
        -webkit-transition-duration: 1s, 1s;
        -moz-transition-duration: 1s, 1s;
        -o-transition-duration: 1s, 1s;
        transition-duration: 1s, 1s;
        -webkit-transition-timing-function: ease-out, cubic-bezier(.75, .3, .14, 1.12);
        -moz-transition-timing-function: ease-out, cubic-bezier(.75, .3, .14, 1.12);
        -o-transition-timing-function: ease-out, cubic-bezier(.75, .3, .14, 1.12);
        transition-timing-function: ease-out, cubic-bezier(.75, .3, .14, 1.12);
        /* first value corresponds to the first transition-property value, and the second value corresponds to the second */
      }
      .example:hover .box {
        left: 450px;
        background-color: #ccc;
      }
    </style>
  </head>
  <body>
    <h2>Transition-timing-function property example</h2>
    <p>Hover over the element to see the effect</p>
    <div class="example">
      <div class="box"></div>
    </div>
  </body>
</html>

Example of transition-timing-function with the "ease", "linear", "ease-in" and "ease-out" values:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .example {
        padding: 2em;
        width: 30px;
        height: 30px;
        left: 0;
        background-color: #666;
        border-radius: 50%;
        position: relative;
        -webkit-transition-property: background-color, left;
        -moz-transition-property: background-color, left;
        -o-transition-property: background-color, left;
        transition-property: background-color, left;
        -webkit-transition-duration: 1s, 1s;
        -moz-transition-duration: 1s, 1s;
        -o-transition-duration: 1s, 1s;
        transition-duration: 1s, 1s;
      }
      .container:hover .example {
        left: 250px;
        background-color: #ccc;
      }
      .el1 {
        -webkit-transition-timing-function: ease;
        -moz-transition-timing-function: ease;
        -o-transition-timing-function: ease;
        transition-timing-function: ease;
      }
      .el2 {
        -webkit-transition-timing-function: linear;
        -moz-transition-timing-function: linear;
        -o-transition-timing-function: linear;
        transition-timing-function: linear;
      }
      .el3 {
        -webkit-transition-timing-function: ease-in;
        -moz-transition-timing-function: ease-in;
        -o-transition-timing-function: ease-in;
        transition-timing-function: ease-in;
      }
      .el4 {
        -webkit-transition-timing-function: ease-out;
        -moz-transition-timing-function: ease-out;
        -o-transition-timing-function: ease-out;
        transition-timing-function: ease-out;
      }
    </style>
  </head>
  <body>
    <h2>Transition-timing-function property example</h2>
    <div class="container">
      <p>
        <code>transition-timing-function: ease;</code>
      </p>
      <div class="example el1"></div>
      <p>
        <code>transition-timing-function: linear;</code>
      </p>
      <div class="example el2"></div>
      <p>
        <code>transition-timing-function: ease-in;</code>
      </p>
      <div class="example el3"></div>
      <p>
        <code>transition-timing-function: ease-out;</code>
      </p>
      <div class="example el4"></div>
    </div>
  </body>
</html>

Example of transition-timing-function with the "step-start" and "step-end" values:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .example {
        padding: 2em;
        width: 30px;
        height: 30px;
        left: 0;
        background-color: #666;
        border-radius: 50%;
        position: relative;
        -webkit-transition-property: background-color, left;
        -moz-transition-property: background-color, left;
        -o-transition-property: background-color, left;
        transition-property: background-color, left;
        -webkit-transition-duration: 1s, 1s;
        -moz-transition-duration: 1s, 1s;
        -o-transition-duration: 1s, 1s;
        transition-duration: 1s, 1s;
      }
      .container:hover .example {
        left: 250px;
        background-color: #ccc;
      }
      .el1 {
        -webkit-transition-timing-function: step-start;
        -moz-transition-timing-function: step-start;
        -o-transition-timing-function: step-start;
        transition-timing-function: step-start;
      }
      .el2 {
        -webkit-transition-timing-function: step-end;
        -moz-transition-timing-function: step-end;
        -o-transition-timing-function: step-end;
        transition-timing-function: step-end;
      }
    </style>
  </head>
  <body>
    <h2> Transition-timing-function property example</h2>
    <div class="container">
      <p>
        <code>transition-timing-function: step-start;</code>
      </p>
      <div class="example el1"></div>
      <p>
        <code>transition-timing-function: step-end;</code>
      </p>
      <div class="example el2"></div>
    </div>
  </body>
</html>

Values

Value Description
ease The transition effect starts slowly, then becomes faster and ends slowly. This is the default value.
linear The transition effect starts at the same speed.
ease-in The transition effect starts slowly, but becomes faster at the end and stops abruptly.
ease-out The transition effect starts quickly, but slows down at the end.
ease-in-out The transition effect starts slowly and ends slowly.
step-start Equal to 1, start.
step-end Equal to 1, end.
steps(int,start|end) Specifies a stepping function with two parameters. The first parameter specifies the number of intervals in the function. It must be greater than 0. The second parameter is either the value "start" or "end", and specifies the point at which the change of values occur within the interval. If the second parameter is not applied, the value "end" is given.
cubic-bezier (n,n,n,n) Defines the values by cubic-bezier function.
initial It makes the property use its default value.
inherit It inherits the property from its parents element.

Browser support

chrome edge firefox safari opera
26.0+
1.0 -webkit- 		12.0+ 16.0+
4.0 -moz- 49.0 -webkit- 		6.1+
3.0 -webkit- 		12.1+
15.0 -webkit-

Practice Your Knowledge

The transition-timing-function CSS property has the following values, except

Quiz Time: Test Your Skills!

Ready to challenge what you've learned? Dive into our interactive quizzes for a deeper understanding and a fun way to reinforce your knowledge.

Do you find this helpful?