keyframes — Kuito Documentation

Utilisation

Animate through several keyframes.

tsx

// 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

Surcharge 1

(stops: Stops<number>, config?: number | TimingConfig): Animation<number>

Paramètres

Nom	Type	Requis	Description
`stops`	Readonly<Record<number \| `${number}`, number>>	Oui	—
`config`	`number \| TimingConfig`	Non	—

Retourne

Animation<number>

Surcharge 2

(stops: Stops<string>, config?: number | TimingConfig): Animation<string>

Paramètres

Nom	Type	Requis	Description
`stops`	Readonly<Record<number \| `${number}`, string>>	Oui	—
`config`	`number \| TimingConfig`	Non	—

Retourne

Animation<string>

Surcharge 3

(stops: Stops<Readonly<Record<string, Scalar>>>, config?: number | TimingConfig): Effect

Paramètres

Nom	Type	Requis	Description
`stops`	Readonly<Record<number \| `${number}`, Readonly<Record<string, Scalar>>>>	Oui	—
`config`	`number \| TimingConfig`	Non	—

Retourne

Effect

Généré depuis les déclarations TypeScript publiques : signatures, props et valeurs par défaut viennent de la source vérifiée, les descriptions de sa JSDoc. Aucune valeur par défaut n'est inventée.