A button fades in. A panel slides open. A notification retracts. Every animation you encounter on the web follows a curve — and that curve determines whether the motion feels mechanical or alive.
The cubic-bezier() function is the hidden engine behind nearly every CSS transition. Yet most developers stick with the default keywords — ease, ease-in, ease-out — without ever understanding what they actually control. The result: interfaces that move, but never feel.
This article will change your relationship with animation. We will break down the mathematics behind Bezier curves in plain terms, compare every standard easing preset, explore spring and bounce effects, and show how consistent easing across a product ecosystem creates a genuine motion identity. All with the help of our free, interactive Cubic Bezier Editor.
What Is a Cubic-Bezier Curve?
The Math, Simply
A cubic Bezier curve is defined by four points: a start point (0, 0), an end point (1, 1), and two intermediate control points — P1 and P2. These two control points are what you manipulate when you write cubic-bezier(x1, y1, x2, y2).
Picture a sheet of paper. The horizontal axis represents time (from 0% to 100% of the animation duration). The vertical axis represents progress (from 0% to 100% of the animated value). The curve drawn between the start and end points describes how progress evolves over time.
If the curve is a straight diagonal line, progress is constant — that is linear. If the curve rises slowly at first then accelerates, the motion starts gently and finishes fast — that is an ease-in. If it rises quickly then flattens out, the motion starts strong and decelerates toward the end — that is an ease-out.
The two control points P1 and P2 act like magnets that pull the curve in their direction, without the curve necessarily passing through them. This is what makes Bezier curves so expressive: four simple numbers produce a virtually infinite space of motion.
Why Four Numbers Are Enough
The CSS notation cubic-bezier(0.4, 0, 0.2, 1) encodes the coordinates of the two control points:
- x1 = 0.4, y1 = 0 — the first control point pulls the curve to the right at the start (slow launch)
- x2 = 0.2, y2 = 1 — the second control point pulls the curve upward at the end (fast arrival with deceleration)
X coordinates are always clamped between 0 and 1 (they represent time and cannot go backward). Y coordinates, however, can exceed these bounds — and that is exactly what enables overshoot and bounce effects.
The Five Standard Easings Dissected
Our Cubic Bezier Editor includes all native CSS presets in its Standard category. Here is what each one actually does.
linear — cubic-bezier(0, 0, 1, 1)
Constant progression, no acceleration or deceleration. The curve is a straight line. Motion advances at the same rate from start to finish.
When to use it: progress bars, loading indicators, continuous rotations (loader spinners). Anywhere motion needs to communicate measurable, steady progress.
When to avoid it: virtually every user interface transition. Linear motion looks robotic and artificial because no object in the real world moves at constant velocity.
ease — cubic-bezier(0.25, 0.1, 0.25, 1)
This is the CSS default — and it is not bad. It starts slowly, accelerates through the middle, then decelerates toward the end. The end-of-curve deceleration is pronounced (y2 = 1), which gives a natural sense of coming to rest.
When to use it: when you are not sure which easing to choose. It is a safe, versatile choice for hover transitions, opacity changes, and general micro-interactions.
ease-in — cubic-bezier(0.42, 0, 1, 1)
The element starts slowly and accelerates through to the end. The curve is flat at the beginning and steep at the end.
When to use it: elements that are leaving the screen. A side panel closing, a notification disappearing, an element flying away. The slow start gives the user a moment to perceive the beginning of the motion, then the acceleration carries the element out of view.
Common trap: do not use it for elements that appear. An ease-in on an entrance creates a perception of lag — the user waits for the motion to "take off."
ease-out — cubic-bezier(0, 0, 0.58, 1)
The exact inverse: the element starts fast and decelerates to a stop. The curve is steep at the beginning and flat at the end.
When to use it: elements that are entering the screen. A modal appearing, a dropdown expanding, a toast sliding in. The fast entry captures attention immediately, and the deceleration creates a soft, natural landing.
This is the pattern we apply consistently across Guthly and WePlanify for entrance transitions — it communicates responsiveness and fluidity.
ease-in-out — cubic-bezier(0.42, 0, 0.58, 1)
Symmetrical: slow start, acceleration in the middle, deceleration at the end. The curve forms a gentle S shape.
When to use it: elements that remain on screen but change position or state. A carousel rotating, an accordion opening, a toggle switching. The symmetrical motion suits transitions where the element neither enters nor leaves the viewport.
Beyond the Standards: Material, Expressive and Dramatic Presets
The native CSS presets are a starting point, not a destination. The Cubic Bezier Editor offers four preset categories that cover a full spectrum of motion personalities.
Material Design
Google codified its easing curves in the Material Design Guidelines, and for good reason — they are optimized for touch-first interfaces:
- Standard
(0.4, 0, 0.2, 1)— an improved version of the CSSease, with more pronounced deceleration. Ideal as the default easing in any project. - Decelerate
(0, 0, 0.2, 1)— fast entry, long deceleration. Perfect for elements appearing. - Accelerate
(0.4, 0, 1, 1)— soft start, fast exit. For elements disappearing. - Sharp
(0.4, 0, 0.6, 1)— quick, decisive transition for changes that need to feel instantaneous.
Expressive: Spring and Overshoot Effects
This is where things get interesting. When Y coordinates exceed the 0-1 range, the curve overshoots its final destination before settling back. This creates effects that mimic real-world physics — springs, bounces, elasticity.
- Snappy
(0.22, 1, 0.36, 1)— slight overshoot early in the curve, producing a crisp, punchy feel. - Bouncy
(0.34, 1.56, 0.64, 1)— y1 at 1.56 means the element overshoots its final position before bouncing back. This is the easing for playful, delightful animations. - Elastic Out
(0.68, -0.55, 0.27, 1.55)— negative and above-1 Y values create motion that oscillates around its destination, like a spring. - Back In / Back Out — the element pulls back slightly before moving forward (Back In) or overshoots its target before settling (Back Out). These effects add anticipation to motion.
Caution: overshoot effects visually move the element beyond its final position. If space is constrained (an element inside a container with overflow: hidden), the overshoot will be clipped. Always test in the real context.
Dramatic: Exponential and Circular Curves
For transitions that need to create a strong visual impact:
- Expo In/Out — exponential acceleration/deceleration, far more pronounced than the standards. The contrast between slow and fast parts is striking.
- Circ In/Out — curve based on a circular arc, producing organic acceleration.
- Quint In/Out — fifth-degree polynomial acceleration, halfway between Expo and the standards.
Building a Motion Identity
Easing as a Brand Element
Color, typography, and spacing are recognized brand elements. Animation easing should be too.
When a user navigates between Guthly, WePlanify, GuthSearch, Dropee, and GutHub, the same easing curves across all products create an unconscious sense of familiarity. Panels slide the same way. Buttons respond with the same timing. View transitions follow the same rhythm. The user cannot articulate it, but they feel it — and that is what a motion identity is.
Defining Motion Tokens
The practical solution is to define a small set of shared easing tokens across all products:
:root {
--ease-default: cubic-bezier(0.4, 0, 0.2, 1);
--ease-enter: cubic-bezier(0, 0, 0.2, 1);
--ease-exit: cubic-bezier(0.4, 0, 1, 1);
--ease-expressive: cubic-bezier(0.34, 1.56, 0.64, 1);
}
Four tokens cover the vast majority of use cases. The Cubic Bezier Editor lets you design these curves visually, preview their behavior in real time, and copy the exact values to encode in your shared configuration.
When to Break the Rule
Shared tokens define the default behavior. But certain moments deserve special attention — a celebration after a successful action, a critical error that shakes a form field, an onboarding flow that guides the user. For these moments, an expressive easing (Bouncy, Elastic Out) creates intentional contrast with the standard motion, amplifying the moment rather than fragmenting the experience.
Practical Guide: Which Easing for Which Case
Element Entrances
Use ease-out or Decelerate. The fast entry captures attention, the deceleration settles the element naturally.
.modal-enter {
animation: slide-up 300ms cubic-bezier(0, 0, 0.2, 1) forwards;
}
Element Exits
Use ease-in or Accelerate. The slow start lets the user register the beginning of the motion, the acceleration carries the element out of view.
.modal-exit {
animation: slide-down 250ms cubic-bezier(0.4, 0, 1, 1) forwards;
}
State Transitions
Use ease-in-out or Material Standard. The symmetrical motion suits changes where the element remains visible but shifts properties.
.toggle {
transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
Playful Micro-Interactions
Use Bouncy or Back Out for positive feedback — task completion, add-to-cart, likes.
.success-check {
animation: scale-in 400ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
Attention and Errors
Use Elastic Out for error shakes and alerts. The oscillation draws the eye without being aggressive.
.error-shake {
animation: shake 500ms cubic-bezier(0.68, -0.55, 0.27, 1.55);
}
Duration and Easing: The Inseparable Duo
Easing does not work in isolation — it is inseparable from duration. An ease-out at 300ms produces a radically different motion than the same ease-out at 1000ms.
The Cubic Bezier Editor includes an adjustable duration control from 100ms to 3000ms for precisely this reason. Every curve modification is previewed in real time across three animation types: translation, scale, and progression — you see immediately how your easing behaves at your chosen duration.
General guidelines:
- 100-200ms for micro-interactions (hover, focus, toggle)
- 200-400ms for interface transitions (modals, dropdowns, slides)
- 400-800ms for expressive animations (onboarding, celebrations)
- Beyond 800ms, the user starts perceiving the delay as sluggishness
CSS and Tailwind: Dual Export
The tool generates both native CSS and Tailwind CSS simultaneously. The native CSS uses the transition-timing-function property:
transition-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
Tailwind uses arbitrary value syntax for custom easings:
<div class="transition-all duration-500 ease-[cubic-bezier(0.34,_1.56,_0.64,_1)]">
...
</div>
Underscores replace spaces in Tailwind syntax — the tool handles this conversion automatically. Copy, paste, done.
Comparing Presets Visually
One of the strengths of the Cubic Bezier Editor is its category-based navigation. Click Standard, Material, Expressive, or Dramatic to see miniature curve thumbnails side by side. Selecting a preset immediately loads the curve into the interactive editor and triggers the animation preview.
This rapid comparison workflow is essential. The differences between ease and Material Standard are subtle on paper — (0.25, 0.1, 0.25, 1) vs (0.4, 0, 0.2, 1) — but obvious in motion. The tool makes these nuances tangible.
Conclusion
Cubic-bezier curves are not an obscure technical detail — they are the language of motion on the web. Mastering the four numbers that define an easing curve means mastering how your interface communicates with its users.
Linear motion is mechanical. Ease-in suits exits. Ease-out suits entrances. Ease-in-out suits state transitions. And beyond these standards, a universe of expressive curves awaits exploration — spring effects, overshoot, elasticity — to give personality to every interaction.
The Cubic Bezier Editor turns these abstract concepts into concrete experimentation. Every control point is a drag-and-drop, every modification is visible instantly, every result is ready to copy into your CSS or Tailwind code. Design your curves, define your motion tokens, and give your interfaces the motion they deserve.