A component for generating CSS animations at runtime.
Demo and playground are available here
prop | required? | type | default |
---|---|---|---|
children |
+ | ReactElement |
|
active |
boolean |
true |
|
horizontal |
number | string |
0 |
|
vertical |
number | string |
0 |
|
rotation |
number | string |
0 |
|
scale |
string |
"1.0 1.0" |
|
opacity |
string |
"1.0 1.0" |
|
duration |
number | string |
"400ms" |
|
delay |
number |
||
iteratons |
string |
"infinite" |
|
precision |
number |
0.2 |
|
interpolator |
IInterpolateFn | IIndividualInterpolators
|
interpolateRandom |
|
fillMode |
IInterpolateFn |
"none" |
|
direction |
IInterpolateFn |
"normal" |
|
timingFunction |
IInterpolateFn |
"linear" |
Defines, whether the animation should be played. Setting this to false
will return a simple <div>
.
Defines min and max horizontal translation of the animated component. Can be either:
- An integer. This defaults to pixels, and positive and negative values as boundaries.
- A string consisting of an integer and a unit (i.e.
20rem
). As above, negative value is used as a lower boundary. - A string consisting of both boundaries (i.e.
-20px 30px
).
Defines min and max vertical translation of the animated component. Can be either:
- An integer. This defaults to pixels, and positive and negative values as boundaries.
- A string consisting of an integer and a unit (i.e.
10rem
). As above, negative value is used as a lower boundary. - A string consisting of both boundaries (i.e.
-10px 150px
).
Defines min and max rotation of the animated component. Can be either:
- An integer. This defaults to degrees, and positive and negative values as boundaries.
- A string consisting of an integer and a unit (i.e.
0.1turn
). As above, negative value is used as a lower boundary. - A string consisting of both boundaries (i.e.
-5deg 3deg
).
Defines min and max scale of the animated component. Consisits of a string of 2 numbers (i.e. 0.9 1.1
) being respectively min and max value.
Defines min and max opacity of the animated component. Consisits of a string of 2 numbers (i.e. 0.9 1.1
) being respectively min and max value.
Defines time of the animation. Can be either:
- An integer. Defaults to
ms
. - A string consisting of an integer and a unit (i.e.
1s
).
Time between activating the animaiton, and animation actually playing.
Number of iterations to play on activation.
Length of 1 keyframe (for example 0.2
means keyframes every 20%
).
Defines way of generating new values for the animation. Can be either:
-
IInterpolateFn
- A function ((progress: number) => number
). Input and output values are between0.0
and1.0
. -
IIndividualInterpolators
- An object, with keysh, v, s, r, o
and functions described above as values. All keys are optional - unfilled values will default tointerpolateRandom()
❕ Results generated by this function aren't actual animation values, they only describe the ratio between lower and higher bounds. (0 results in using lower bound, 1 results in using the higher bound). In general:
keyframeValue = highBound * x + (1 - x) * lowBound
, wherex
is the output of above mentioned function.
Direct CSS animation properties.
❕ Unlike regular CSS animation, the value function is
linear
. This is because interpolator prop provides similar, yet more extensive function.