CSS animation-timing-function Property

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.

Example

#

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>

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;

Values

#

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.

More Examples

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>

Browser support

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

You may also like

Guides