ToolHive

CSS Transition Timing Tool

Visualize and preview your animation curves in real-time.

cubic bezier generatorcss easinganimation curvetransition tool

Interactive Generator

Point 1 (x1, y1)0.42, 0.00
X1
Y1
Point 2 (x2, y2)0.58, 1.00
X2
Y2
transition-timing-function: cubic-bezier(0.42, 0.00, 0.58, 1.00);

X: 0 → 1 | Y: -0.5 → 1.5

Intro

Standard easings like 'ease-in' are often too generic.

Custom cubic-bezier curves give your animations a signature feel and professional polish.

How to use

  1. Drag Handles
    Modify the curve by dragging the two control points.
  2. Preview Animation
    Watch a live demo of how the curve affects motion.
  3. Copy Function
    Export the cubic-bezier() string for your CSS.

Examples

Bouncy Entrance
A curve that creates a subtle bounce effect.
Input
P1(0.68, -0.6), P2(0.32, 1.6)
Output
cubic-bezier(0.68, -0.55, 0.27, 1.55)
Bounce easing
A custom easing with overshoot for bounce-like animations.
Input
cubic-bezier(0.68, -0.55, 0.27, 1.55)
Output
transition: transform 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55);

FAQ

What is a cubic-bezier curve?

A cubic-bezier curve defines the acceleration pattern of a CSS transition or animation. It uses four control points to create smooth, custom easing functions beyond the standard keywords.

How is cubic-bezier used in CSS?

In CSS, use it with transition-timing-function or animation-timing-function: cubic-bezier(x1, y1, x2, y2). The x values (0-1) represent time; y values can exceed 1 for bounce effects.

What are common easing presets?

Common presets include ease (0.25, 0.1, 0.25, 1), ease-in (0.42, 0, 1, 1), ease-out (0, 0, 0.58, 1), and ease-in-out (0.42, 0, 0.58, 1). Custom curves offer more precise control.

Related tools

Related guides

  • No related guides in the current seed set.