cubic-bezier(.25, .1, .25, 1) What is a cubic-bezier easing function?
A cubic-bezier easing function is the mathematical curve that CSS uses to decide how an animation or transition unfolds over time. When you animate an element — sliding a panel, fading a modal, growing a button — the browser needs to know the value at every moment between the start and the end. A linear timing function moves at a constant speed, which usually feels robotic. An easing curve lets motion accelerate, decelerate, or even overshoot, which is what makes interfaces feel natural and alive.
The curve is a cubic Bézier curve, the same kind of curve used by vector drawing tools. It always starts at the point (0, 0) and ends at (1, 1). Two control points in between pull the curve into shape. The horizontal axis represents time (from 0% to 100% of the animation's duration) and the vertical axis represents the animation's progress (from its start value to its end value). The slope of the curve at any point is the instantaneous speed of the animation.
How CSS easing works: the four control values
In CSS you write an easing curve as cubic-bezier(x1, y1, x2, y2). Those four numbers are the coordinates of the two control points:
- x1, y1 — the first control point, which governs how the animation leaves its starting position. A low
y1relative tox1makes the animation start slowly (ease-in). - x2, y2 — the second control point, which governs how the animation arrives at its ending position. A high
y2that levels off makes the animation end slowly (ease-out).
The x values must stay between 0 and 1. Time cannot run backward, so the control points can never move left of the start or right of the end. The y values are unbounded: they can dip below 0 or rise above 1. When y1 is negative, the animation pulls back slightly before moving forward — an anticipation effect. When y2 exceeds 1, the animation shoots past its target and settles back — an overshoot or "back" effect. These are the curves that produce playful, bouncy motion.
The built-in CSS keywords
The standard CSS easing keywords are all just shorthands for specific cubic-bezier curves:
linear=cubic-bezier(0, 0, 1, 1)— constant speed.ease=cubic-bezier(0.25, 0.1, 0.25, 1)— the CSS default, a gentle ease-in-out.ease-in=cubic-bezier(0.42, 0, 1, 1)— starts slow, ends fast.ease-out=cubic-bezier(0, 0, 0.58, 1)— starts fast, ends slow.ease-in-out=cubic-bezier(0.42, 0, 0.58, 1)— slow at both ends.
Knowing these equivalences is handy when you want to start from a familiar feel and then tweak it. Most of the time a custom curve only differs from a keyword by a few hundredths.
How to use this editor
- Drag the two handles on the curve box. The filled handle is the first control point (P1) and the gray handle is the second (P2). Drag vertically past the top or bottom edge to create overshoot or anticipation.
- Watch the live preview on the right: a dot travels along a rail and a bar grows, both driven by your curve, alongside a linear reference so you can feel the difference.
- Type exact values into the x1, y1, x2, y2 fields if you need precision — the handles and curve stay in sync.
- Click a preset to jump to a common easing, then fine-tune from there.
- Hit Copy to grab the
cubic-bezier(…)string, ready to paste into your CSS. - Use Replay and the duration selector to re-trigger the preview at different speeds.
The full state of the editor lives in the URL (?c=x1,y1,x2,y2), so you can copy the address bar to share an exact curve with a teammate or bookmark it for later. Everything runs in your browser — nothing is uploaded.
Where to use it
Drop the value into any CSS that accepts a timing function: transition: transform 0.4s cubic-bezier(0.25, 0.1, 0.25, 1); or animation-timing-function: cubic-bezier(0.68, -0.55, 0.27, 1.55);. The same syntax works in the Web Animations API (element.animate) and in most JavaScript animation libraries, which accept the four numbers directly. Good easing is one of the cheapest ways to make a UI feel polished, and a well-chosen curve often matters more than the duration.
Frequently Asked Questions
What is a cubic-bezier easing function?
A cubic-bezier easing function is a CSS timing function defined by a cubic Bézier curve. It describes how an animated value progresses over time. The curve runs from (0,0) to (1,1), and two control points — written as cubic-bezier(x1, y1, x2, y2) — bend it to create acceleration, deceleration, or overshoot effects.
What do the four cubic-bezier values mean?
The four numbers are the x and y coordinates of the two control points: x1, y1 for the first handle near the start, and x2, y2 for the second handle near the end. The x axis represents time (clamped between 0 and 1), and the y axis represents the animation's progress. The y values can go below 0 or above 1 to create anticipation or overshoot.
What is the cubic-bezier value for ease-in-out?
CSS ease-in-out is equivalent to cubic-bezier(0.42, 0, 0.58, 1). Other built-in keywords are: ease = cubic-bezier(0.25, 0.1, 0.25, 1), ease-in = cubic-bezier(0.42, 0, 1, 1), ease-out = cubic-bezier(0, 0, 0.58, 1), and linear = cubic-bezier(0, 0, 1, 1).
Can cubic-bezier values be negative or greater than 1?
The y values (y1 and y2) can be any number, including negatives and values above 1 — this lets the animation overshoot its target or pull back before starting, creating bouncy or anticipatory motion. The x values (x1 and x2), however, must stay between 0 and 1, because time cannot move backward.
How do I use a cubic-bezier curve in CSS?
Paste the generated value into a transition or animation timing function, for example: transition: transform 0.4s cubic-bezier(0.25, 0.1, 0.25, 1); or animation-timing-function: cubic-bezier(0.68, -0.55, 0.27, 1.55);. The same syntax works anywhere CSS accepts an easing function.
What is the difference between cubic-bezier and steps()?
cubic-bezier() produces smooth, continuous motion by interpolating along a curve, while steps() jumps between a fixed number of discrete states with no in-between frames. Use cubic-bezier for fluid animation and steps() for sprite-sheet or typewriter-style effects.