CSS transition-timing-function Property

The transition-timing-function sets the transition speed curve.

The speed curve specifies the speed and acceleration of a transition.

Options include ease-in, steps, and bezier.

Example

#

An element with a transition-timing-function value of ease. Hover over the rectangle to see the width speed curve - initially fast and then slower.

<style>
  .transition-timing {
    width: 100px;
    height: 100px;
    background: orangered;
    cursor: pointer;
    transition: width 1.5s;
    transition-timing-function: ease;
  }

  .transition-timing:hover {
    width: 350px;
  }
</style>
<div class="transition-timing"></div>

Using transition-timing-function

The transition-timing-function property sets the transition effect.

Transition timing functions are also referred to as easing functions.

Easing functions can be specified by keyword, a stepping function, or a cubic B├ęzier curve.

Syntax

transition-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 | isnherit;

Values

#

Value Description
ease Default. Sets a transition effect with a slow start, then fast, then end slowly (equivalent to cubic-bezier(0.25,0.1,0.25,1))
linear Sets a transition effect with the same speed from start to end (equivalent to cubic-bezier(0,0,1,1))
ease-in Sets a transition effect with a slow start (equivalent to cubic-bezier(0.42,0,1,1))
ease-out Sets a transition effect with a slow end (equivalent to cubic-bezier(0,0,0.58,1))
ease-in-out Sets a transition effect with a slow start and end (equivalent to cubic-bezier(0.42,0,0.58,1))
step-start Equivalent to steps(1, start)
step-end Equivalent to steps(1, end)
steps(int,start|end) Sets a stepping function, with two parameters. The first parameter specifies the number of intervals in the function. It must be a positive integer (greater than 0). The second parameter, which is optional, 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 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 transition-timing-function values. Hover over the rectangle to start the animation.

<style>
  .transition-timing-example {
    width: 100px;
    height: 100px;
    background: orangered;
    cursor: pointer;
    transition: width 1s;
    transition-timing-function: linear;
  }

  .transition-timing-example:hover {
    width: 400px;
  }
</style>
<div class="transition-timing-example"></div>

Browser support

This table shows when transition-timing-function support started for each browser.

Chrome
26.0 Mar 2013
Firefox
16.0 Oct 2012
IE/Edge
10.0 Sep 2012
Opera
12.1 Nov 2012
Safari
6.1 Jun 2013

You may also like

Guides