← All Tools

CSS Spring Animation Generator

Tune a damped harmonic oscillator (mass, stiffness, damping, initial velocity) and emit a pure-CSS @keyframes rule that mimics react-spring / Framer Motion physics — no JS runtime needed.

Physics

Output

settle: peak: oscillations: regime:

Preview

spring

CSS


About Spring Physics

A spring is a damped harmonic oscillator: m·a = -k·x - c·v, where m is mass, k stiffness, c damping, x displacement from rest, v velocity. Three regimes: underdamped (overshoots and oscillates), critically damped (fastest path with no overshoot), overdamped (slow, syrupy). The presets above match Pose / react-spring conventions. Critical damping at c = 2·√(m·k).