By default, Custom Easing support easing functions, in the form,
constant
accelerate
decelerate
accelerate-decelerate
decelerate-accelerate
linear
ease-in / in
ease-out / out
ease-in-out / in-out
ease-out-in / out-in
ease
in-sine
out-sine
in-out-sine
out-in-sine
steps
in-quad
out-quad
in-out-quad
out-in-quad
step-start
in-cubic
out-cubic
in-out-cubic
out-in-cubic
step-end
in-quart
out-quart
in-out-quart
out-in-quart
in-quint
out-quint
in-out-quint
out-in-quint
in-expo
out-expo
in-out-expo
out-in-expo
in-circ
out-circ
in-out-circ
out-in-circ
in-back
out-back
in-out-back
out-in-back
in-bounce
out-bounce
in-out-bounce
out-in-bounce
in-elastic
out-elastic
in-out-elastic
out-in-elastic
spring / spring-in
spring-out
spring-in-out
spring-out-in
All Elastic easing's can be configured using theses parameters,
*-elastic(amplitude, period)
Each parameter comes with these defaults
Parameter
Default Value
amplitude
1
period
0.5
All Spring easing's can be configured using theses parameters,
spring-*(mass, stiffness, damping, velocity)
Each parameter comes with these defaults
Parameter
Default Value
mass
1
stiffness
100
damping
10
velocity
0
You can create your own custom cubic-bezier easing curves. Similar to css you type cubic-bezier(...) with 4 numbers representing the shape of the bezier curve, for example, cubic-bezier(0.47, 0, 0.745, 0.715) this is the bezier curve for in-sine.
Note: the easing property supports the original values and functions for easing as well, for example, steps(1), and etc... are supported.
Note: you can also use camelCase when defining easing functions, e.g. inOutCubic to represent in-out-cubic
By default, Custom Easing support easing functions, in the form,
All Elastic easing's can be configured using theses parameters,
*-elastic(amplitude, period)
Each parameter comes with these defaults
1
0.5
All Spring easing's can be configured using theses parameters,
spring-*(mass, stiffness, damping, velocity)
Each parameter comes with these defaults
1
100
10
0
You can create your own custom cubic-bezier easing curves. Similar to css you type
cubic-bezier(...)
with 4 numbers representing the shape of the bezier curve, for example,cubic-bezier(0.47, 0, 0.745, 0.715)
this is the bezier curve forin-sine
.Note: the
easing
property supports the original values and functions for easing as well, for example,steps(1)
, and etc... are supported.Note: you can also use camelCase when defining easing functions, e.g.
inOutCubic
to representin-out-cubic