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

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.

My Blog