keyframes — Kuito Dokumentation

Verwendung

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

Signaturen

Überladung 1

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

Parameter

Name	Typ	Erforderlich	Beschreibung
`stops`	Readonly<Record<number \| `${number}`, number>>	Ja	—
`config`	`number \| TimingConfig`	Nein	—

Rückgabe

Animation<number>

Überladung 2

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

Parameter

Name	Typ	Erforderlich	Beschreibung
`stops`	Readonly<Record<number \| `${number}`, string>>	Ja	—
`config`	`number \| TimingConfig`	Nein	—

Rückgabe

Animation<string>

Überladung 3

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

Parameter

Name	Typ	Erforderlich	Beschreibung
`stops`	Readonly<Record<number \| `${number}`, Readonly<Record<string, Scalar>>>>	Ja	—
`config`	`number \| TimingConfig`	Nein	—

Rückgabe

Effect

Generiert aus den öffentlichen TypeScript-Deklarationen: Signaturen, Props und Standardwerte stammen aus der geprüften Quelle, Beschreibungen aus deren JSDoc. Kein Standardwert ist erfunden.