HTML Dog
Skip to navigation

CSS Property: transition-timing-function

The acceleration and deceleration of a transition — the gradual change of appearance over time.

Possible Values

ValueDescriptionExample
easeQuick acceleration followed by slow deceleration. Default.
linearConstant speed throughout.
ease-inSteady acceleration.
ease-outSteady deceleration.
ease-in-outSteady acceleration followed by steady deceleration.
cubic-bezier()Precise timing function control, specifying a cubic bezier curve.
It should contain four numbers — x1, y1, x2, y2.
x1 and x2 should be between 0 and 1.
cubic-bezier(0.5,1.5,0.5,-0.5)
steps()Stepping function. The number of intervals the transition jumps through (rather than the smooth transitions of the previous values).
It should contain an integer greater than zero which specifies the number of intervals.
Optionally, it can also contain start or end to specify at what point in the interval the change of values should take place (defaults to start).
steps(5,end)
step-startThe equivalent of steps(1, start).
step-endThe equivalent of steps(1, end).
[value][value]Multiple values can be separated by commas. These will match, in order, similarly listed items in other transition properties (such as transition-property).linear, ease-in, ease-out
inherit
initial
unset

Example


a {
    color: rgba(255,0,0,.5);
    transition-property: color;
    transition-duration: .3s;
    transition-timing-function: linear;
}
/* A semi-transparent red link with a quick linear transition applied to the color property. */

a:hover {
    color: rgba(255,0,0,1);
}
/* When hovered over, the color of the link will turn solid red at a constant speed.  */

Browser support

Can I Use css-transitions? Data on support for the css-transitions feature across the major browsers from caniuse.com.