Cubic-Bezier Transition Curve Animator

Drag the control point handles, watch your easing curve update live, and copy the generated CSS timing function instantly.

Curve Coordinates
Quick Presets
Animation Testing Settings
1.0s
SVG Curve Graph
Time (X) Progress (Y) 0 1 1 P1 P2
Live Animation Stage
Custom cubic-bezier
Reference: linear
Pink = your custom curve. Indigo = reference curve.
Click "Trigger Animation" or enable Auto-loop to compare.
Generated CSS Output
/* Loading... */
Key Terms Explained
Cubic-Bezier
A mathematical curve defined by four points: two fixed anchors at (0,0) and (1,1), and two movable control points P1 and P2 that shape how the curve bends between them.
Transition Timing Function
The CSS property that defines the speed curve of a transition, controlling how fast or slow the animated property changes at each moment in time.
Easing
The technique of varying an animation's speed over its duration instead of keeping it constant. Easing makes motion feel natural and intentional rather than robotic.
Keyframe
A snapshot of an element's state at a specific point in an animation. In CSS, @keyframes rules define these snapshots, and the browser interpolates everything in between.
Overshoot
When an animated element temporarily goes past its target value before settling back. Achieved by setting P1 Y above 1 or P2 Y above 1. Creates a spring or bounce feel.
Interpolation
The process of calculating all in-between values during a transition. The browser interpolates position, color, opacity and other properties frame-by-frame based on the timing curve.
CSS Transition
A CSS mechanism for smoothly animating a property from one value to another when it changes, controlled by transition-property, transition-duration, and transition-timing-function.
Control Points (P1, P2)
The two movable handles that define the shape of a cubic-bezier curve. P1 influences the start of the curve; P2 influences the end. Their positions determine easing, bounce, and overshoot.

The Complete Guide to CSS Cubic-Bezier Timing Functions

Every CSS transition you write has a timing function controlling its speed rhythm. By default this is "ease" - but that preset was designed for general use, not your specific animation. Cubic-bezier curves let you define exactly how your element accelerates, decelerates, or even bounces past its destination. This guide explains how the math works, how to read the graph, and when to reach for each technique.

How to Use This Tool

Start by dragging the pink (P1) and indigo (P2) handles on the SVG graph. The curve updates in real time as you drag. Alternatively, type precise values into the number inputs or use the step sliders beside each input. Click "Trigger Animation" to fire a single animation cycle across both tracks so you can compare your custom curve against the selected reference. Enable "Auto-loop" to keep both tracks running continuously for a side-by-side feel evaluation. When satisfied, click "Copy CSS" to grab the generated transition property and paste it directly into your stylesheet.

Reading the Coordinate System

The SVG graph maps time on the horizontal axis (left = 0, right = 1) and animation progress on the vertical axis (bottom = 0, top = 1). A perfectly linear curve would be a straight diagonal. A curve that bows upward near the left means the animation starts fast; bowing upward near the right means it accelerates toward the end. When a control point's Y value drops below 0 or exceeds 1, the graph shows a faint hatched zone - this is the "overshoot" region, where the element will temporarily move beyond its start or end state before settling.

Why X Values Must Stay Between 0 and 1

CSS enforces that P1 X and P2 X remain in the range [0, 1] because the timing function must pass the vertical line test: for every moment in time, there can be only one output value. If X could exceed 1 or go negative, a single timestamp could correspond to two different progress values, which is undefined. The Y axis has no such restriction. Browsers intentionally allow any Y value because the output is a property value, and it makes physical sense for a spring to temporarily overshoot before snapping back.

Choosing the Right Curve for the Job

Ease-out (starts fast, ends slow) is the workhorse for most UI interactions: menus opening, cards appearing, modals sliding in. It feels natural because objects in real life decelerate before stopping. Ease-in (starts slow, ends fast) works for elements leaving the screen - an exit that speeds up feels intentional. Ease-in-out is ideal for elements repositioning within the viewport; the symmetric acceleration and deceleration makes the eye comfortable. Spring curves (with overshoot) add personality and delight to product UIs but should be used sparingly - reserve them for single focal elements, not repeated list items.

Using cubic-bezier in @keyframes

You are not limited to element-level transitions. Inside a @keyframes block, each percentage step can have its own animation-timing-function declaration. For example, setting animation-timing-function: cubic-bezier(0.34,1.56,0.64,1) at the 0% step gives only that phase a spring feel, while later steps can be linear or ease-out. This lets you build complex, choreographed animations with different movement qualities in different phases - a technique used heavily in micro-interaction design.

Frequently Asked Questions

How do the X and Y coordinates map to time and animation progress? ▼
In CSS cubic-bezier timing functions, the horizontal axis (X) represents time, from 0 at the start to 1 at the end. The vertical axis (Y) represents the animation's output progress, also from 0 to 1 in the normal range. P1 shapes the early part of the curve and P2 shapes the late part. The steepness of the curve at any point tells you how fast the animation is moving at that moment: steep sections are fast, flat sections are slow.
Why does my animation go backward at the beginning or end? ▼
This is an intentional anticipation or overshoot effect caused by a Y value dropping below 0 or exceeding 1. A negative P1 Y creates a brief reverse motion at the start (anticipation), while a P2 Y above 1 causes the element to overshoot its target before snapping back. Both are standard motion design techniques. The hatched zones on the graph highlight exactly when and how much the curve enters these regions. If you do not want this behavior, keep both Y values inside the [0, 1] range.
What is the difference between ease-out and ease-in-out curves? ▼
An ease-out curve starts fast and decelerates toward the end, expressed as cubic-bezier(0, 0, 0.58, 1). It is ideal for elements entering the screen because objects naturally decelerate when they stop. An ease-in-out curve starts slow, peaks in the middle, and decelerates again at the end, expressed as cubic-bezier(0.42, 0, 0.58, 1). It is the smoothest-feeling option for elements moving between two points in the same view. Use ease-out for entrances, ease-in for exits, and ease-in-out for repositioning.
Can I use cubic-bezier curves for CSS @keyframes animations? ▼
Yes. You can apply a cubic-bezier value through the animation-timing-function property, either on the element itself (applying the curve across the full animation) or inside individual @keyframes percentage steps (applying it only for that segment). Placing different timing functions at different keyframe steps lets you chain distinct easing behaviors - for example, a spring overshoot during the first half and a gentle ease-out for the settle phase.
Why must X values stay between 0 and 1 but Y values can go outside that range? ▼
X represents time, and for a function to be valid, each point in time must map to exactly one output. If X could go below 0 or above 1, a single time value could correspond to two different progress states, which is mathematically undefined. Y represents the animated property's output value, and properties are allowed to temporarily overshoot - a spring can stretch past its endpoint before snapping back. Browsers clamp P1 X and P2 X to [0, 1] automatically but honor any Y value you provide.
What is interpolation in the context of CSS transitions? ▼
Interpolation is how the browser calculates every intermediate frame between an element's start state and its end state. For a box moving from left: 0 to left: 300px, the browser computes every pixel position in between on each animation frame, following the rate set by the timing function. The cubic-bezier curve acts as the interpolation guide: a steep section means rapid change per frame, a flat section means slow or paused change. Without interpolation there would be no smooth animation, only an instant jump.