The transition-timing-function
property designates the speed curve of the transition effect.
Gives a transition effect the ability to change speed throughout its duration.
div {
transition-timing-function: ease;
}
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.
Have a code example of transition-timing-function
? Submit a codepen.io demo and we'll showcase it here ↴