CSS Cubic-Bezier Transition Curve Builder
Interactive visual cubic-bezier easing curve designer and CSS transition code generator.
Curve Coordinate Canvas
Real-Time Animation Preview
Generated CSS & Framework Snippets
transition: all 1.2s cubic-bezier(0.25, 0.1, 0.25, 1);
.custom-animated-element {
transition: transform 1.2s cubic-bezier(0.25, 0.1, 0.25, 1);
}ease-[0.25,0.1,0.25,1]ease: [0.25, 0.1, 0.25, 1]The Mathematical Mechanics of CSS Cubic-Bezier Curves
In modern web interface engineering, CSS transitions and keyframe animations rely on third-order Bernstein polynomials known as cubic Bézier curves to interpolate numerical states across continuous time. A cubic Bézier curve is anchored by four points: P₀(0, 0), P₁(x₁, y₁), P₂(x₂, y₂), and P₃(1, 1). Because P₀ represents the animation start and P₃ marks 100% progress completion, authors only define the intermediate control handles P₁ and P₂.
Monotonic Time Axis
The horizontal X axis represents elapsed time from 0.0 to 1.0. Because time cannot flow backwards in physical rendering engines, P1x and P2x are strictly constrained to the range [0.0, 1.0].
Unbounded Progress Axis
The vertical Y axis dictates property progress (transform, opacity, color). Unlike the X axis, Y values can exceed 1.0 (overshooting the final target) or drop below 0.0 (anticipatory recoil).
Continuous 1st Derivative
The tangent vectors generated by P₁ and P₂ define instantaneous velocity. Smooth tangents prevent jarring rate-of-change spikes, eliminating optical stutter during interactive transitions.
Parametric Polynomial Formula
For any given normalized progression parameter t ∈ [0, 1], the curve coordinates (Bx(t), By(t)) are evaluated according to the explicit cubic polynomial equation:
CSS Easing Function Comparison & Timing Benchmarks
Selecting the correct easing function directly influences perceived interface responsiveness. Fast entrances reduce cognitive delay, while gentle exits allow users to track layout shifts naturally:
| CSS Timing Keyword | Cubic-Bezier Coords | Acceleration Profile | Recommended UI Application |
|---|---|---|---|
| ease | 0.25, 0.1, 0.25, 1.0 | Rapid acceleration, gentle deceleration | Default browser transition; general layout expansion |
| linear | 0.0, 0.0, 1.0, 1.0 | Constant velocity; zero acceleration | Infinite spinning loaders, background color fades, progress bars |
| ease-in | 0.42, 0.0, 1.0, 1.0 | Slow launch, abrupt high-velocity exit | Dismissing off-screen sheets, notification toast exits |
| ease-out | 0.0, 0.0, 0.58, 1.0 | High initial velocity, friction-damped stop | Dialog modals opening, drawer slide-ins, tooltips appearing |
| ease-in-out | 0.42, 0.0, 0.58, 1.0 | Symmetrical start and end dampening | Carousel horizontal sliding, accordion expand/collapse |
| overshoot (elastic) | 0.34, 1.56, 0.64, 1.0 | Spring pop past target with physical snapback | Gamified badge unlocks, floating action button triggers |
Micro-Interaction Architecture: 4 Rules for Fluid Animations
High-quality motion design separates mediocre web applications from polished software experiences. Apply these four core principles when calibrating custom transition curves:
Essential Motion Directives
- • Animate Exclusively Composited Properties: Restrict transitions to
transformandopacity. Modifyingwidth,height, ortopforces synchronous browser CPU reflows. - • Keep Durations Under 300ms for Direct Interactions: Hover states and button presses should complete within 150ms to 250ms to maintain instantaneous tactile feedback.
- • Asymmetric Enter/Exit Timing: Elements entering the screen should move faster using
ease-out(~200ms), while elements exiting should travel slower usingease-in(~150ms).
Pitfalls That Degrade Performance
- • Overusing Linear Easing on Positional Changes: Objects moving linearly appear robotic and unnatural because physical objects in the real world never start or stop with infinite acceleration.
- • Excessive Overshoot on Dense Layouts: Spring curves with Y > 1.5 risk clipping into neighboring text or triggering accidental horizontal scrollbars if the containing ancestor lacks
overflow: hidden. - • Ignoring prefers-reduced-motion: Always wrap expressive cubic-bezier animations in media queries honoring user accessibility settings to avoid inducing motion sickness.
Frequently Asked Questions (FAQ)
What is a cubic-bezier function in CSS transitions and animations?
A CSS cubic-bezier function defines a parametric smooth curve used to calculate time-to-progression interpolation during transitions and keyframe animations. It is governed by four numbers representing two control points (P1x, P1y, P2x, P2y) between the initial coordinate (0,0) and the terminal coordinate (1,1).
Why must the X coordinates of a cubic-bezier be strictly between 0 and 1?
The X axis on a transition curve represents normalized elapsed time. Because forward physical time cannot flow backwards or exceed 100% of the duration before completion, CSS specifications strictly mandate that P1x and P2x remain in the continuous range [0.0, 1.0].
How do overshoot and anticipation bounce animations work in CSS cubic-bezier?
While X coordinates are bound between 0 and 1, the Y coordinates (representing property progress or displacement) have no bounds in CSS. Setting a Y coordinate greater than 1.0 creates an elastic overshoot bounce past the end target, whereas setting a Y value below 0.0 produces anticipation rollback before advancing.
What is the difference between ease, ease-in-out, and linear?
Linear has a constant velocity slope (0.0, 0.0, 1.0, 1.0) with zero acceleration. Ease starts gently, accelerates rapidly mid-way, and slows down gracefully (0.25, 0.1, 0.25, 1.0). Ease-in-out symmetrically ramps up and decelerates, preventing jarring camera or movement stops on screen.
Does this tool support Web Animations API (WAAPI) and Framer Motion?
Yes. The generated cubic-bezier(x1, y1, x2, y2) tuple is universally compatible with standard CSS transitions, CSS @keyframes, the native browser Web Animations API (element.animate), Framer Motion easing arrays, Tailwind CSS transition timing configs, and GSAP CustomEase plugins.
Related & Complementary Utilities
Explore more privacy-first client-side web tools.
JSON to CSV & CSV to JSON Converter
Convert JSON to CSV and CSV to JSON instantly with custom delimiters, nested object flattening, real-time reactive conversion, dynamic size metrics tracking, and drag-and-drop file ingestion — 100% client-side.
HTML & CSS Minifier & Unminifier
Minify, unminify, compress, and beautify HTML markup and CSS stylesheets instantly with pure TypeScript tokenization engines — 100% client-side, zero external dependencies.
Screen Resolution & Aspect Ratio Calculator
Calculate display aspect ratios, custom dimension scaling, PPI density, and responsive CSS snippets.