The animation-timing-function sets the animation speed curve.
Options include: linear, ease, steps, and cubic-bezier.
These functions describe the transition from one state to another.
An element with animation-timing-function set to ease-out.
It appears as if the element bounces off the left side.
<style>
.animate {
width: 80px;
height: 80px;
background: steelblue;
animation: movingAnimation 2s alternate infinite;
animation-timing-function: ease-out;
}
@keyframes movingAnimation {
from { transform: none; }
to { transform: translateX(400%); }
}
</style>
<div class="animate"></div>
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;
| Value | Description |
|---|---|
| linear | Plays animation the same speed from start to end |
| ease | Default. Plays animation from the slow start, then fast, before it ends slowly |
| ease-in | Plays animation on the slow start |
| ease-out | Plays animation on the slow end |
| ease-in-out | Plays animation on both slow start and slow end |
| step-start | Equivalent to steps(1, start) |
| step-end | Equivalent to steps(1, end) |
| steps(int,start|end) | Sets the stepping function. The first parameter specifies function intervals which must be a positive integer (greater than 0). The second parameter is optional which is either the value "start" or "end". It must specify the point at which the change of values occurs within the interval. If the second parameter is omitted, it is given the value "end". |
| 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 | Sets the value to its default value. |
| inherit | Inherits the value from its parent element. |
Click the buttons to see the different animation-timing-function values.
<style>
.animate-example {
width: 80px;
height: 80px;
background: steelblue;
animation: movingAnimation 2s alternate infinite;
animation-timing-function: linear;
}
@keyframes movingAnimation {
from { transform: none; }
to { transform: translateX(400%); }
}
</style>
<div class="animate-example"></div>
This table shows when animation-timing-function support started for each browser.
 Chrome
|
43.0 | May 2015 |
 Firefox
|
16.0 | Oct 2012 |
 IE/Edge
|
10.0 | Sep 2012 |
 Opera
|
30.0 | Jun 2015 |
 Safari
|
9.0 | Sep 2015 |
