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.

Related Properties

Other Resources

Browser Support

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


  1. User Avatar
    Permalink to comment#

    i like if this transition ………..
    but i want to transition dropdown smoothly

  2. User Avatar
    Santosh Kumar
    Permalink to comment#

    Chrome Dev Tools now have a Cubic Bezier Editor for more than a year. Other than predefined values, it’s easy now to use WYSIWYG curve editor.

Leave a Comment

Posting Code!

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.