Home/ Game Dev/ Animation Curve Editor
〰️

Animation Curve Editor

Drag control points to create custom CSS cubic-bezier easing curves

cubic-bezier value
cubic-bezier(0.25, 0.10, 0.25, 1.00)
CSS transition
transition: all 0.5s cubic-bezier(...);
0.5s
Preview animation

About Animation Curve Editor

Animation Curve Editor is a free browser-based game development tool that helps indie developers and hobbyists drag control points to create custom css cubic-bezier easing curves. Game development involves many specialized tasks, and having the right tools accessible in your browser saves time and keeps your workflow smooth. No installation or engine-specific plugins required.

How to Use

1
Drag the yellow control points P1 and P2 are the two handles that shape the curve. Drag them to adjust the acceleration profile of your animation.
2
Use presets as a starting point Click a preset button (Ease, Ease In, Back, Bounce, etc.) to jump to a common easing curve and then tweak it.
3
Preview and copy Set a duration, click Play to preview the animation, then copy the cubic-bezier value or full CSS transition rule.

FAQ

cubic-bezier() is a CSS timing function that defines a custom easing curve for animations and transitions. It takes four numbers — the x and y coordinates of two control points — and produces a smooth acceleration curve between 0 and 1.
P1 and P2 are the two movable control points of the cubic Bezier curve. P0 at (0,0) and P3 at (1,1) are fixed. Moving P1 controls the start acceleration, while P2 controls the end deceleration of the animation.
Yes — the Y axis (the output value) can exceed the 0–1 range, which creates overshoot and bounce effects. This is used in the "Back" and "Bounce" presets. The X axis must stay within 0–1 for the curve to be a valid timing function.
Paste the cubic-bezier value directly into your CSS: transition: opacity 0.3s cubic-bezier(0.25, 0.1, 0.25, 1); or use it in a keyframe animation: animation-timing-function: cubic-bezier(...);