transition-timing-function

The transition-timing-function property designates the speed curve of the transition effect.

Syntax

Gives a transition effect the ability to change speed throughout its duration.

div {
  transition-timing-function: ease;
}

Values

ease
Default value. Designates a transition effect that starts slowly, then fast, then ends slowly (same as cubic-bezier(0.25.0.1,0.25,1)).

linear
Designates a transition effect with the same speed from start to end (same as cubic-bezier(0,0,1,1)).

ease-in

Designates a transition effect with a slow start (same as cubic-bezier(0.42,0,1,1)).

ease-out
Designates a transition effect with a slow end (same as cubic-bezier(0,0,0.58,1)).

ease-in-out
Designates a transition effect with a slow start and slow end (same as cubic-bezier(0.42,0,0.58,1)).

step-start
Same as steps(1, start).

step-end
Same as steps(1, end).

steps(int, start|end)
Designates a stepping function utilizing two parameters. First parameter is a positive value larger than 0 that provides the number of intervals in the function. Second parameter is optional and provides the point at which the change of values occur in the interval – either start or end. If omitted, it defaults to end.

cubic-bezier(n,n,n,n)
Defines the values between 0 and 1 in the cubic-bezier function.

initial
Sets the property to its default value.

inherit
Inherits this property’s value from its parent item.

Browser Compatibilty

Demos

Have a code example of transition-timing-function? Submit a codepen.io demo and we'll showcase it here ↴