CSS Property: transition-timing-function
[this page | pdf | back links]
The CSS (CSS3) transition-timing-function property identifies
the speed curve used for a transition effect.
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, equivalent to
cubic-bezier(0.25,0.1,0.25,1)
|
|
ease-in
|
Slow start, equivalent
to cubic-bezier(0.42,0,1,1)
|
|
ease-out
|
Slow end, equivalent to
cubic-bezier(0,0,0.58,1)
|
|
ease-in-out
|
Slow start and end,
equivalent to cubic-bezier(0.42,0,0.58,1)
|
|
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.transitionTimingFunction="linear"
|
|
Inherited:
|
No
|
|
Animatable:
|
No
|
NAVIGATION LINKS
Contents | Prev | Next | CSS Properties