# Keyframes > Multi-property keyframe animation with scale, rotate, and borderRadius using Svelte Motion. **Source:** [https://motion.svelte.page/examples/keyframes](https://motion.svelte.page/examples/keyframes) **Markdown mirror:** [https://motion.svelte.page/examples/keyframes.md](https://motion.svelte.page/examples/keyframes.md) --- This mirror preserves the prose, implementation notes, and runnable Svelte source behind the live example page. ## FIG-001: 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. **Metadata:** tag: `ANIMATE` | pattern: `keyframe-array` ### Notes - 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. ### Source #### Default.svelte Source file: [src/lib/examples/keyframes/demos/Default.svelte](https://github.com/humanspeak/svelte-motion/blob/main/docs/src/lib/examples/keyframes/demos/Default.svelte) ```svelte
// keyframes times [{times.join(', ')}]
({ width: 100, height: 100, backgroundColor: '#ff0088' }))} animate={{ scale: [1, 2, 2, 1, 1], rotate: [0, 0, 180, 180, 0], borderRadius: ['0%', '0%', '50%', '50%', '0%'] }} transition={{ duration: 2, ease: 'easeInOut', times, repeat: Infinity, repeatDelay: 1 }} />
scale · rotate · radius duration: 2s / loop
``` ## FIG-002: 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. **Metadata:** tag: `ANIMATE` | pattern: `null · += relative` ### Notes - `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 `null`s 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. ### Source #### Wildcard.svelte Source file: [src/lib/examples/keyframes/demos/Wildcard.svelte](https://github.com/humanspeak/svelte-motion/blob/main/docs/src/lib/examples/keyframes/demos/Wildcard.svelte) ```svelte
// wildcard keyframes {note}
({ width: 96, height: 96, display: 'grid', placeItems: 'center', border: '1px solid var(--brut-ink, #0a0a0a)', background: 'var(--brut-accent-soft, rgba(36, 119, 104, 0.12))', color: 'var(--brut-accent, #247768)', boxShadow: '6px 6px 0 var(--brut-rule, #d6dedb)', transformOrigin: '50% 50%' }))} >
null = live value · '+=' = live offset resolved at start
```