transition-timing-function

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 orend. 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):

<div class="wrap">
  <div class="box uni"></div>
  <div class="box-2 uni"></div>
</div>

.box {
  -webkit-transition-timing-function: steps(4, start);
  -moz-transition-timing-function: steps(4, start);
  -o-transition-timing-function: steps(4, start);
  transition-timing-function: steps(4, start);
}

.box-2 {
  -webkit-transition-timing-function: steps(4, end);
  -moz-transition-timing-function: steps(4, end);
  -o-transition-timing-function: steps(4, end);
  transition-timing-function: steps(4, end);
}

.box:hover, .box-2:hover {
  background-color: lightblue;
  cursor: pointer;
}

.uni {
  box-sizing: border-box;
  float: left;
  border: solid 1px black;
  width: 150px;
  height: 150px;
  background: goldenrod;
  margin-top: 20px;
  margin-left: 2px;
  -webkit-transition-duration: 3s;
  -moz-transition-duration: 3s;
  -o-transition-duration: 3s;
  transition-duration: 3s;
  -webkit-transition-property: background-color;
  -moz-transition-property: background-color;
  -o-transition-property: background-color;
  transition-property: background-color;
}

.wrap {
  width: 304px;
  overflow: hidden;
  margin: auto;
}

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

• transition
• transition-property
• transition-duration
• transition-delay

Browser Support