# transition-timing-function

Last updated on:

The `transition-timing-function` property, normally used as part of `transition` shorthand, is used to define a function that describes how a transition will proceed over its duration, allowing a transition to change speed during its course.

``````.example {
transition-timing-function: ease-out;
}``````

These timing functions are commonly called easing functions, and can be defined using a predefined keyword value, a stepping function, or a cubic Bézier curve.

The predefined keyword values allowed are:

• ease
• linear
• ease-in
• ease-out
• ease-in-out
• step-start
• step-end

For some values, the effect may not be as obvious unless the transition duration is set to a larger value.

Each of the predefined keywords has an equivalent cubic Bézier curve value or equivalent stepping function value. For example, the following two timing function values would be equivalent to each other:

``````.example {
transition-timing-function: ease-out;
}

.example-2 {
transition-timing-function: cubic-bezier(0, 0, 0.58, 1);
}``````

As would the following two:

``````.example {
transition-timing-function: step-start;
}

.example-2 {
transition-timing-function: steps(1, start);
}``````

## Using steps() and Bézier curves

The `steps()` function allows you to specify intervals for the timing function. It takes one or two parameters, separated by a comma: a positive integer and an optional value of either `start` or `end`. If no second parameter is included, it will default to `end`.

To understand stepping functions, here is a demo that uses `steps(4, start)` for the box on the left, and `steps(4, end)` for the box on the right (hover over a box or reload the frame to view the transitions):

`Check out this Pen!`

When `start` is specified, the change of values occurs at the start of each interval, while `end` causes the change of values to occur at the end of each interval.

A detailed look at Bézier curve values is beyond the scope of this reference, however see the references in the related links section for tools that demonstrate visually how these values work.

For compatibility in all supporting browsers, vendor prefixes are required, with the standard syntax declared last:

``````.example {
-webkit-transition-timing-function: ease-in-out;
-moz-transition-timing-function: ease-in-out;
-o-transition-timing-function: ease-in-out;
transition-timing-function: ease-in-out;
}``````

IE10 (the first stable version of IE to support `transition-timing-function`) does not require the `-ms-` prefix.

### Browser Support

Chrome Safari Firefox Opera IE Android iOS
Works Works 4+ 10.5+ 10+ 2.1+ 3.2+