Motion · sandbox

{{ONE_SENTENCE_LEAD — what this sandbox demonstrates and what motion spec it produces}}

Tune the sliders. The live CSS below updates instantly.

demo

Duration600 ms

Easing

Peak Y translate60 px

Peak scale1.15

Rotate360°

Iteration count1

Live CSS spec

Notes

Where this lives — paste the spec into {{TARGET_CSS_FILE}} as .{{TARGET_CLASS}}.
Performance — animates transform only. No layout / paint cost. Safe on every device.
Accessibility — wrapped in @media (prefers-reduced-motion: reduce). Honours OS preference.

Generated {{ISO_DATE}}. Motion spec owner: {{NAME}}.