CSS Reference Property

transition-timing-function

The transition-timing-function property is used to specify a timing function which defines the speed over time of an object being transitioned from one value to another.

It describes how a transition will progress over one cycle of its duration, allowing a it to change speed during its course.

A timing function in CSS describes how intermediate values during a transition will be calculated, and are usually referred to in CSS as easing functions.

The transition-timing-function takes a timing function as a value, which is a mathematical function that specifies the speed over time of an object being transitioned from one value to another. It can also be defined using one of several predefined keywords for common timing functions.

If you define more than one transition on an element, like, for example, if you want to transition the element’s background color and its position, you may specify multiple timing functions, each for a corresponding property specified using the transition-property property.

It is usually more convenient to specify the transition-timing-function in the transition shorthand property.

Official Syntax

  • Syntax:

    transition-timing-function: <timing-function>
  • Initial: ease
  • Applies To: all elements; and ::before and ::after pseudo-elements
  • Animatable: no

Values

<timing-function>
See the <timing-function> entry for a list of possible values, detailed explanation of each, and examples and demos for each value.

Examples

The following specifies a transition on hover from one background color to another using a predefined timing function keyword.

.element {
    background-color: #009966;
    transition-property: background-color;
    transition-duration: .3s;
    transition-timing-function: ease-out;
}

.element:hover {
    background-color: #0099CC;
}
                

The following are all valid transition-timing-function values:


transition-timing-function: linear;
transition-timing-function: cubic-bezier(0.42, 0, 1, 1); /* equivalent to the "ease-in" keyword */
transition-timing-function: steps(4, start); /* make transition over 4 steps */
transition-timing-function: ease-in-out;
               

See the <timing-function> entry for more values and examples.

Live Demo

In the following demo, an element is transitioned from one position to another by transitioning its offset value, and its background color is also transitioned. Try changing the transition-timing-function value to see how the effect or “feel” of the transition changes.

View this demo on the Codrops Playground

Browser Support

CSS3 Transitions

Simple method of animating certain properties of an element, with ability to define property, duration, delay and timing function.

W3C Working Draft

Supported from the following versions:

Desktop

  • 26
  • 16
  • 10
  • 12
  • 6.1

Mobile / Tablet

  • 7.0
  • 4.4
  • No
  • 61
  • 55

* denotes prefix required.

  • Supported:
  • Yes
  • No
  • Partially
  • Polyfill

Stats from caniuse.com

Further Reading

Written by

Last updated December 11, 2016 at 10:53 pm by Mary Lou

Do you have a suggestion, question or want to contribute? Submit an issue.