X

Headline

This is an important message requiring you to make a choice if you're based in the EU.

CSS animation-timing-function Property

The animation-timing-function property defines how the animation will progress over the duration of each cycle, not throughout the whole of the animation.

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

It can assume the following values:

  • ease - (default) the animation starts slowly, then becomes faster, and ends slowly.
  • ease-in - the animation has a slow start, but accelerates at the end and stops abruptly.
  • ease-out - the animation has a quick start, but slows down at the end.
  • ease-in-out -the animation has both a slow start and a slow end.
  • 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 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) - define your own values in the cubic-bezier function. Possible values are numeric values from 0 to 1.

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

<!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>

Another example with the "ease-in" value is applied.

Example

<!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>

Let’s see an example where different timing function values are illustrated.

Example

<!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>

Values

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

43.0+
4.0-42.0 -webkit-
12.0+ 16.0+
5.0-15.0 -moz-
9.0+
5.1-8.0 -webkit-
12.0+
15.0-29.0 -webkit-

Practice Your Knowledge

CSS animation-timing-function property has the following values, except



Do you find this helpful?

Related articles