In this article
What Are Cubic Bezier Curves?
A cubic Bezier curve is a mathematical function used in CSS to define the timing of animations and transitions. Written as cubic-bezier(x1, y1, x2, y2), it describes how an animation progresses from start to finish by mapping time to progress along a smooth curve defined by four control points.
In CSS, the cubic-bezier() function controls the easing of transition-timing-function and animation-timing-function properties. Instead of linear motion, it allows you to create natural-feeling accelerations and decelerations that mimic real-world physics, making UI animations feel polished and intentional.
Understanding the Four Control Values
The cubic-bezier() function takes four values that define two control points on the curve. These control points shape how the animation accelerates and decelerates.
- X1 (0-1) — the horizontal position of the first control point, determining when the initial acceleration phase ends
- Y1 (any value) — the vertical position of the first control point, controlling how fast the animation starts. Values above 1 create an overshoot effect
- X2 (0-1) — the horizontal position of the second control point, determining when the deceleration phase begins
- Y2 (any value) — the vertical position of the second control point, controlling how the animation finishes. Values above 1 create a bouncing overshoot
Try it free — no signup required
Create a Cubic Bezier Curve →Common Easing Presets and When to Use Them
CSS provides several built-in easing keywords that correspond to specific cubic-bezier values. Understanding these presets helps you choose the right feel for your animations.
- ease (0.25, 0.1, 0.25, 1.0) — the CSS default, starts quickly then gently decelerates. Good for most general-purpose transitions
- ease-in (0.42, 0, 1.0, 1.0) — starts slowly and accelerates. Best for elements leaving the screen or fading out
- ease-out (0, 0, 0.58, 1.0) — starts fast and decelerates. Ideal for elements entering the screen or appearing
- ease-in-out (0.42, 0, 0.58, 1.0) — slow start and slow end with faster middle. Suited for looping animations or elements that stay on screen
- linear (0, 0, 1, 1) — constant speed from start to finish. Use for progress bars, loading spinners, or color transitions where uniform speed feels natural
Frequently Asked Questions
Do all browsers support cubic-bezier()?
Yes. The cubic-bezier() function has been supported in all major browsers since IE 10 (2012). It is part of the CSS Transitions and CSS Animations specifications, which have full support in Chrome, Firefox, Safari, Edge, and all modern mobile browsers.
Can I create spring or bounce animations with cubic-bezier()?
Cubic Bezier curves can approximate simple bounce effects by using Y values greater than 1 (overshoot). For example, cubic-bezier(0.34, 1.56, 0.64, 1) creates a slight overshoot. However, true spring physics with multiple bounces require CSS spring() (not yet widely supported) or JavaScript animation libraries like GSAP or Framer Motion.
What is the difference between CSS transitions and CSS animations?
CSS transitions animate between two states when a property changes (e.g., on hover). CSS animations use keyframes to define multi-step sequences that can loop and run independently. Both use the same timing functions, including cubic-bezier(), to control the easing between states or keyframes.