logo svelte /motion v0.7.12
FIG-001/ TRANSFORM

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.

  • 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.
↩ all examples
pattern · mount tween mode · live running source
category · transform
sheet · sheet 01 / 01
⟳ to re-run