CSS animation-timing-function Property

❮ Prev Next ❯

The animation-timing-function property defines how the animation will progress over the duration of each cycle, not throughout the whole of the animation. It specifies the animation’s speed curve defining the time which is needed for an animation to change from one style set to another.

Timing functions can be specified on certain keyframes in the @keyframes rule. If there isn’t a specified animation-timing-function on a keyframe, the respective value of animation-timing-function of the element is used for that keyframe.

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

It can assume the following values:

ease - (default) starts slowly, then becomes faster, and ends slowly.
ease-in - starts slowly, but accelerates at the end and stops abruptly.
ease-out - starts quickly, but slows down at the end.
ease-in-out - starts slowly and ends slowly.
step-start- equal to 1, start.
step-end- equal to 1, end.
linear - the animation has the same speed throughout the animation, often best used for color or opacity changes.
steps(int,start|end)- specifies a stepping function with two parameters. The first parameter defines 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 your own values in the cubic-bezier function. Possible values are from 0 to 1.

When multiple comma-separated values are specified for any animation property, they will be attached to the animations that are defined in animation-name differently.

Initial Value	ease
Applies to	All elements. It also applies to ::before and ::after pseudo-elements.
Inherited	No
Animatable	No
Version	CSS3
DOM Syntax	object.style.animationTimingFunction = "linear";

Syntax

animation-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 the animation-timing-function property with the "ease" value:

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
    <style>
      div {
        width: 100px;
        height: 100px;
        border-radius: 50%;
        background: #1c87c9;
        position: relative;
        -webkit-animation: element 5s infinite;
        /* Safari 4.0 - 8.0 */
        -webkit-animation-timing-function: ease;
        /* Safari 4.0 - 8.0 */
        animation: element 5s infinite;
        animation-timing-function: ease;
      }
      /* Safari 4.0 - 8.0 */
      @-webkit-keyframes element {
        from {
          left: 0px;
        }
        to {
          left: 200px;
        }
      }
      @keyframes element {
        from {
          left: 0px;
        }
        to {
          left: 200px;
        }
      }
    </style>
  </head>
  <body>
    <h2>Animation-timing-function example</h2>
    <div></div>
  </body>
</html>

Try it Yourself »

Example of the animation-timing-function property with the "ease-in" value:

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
        width: 100px;
        height: 100px;
        background: #8ebf42;
        position: relative;
        -webkit-animation: element 7s infinite;
        /* Safari 4.0 - 8.0 */
        -webkit-animation-timing-function: ease-in;
        /* Safari 4.0 - 8.0 */
        animation: element 7s infinite;
        animation-timing-function: ease-in;
      }
      /* Safari 4.0 - 8.0 */
      @-webkit-keyframes element {
        from {
          left: 0px;
        }
        to {
          left: 200px;
        }
      }
      @keyframes element {
        from {
          left: 0px;
        }
        to {
          left: 200px;
        }
      }
    </style>
  </head>
  <body>
    <h1>The animation-timing-function Property</h1>
    <div></div>
  </body>
</html>

Try it Yourself »

Example of the animation-timing-function property with different timing functions:

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
        width: 100px;
        height: 100px;
        border-radius: 50%;
        background: #1c87c9;
        color: #eee;
        font-weight: bold;
        position: relative;
        text-align: center;
        padding: 8px;
        -webkit-animation: mymove 5s infinite;
        /* Safari 4.0 - 8.0 */
        animation: mymove 5s infinite;
      }
      /* Safari 4.0 - 8.0 */
      #div1 {
        -webkit-animation-timing-function: linear;
      }
      #div2 {
        -webkit-animation-timing-function: ease;
      }
      #div3 {
        -webkit-animation-timing-function: ease-in;
      }
      #div4 {
        -webkit-animation-timing-function: ease-out;
      }
      #div5 {
        -webkit-animation-timing-function: ease-in-out;
      }
      #div1 {
        animation-timing-function: linear;
      }
      #div2 {
        animation-timing-function: ease;
      }
      #div3 {
        animation-timing-function: ease-in;
      }
      #div4 {
        animation-timing-function: ease-out;
      }
      #div5 {
        animation-timing-function: ease-in-out;
      }
      /* Safari 4.0 - 8.0 */
      @-webkit-keyframes mymove {
        from {
          left: 0px;
        }
        to {
          left: 300px;
        }
      }
      @keyframes mymove {
        from {
          left: 0px;
        }
        to {
          left: 300px;
        }
      }
    </style>
  </head>
  <body>
    <h2>Animation-timing-function example</h2>
    <div id="div1">linear</div>
    <div id="div2">ease</div>
    <div id="div3">ease-in</div>
    <div id="div4">ease-out</div>
    <div id="div5">ease-in-out</div>
  </body>
</html>

Try it Yourself »

Values

Value	Description	Play it
ease	The animation starts slowly, then becomes faster and ends slowly. This is the default value.	Play it »
linear	The animation starts at the same speed.	Play it »
ease-in	The animation starts slowly, but becomes faster at the end and stops abruptly.	Play it »
ease-out	The animation starts quickly, but slows down at the end.	Play it »
ease-in-out	The animation starts slowly and ends slowly.	Play it »
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.