CSS transition-timing-function Property

The transition-timing-function CSS property specifies the speed curve of a transition over its duration.

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

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

Syntax

CSS transition-timing-function values

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:

CSS transition-timing-function code example

<!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;
        transition-property: background-color, left;
        transition-duration: 1s, 1s;
        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>

Try it Yourself »

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

CSS transition-timing-function values code example

<!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;
        transition-property: background-color, left;
        transition-duration: 1s, 1s;
      }
      .container:hover .example {
        left: 250px;
        background-color: #ccc;
      }
      .el1 {
        transition-timing-function: ease;
      }
      .el2 {
        transition-timing-function: linear;
      }
      .el3 {
        transition-timing-function: ease-in;
      }
      .el4 {
        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>

Try it Yourself »

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

CSS transition-timing-function another example

<!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;
        transition-property: background-color, left;
        transition-duration: 1s, 1s;
      }
      .container:hover .example {
        left: 250px;
        background-color: #ccc;
      }
      .el1 {
        transition-timing-function: step-start;
      }
      .el2 {
        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>

Try it Yourself »

Values

Value	Description
ease	The transition effect starts slowly, then becomes faster and ends slowly. This is the default value.
linear	The transition effect proceeds at a constant speed from start to finish.
ease-in	The transition effect starts slowly and accelerates toward the end.
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	Equivalent to `steps(1, start)`.
step-end	Equivalent to `steps(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)	Specifies a cubic Bézier curve to define the acceleration and deceleration of the transition.
initial	It makes the property use its default value.
inherit	It inherits the property from its parents element.

Practice

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

ease-in-out
step-end
paused
linear