keyframes
Stops by percentage, as CSS @keyframes: values for one prop make an
animation, objects of props make an effect. A number is the duration.
Usage
Animate through several keyframes.
// Animate through several keyframes.
import { Box, keyframes, motion, repeat } from 'kuito';
const pulse = motion(1);
pulse.value = repeat(keyframes({ 0: 1, 50: 1.1, 100: 1 }, 600)); // one prop: an animation
const pop = keyframes({ 0: { opacity: 0, scale: 0.8 }, 100: { opacity: 1, scale: 1 } }, 300); // objects: an effect
<Box scale={pulse} enter={pop} />;Signatures
Overload 1
(stops: Stops<number>, config?: number | TimingConfig): Animation<number>Parameters
| Name | Type | Required | Description |
|---|---|---|---|
stops | Readonly<Record<number | `${number}`, number>> | Yes | — |
config | number | TimingConfig | No | — |
Returns
Animation<number>
Overload 2
(stops: Stops<string>, config?: number | TimingConfig): Animation<string>Parameters
| Name | Type | Required | Description |
|---|---|---|---|
stops | Readonly<Record<number | `${number}`, string>> | Yes | — |
config | number | TimingConfig | No | — |
Returns
Animation<string>
Overload 3
(stops: Stops<Readonly<Record<string, Scalar>>>, config?: number | TimingConfig): EffectParameters
| Name | Type | Required | Description |
|---|---|---|---|
stops | Readonly<Record<number | `${number}`, Readonly<Record<string, Scalar>>>> | Yes | — |
config | number | TimingConfig | No | — |
Returns
Generated from the public TypeScript declarations: signatures, props and defaults come from the checked source, descriptions from its JSDoc. No defaults are invented.