W3docs
en
Log in

CSS animation-timing-function Property

The animation-timing-function is a CSS property which sets the speed of an animation through the duration of each cycle.

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 define the interpolation between keyframe stops. If a timing function isn't specified for an interval, the element's animation-timing-function value is used.

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.
  • ease-out - Starts quickly, but slows down at the end.
  • ease-in-out - Starts slowly and ends slowly.
  • step-start - Equivalent to steps(1, start).
  • step-end - Equivalent to steps(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 occurs within the interval. If the second parameter is omitted, "end" is used.
  • cubic-bezier(n,n,n,n) - Specifies custom values for the cubic-bezier function. The first two parameters define the X coordinates and must be between 0 and 1. The last two parameters define the Y coordinates and can be any number.

When multiple comma-separated values are specified, they map to the corresponding animations defined in animation-name in order. If there are fewer timing functions than animations, the list is repeated to match the count.

Initial Valueease
Applies toAll elements. It also applies to ::before and ::after pseudo-elements.
InheritedNo
AnimatableNo
VersionCSS3
DOM Syntaxobject.style.animationTimingFunction = "linear";

Syntax

Syntax of CSS animation-timing-function Property

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:

Example of CSS animation-timing-function Property with 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;
        animation: element 5s infinite;
        animation-timing-function: ease;
      }
      @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:

Example of CSS animation-timing-function Property with ease-in value

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
        width: 100px;
        height: 100px;
        background: #8ebf42;
        position: relative;
        animation: element 7s infinite;
        animation-timing-function: ease-in;
      }
      @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:

Example of CSS animation-timing-function Property with linear,ease,ease-in, ease-out and ease-in-out values

<!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;
        animation: mymove 5s infinite;
      }
      #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;
      }
      @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

ValueDescriptionPlay it
easeThe animation starts slowly, then becomes faster and ends slowly. This is the default value.Play it »
linearProceeds at a constant speed throughout the animation.Play it »
ease-inThe animation starts slowly, but becomes faster at the end.Play it »
ease-outThe animation starts quickly, but slows down at the end.Play it »
ease-in-outThe animation starts slowly and ends slowly.Play it »
step-startEquivalent to steps(1, start).
step-endEquivalent 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)Defines the values by cubic-bezier function. The first two parameters are X coordinates (0 to 1), and the last two are Y coordinates (can be any number).
initialIt makes the property use its default value.
inheritIt inherits the property from its parent element.

Practice

Practice

What does the CSS animation-timing-function property specify?