keyframes — Kuito Documentação

Utilização

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

Assinaturas

Sobrecarga 1

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

Parâmetros

Nome	Tipo	Obrigatório	Descrição
`stops`	Readonly<Record<number \| `${number}`, number>>	Sim	—
`config`	`number \| TimingConfig`	Não	—

Devolve

Animation<number>

Sobrecarga 2

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

Parâmetros

Nome	Tipo	Obrigatório	Descrição
`stops`	Readonly<Record<number \| `${number}`, string>>	Sim	—
`config`	`number \| TimingConfig`	Não	—

Devolve

Animation<string>

Sobrecarga 3

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

Parâmetros

Nome	Tipo	Obrigatório	Descrição
`stops`	Readonly<Record<number \| `${number}`, Readonly<Record<string, Scalar>>>>	Sim	—
`config`	`number \| TimingConfig`	Não	—

Devolve

Effect

Gerado a partir das declarações TypeScript públicas: assinaturas, props e predefinições vêm da fonte verificada, as descrições da sua JSDoc. Nenhuma predefinição é inventada.