Transition Timing Function

Specifies the speed curve of a transition. This is used to make the CSS styles change into another set smoothly or jerkily (using steps).

Value Description
easeDefault. The transition has a slow start, then fast, before it ends slowly
ease-inThe transition starts slowly
ease-outThe transition ends slowly
ease-in-outThe transition starts and ends slowly
linearThe transition has the same speed throughout
step-startThe transition jerks from start to end rather than being smooth. Equivalent to 'steps(1, start)'
step-endThe transition jerks from end to start rather than being smooth. Equivalent to 'steps(1, end)'
steps(int, start|end)Custom function for defining the number of steps and direction of the jerky transition. The first value, number of steps, must be a positive number. The second value must be either 'start' or 'end'. It specifies the direction.
cubic-bezier(n,n,n,n)Custom function for fine grained control over the speed of the transition. Microthemer provides some examples to get you started.

Themeover CSS Reference

Close