Design springs and easing curves. Export pure CSS.
Springs ship as linear(). How it works
Keyboard shortcuts
- Space
- Play
- B
- Compare: keep the current curve as B
- 1 – 6
- Switch scene
- C
- Copy the exported code
- ⌘Z / Ctrl+Z
- Undo
- ⇧⌘Z / Ctrl+Shift+Z
- Redo
- Arrow keys
- Move a focused bezier handle (Shift: bigger steps)
- ?
- Show this list
Curve
Load into
Springs
Bezier curves
How to read it
Top row: where the element sits on each frame, so bunched ticks mean slow motion. Bottom row: the same frames in time order, each bar the distance travelled, so the settle is easy to read. Keys are circled.
ms
Drag the handles on the plot, or focus one and use the arrow keys (Shift for bigger steps).
Preview
Publish changes?
Your edits will be visible to everyone.
CancelPublish
How to read it
Top row: where the element sits on each frame, so bunched ticks mean slow motion. Bottom row: the same frames in time order, each bar the distance travelled, so the settle is easy to read. Keys are circled.
Export
cubic-bezier() is exact: no sampling, works in every browser.
:root {
--ease-standard: cubic-bezier(0.2, 0, 0, 1);
--ease-standard-duration: 300ms;
}
.element {
transition: transform var(--ease-standard-duration) var(--ease-standard);
}300 ms