# Rotate > Continuous rotation animation with configurable easing built with Svelte Motion. A simple example demonstrating infinite transform animations. **Source:** [https://motion.svelte.page/examples/rotate](https://motion.svelte.page/examples/rotate) **Markdown mirror:** [https://motion.svelte.page/examples/rotate.md](https://motion.svelte.page/examples/rotate.md) --- This mirror preserves the prose, implementation notes, and runnable Svelte source behind the live example page. ## FIG-001: simple rotate. `animate={{ rotate: 360 }}` tweens the transform rotation from its current value to 360° over the configured duration. Replay re-mounts so the rotation plays again. **Metadata:** tag: `TRANSFORM` | pattern: `mount tween` ### Notes - `rotate` is a pseudo-prop motion translates into a CSS `transform: rotate(…deg)`. Numbers default to degrees; pass `'90deg'`, `'1turn'`, or `'0.5rad'` if you want explicit units. - `transition={'{ duration: 1 }'}` is a 1-second linear tween. Drop in `type: 'spring'` for physics-based motion, or add `repeat: Infinity` for a continuous spinner. - The Replay button bumps a key on a `{#key}` block — Svelte re-mounts the element and motion runs the entrance tween again. Same trick works for any one-shot animation. ### Source #### Default.svelte Source file: [src/lib/examples/rotate/demos/Default.svelte](https://github.com/humanspeak/svelte-motion/blob/main/docs/src/lib/examples/rotate/demos/Default.svelte) ```svelte
// rotate replay {String(replayId).padStart(2, '0')}
{#key replayId} ({ width: '96px', height: '96px', display: 'grid', placeItems: 'start center', paddingTop: '6px', border: '1px solid var(--brut-ink, #0a0a0a)', backgroundColor: 'var(--brut-accent-soft, rgba(36, 119, 104, 0.1))', boxShadow: '6px 6px 0 var(--brut-rule, #d6dedb)' }))} > {/key}
(replayId += 1)} whileHover={{ scale: 1.04 }} whileTap={{ scale: 0.96 }} transition={{ type: 'spring', stiffness: 500, damping: 30 }} style={styleString(() => ({ fontFamily: 'var(--brut-mono, monospace)', fontSize: '0.6875rem', textTransform: 'uppercase', letterSpacing: '0.08em', border: '1px solid var(--brut-accent, #247768)', backgroundColor: 'var(--brut-accent-soft, rgba(36, 119, 104, 0.1))', color: 'var(--brut-accent, #247768)', padding: '0.5rem 0.875rem', cursor: 'pointer' }))} > ↻ replay rotate: 0 → 360° / 1s
```