Property Description

The animation-timing-function property specifies the speed curve of the animation.

The speed curve defines the amount of time an animation uses to change from one set of CSS styles to another.

This property has the following syntax:

animation-timing-function: linear|ease|ease-in|ease-out|cubic-bezier(n,n,n,n)|initial|inherit;

Property Values

Examples

This example shows the pre-defined animation timing functions:

<style type="text/css">

div.animate {
  width:50px;
  height:50px;
  color:white;
  padding:2px;
  background:blue;
  position:relative;
  animation:boxmove 5s infinite;
  /* Firefox */
  -moz-animation:boxmove 5s infinite;
  /* Safari and Google Chrome */
  -webkit-animation:boxmove 5s infinite;
}

#test1 {
  animation-timing-function:linear;
  /* Firefox */
  -moz-animation-timing-function:linear;
  /* Safari and Google Chrome */
  -webkit-animation-timing-function:linear;
}

#test2 {
  animation-timing-function:ease;
  /* Firefox */
  -moz-animation-timing-function:ease;
  /* Safari and Google Chrome */
  -webkit-animation-timing-function:ease;
}

#test3 {
  animation-timing-function:ease-in;
  /* Firefox */
  -moz-animation-timing-function:ease-in;
  /* Safari and Google Chrome */
  -webkit-animation-timing-function:ease-in;
}

#test4 {
  animation-timing-function:ease-out;
  /* Firefox */
  -moz-animation-timing-function:ease-out;
  /* Safari and Google Chrome */
  -webkit-animation-timing-function:ease-out;
}

#test5 {
  animation-timing-function:ease-in-out;
  /* Firefox */
  -moz-animation-timing-function:ease-in-out;
  /* Safari and Google Chrome */
  -webkit-animation-timing-function:ease-in-out;
}

@keyframes boxmove
{
from {left:0px;}
to {left:210px;}
}

@-moz-keyframes boxmove /* Firefox */
{
from {left:0px;}
to {left:210px;}
}

@-webkit-keyframes boxmove /* Safari and Google Chrome */
{
from {left:0px;}
to {left:210px;}
}
</style>

<div id="test1" class="animate">linear</div>
<br/>
<div id="test2" class="animate">ease</div>
<br/>
<div id="test3" class="animate">ease-in</div>
<br/>
<div id="test4" class="animate">ease-out</div>
<br/>
<div id="test5" class="animate">ease-in-out</div>

This produces the following result:

Browser Support

Miscellaneous Information