CSS Property: animation-timing-function
[this page | pdf | back links]
The CSS (CSS3) animation-timing-function property specifies
the speed curve of an animation. The speed curve is defined by a cubic Bezier
curve.
Valid property values
(other than inherit
and initial) are:
|
Value
|
Description
|
|
cubic-bezier(x1,x2,x3,x4)
|
As defined by cubic
Bezier function with parameters x1, x2, x3, x4
(possible values of each are numerical values from 0 to 1)
|
|
ease
|
(default value). Slow
start, then fast, before ending slowly
|
|
ease-in
|
Slow start
|
|
ease-out
|
Slow end
|
|
ease-in-out
|
Slow start and end
|
|
linear
|
Animation has same
speed throughout its life
|
|
step-start
|
Equivalent to steps(1,
start)
|
|
step-end
|
Equivalent to steps(1,
end)
|
|
steps(int, start|end)
|
A stepping function
with two parameters. The first parameter specifies the number of intervals in
the function (and must be a positive integer, i.e. greater than zero). The
second (optional) parameter specifies when the change of values occurs and is
either “start” or “end” (if omitted is given the value “end”)
|
|
Default Value:
|
ease
|
|
JavaScript syntax:
|
e.g. object.style.animationTimingFunction="linear"
|
|
Inherited:
|
No
|
|
Animatable:
|
No
|
NAVIGATION LINKS
Contents | Prev | Next | CSS Properties