Keyframes | Svelte Motion

multi-property keyframes.

Three properties (scale, rotate, borderRadius) animate in lockstep as arrays of keyframes. times aligns each value to a normalised t — the square grows, then turns into a spinning circle, then settles back.

Pass an array as any animate value to walk through keyframes — scale: [1, 2, 2, 1, 1] traces five samples. Multiple properties with arrays of the same length keep step automatically.
times: [0, 0.2, 0.5, 0.8, 1] maps each keyframe to a normalised t in [0, 1] — independent of duration. Cluster keyframes near 0.5 for a held middle state, spread them for steady motion.
repeat: Infinity + repeatDelay: 1 loops the sequence with a one-second breath between cycles. Useful for ambient idle animations that don't compete for attention.

↩ all examples

wildcard keyframes.

A null keyframe means "the current value" and a relative string ('+=30') offsets from it — both resolve against the element's LIVE value the moment the animation starts. Drift the card, nudge it with +=30, then pulse scale: [null, 1.15, 1] mid-flight: the pulse begins from wherever the card is, without a hardcoded from-value.

null in a keyframe means "the current value". The live element feeds the first keyframe at animation start — scale: [null, 1.15, 1] pulses from wherever scale already is, then settles at 1. Later nulls hold the previous keyframe instead (upstream fillWildcards).
Relative strings resolve against the live value too: x: '+=30' steps 30px right from the card's current x, and '-=30' steps left — no absolute target needed.
A bare x: null means "hold x at its current value", so the pulse keeps the card wherever it drifted to. Because every wildcard resolves at start, the x position and the scale pulse compose instead of snapping to a hardcoded from-value.

↩ all examples

keyframes-wildcard

Wildcard.svelte

loading code fetching the highlighted snippet