Specifies the speed curve of an animation. This is used to make one set of CSS styles change into another set smoothly or jerkily (using steps).
Value
Description
ease
Default. The animation has a slow start, then fast, before it ends slowly
ease-in
The animation starts slowly
ease-out
The animation ends slowly
ease-in-out
The animation starts and ends slowly
linear
The animation has the same speed throughout
step-start
The animation jerks from start to end rather than being smooth. Equivalent to 'steps(1, start)'
step-end
The animation 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 animation. 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 animation. Microthemer provides some examples to get you started.
Animation Timing Function
Specifies the speed curve of an animation. This is used to make one set of CSS styles change into another set smoothly or jerkily (using steps).
Themeover CSS Reference
Online CSS References: Animation Timing Function
Online CSS Tutorials: Animation