What do the four parameters in cubic-bezier(x1, y1, x2, y2) represent?

The parameters x1 and y1 define the coordinates of the first tangent control point P1 (governing initial acceleration), while x2 and y2 define the second control point P2 (governing final deceleration). The X coordinates must remain between 0.0 and 1.0.

Can cubic-bezier Y-coordinates exceed 1.0 or fall below 0.0?

Yes! Setting Y values greater than 1.0 creates an overshoot elastic spring effect where the animated element temporarily exceeds its target destination before settling. Setting Y below 0.0 creates an anticipation pull-back effect.

Why do custom curves feel snappier than default CSS ease-in-out?

Standard ease-in-out accelerates and decelerates symmetrically. Custom curves (like cubic-bezier(0.2, 0, 0, 1)) allow immediate 0ms acceleration upon user input, eliminating perceived click-to-reaction latency.

How do I add a custom cubic-bezier curve to Tailwind CSS?

Extend the transitionTimingFunction object in your tailwind.config.js file (e.g. snappy: "cubic-bezier(0.16, 1, 0.3, 1)"), and apply it with the utility class ease-snappy.

How should I accommodate users with vestibular motion sensitivities?

Always include CSS @media (prefers-reduced-motion: reduce) overrides that set animation and transition durations to 0.01ms, ensuring essential transitions remain accessible and non-disruptive.

CSS & Design New

CSS Cubic-Bezier & Easing Curve Animator

Craft ultra-smooth CSS transition timing functions and cubic-bezier easing curves visually with interactive dual-handle curve editors, physics motion previews, and CSS/Tailwind export.

Interactive 2D Bézier curve graph with draggable P1(x1, y1) and P2(x2, y2) tangent control points

Real-time physics motion simulator: compare custom curves side-by-side against standard linear, ease, ease-in-out, and spring bounces

Preset library featuring Material Design 3, iOS Spring Curves, Natural Elastic, and Dramatic Ease Curves

Allows overshoot easing with y-coordinates exceeding 0.0 to 1.0 boundary range for playful spring rebound effects

Generates pure CSS transition-timing-function, @keyframes properties, and custom Tailwind CSS config extensions

The Mathematics of Motion: Mastering Cubic Bézier Easing for Natural UI Animations

In-depth specifications, architectural mechanics, real-world code implementations, and industry best practices.

The Physics and Mathematics of Bézier Curves in CSS

The CSS Transitions Level 1 specification parameterizes motion acceleration over time using third-order parametric Bézier curves. A cubic Bézier curve is defined by four coordinate points in a 2D unit plane: P0(0, 0), P1(x1, y1), P2(x2, y2), and P3(1, 1). The horizontal axis (X) represents normalized time from 0.0 to 1.0 (0% to 100% duration), and the vertical axis (Y) represents animation progression or displacement. The function is declared in CSS as cubic-bezier(x1, y1, x2, y2).

Implementation Example

/* Parametric Cubic Bézier Formula:
   B(t) = (1-t)³P0 + 3(1-t)²tP1 + 3(1-t)t²P2 + t³P3  for t ∈ [0, 1] */

.smooth-modal {
  transition-property: transform, opacity;
  transition-duration: 350ms;
  transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1); /* Custom Apple Ease-Out */
}

Comparing Built-in Easing vs Custom Fast-Out Slow-In Curves

• Standard CSS keyword easing functions (linear, ease, ease-in, ease-out, ease-in-out) are static and often feel mechanical or unresponsive:
• linear (0, 0, 1, 1): Constant speed with zero acceleration; feels robotic for UI interfaces.
• ease (0.25, 0.1, 0.25, 1): The default CSS curve; has a slow start that introduces perceived latency on user click interactions.
• Custom Fast-Out Slow-In (0.05, 0.7, 0.1, 1.0): Reacts with instantaneous 0ms acceleration upon user input and spends 80% of its duration gracefully settling. This curve mimics physical inertia and is the hallmark of premium iOS and Material Design 3 interfaces.

Implementation Example

/* Comparison: Default vs Modern Fast-Out Slow-In */
.default-slow {
  transition-timing-function: ease; /* Sluggish initial reaction */
}

.snappy-fast-out {
  transition-timing-function: cubic-bezier(0.2, 0.0, 0.0, 1.0); /* Instantaneous response */
}

Step-by-Step Guide to Crafting Custom Micro-Interactions

• Design custom easing curves with immediate visual verification:
• Step 1: Drag control handle P1 (purple) to establish initial acceleration speed.
• Step 2: Drag control handle P2 (pink) to determine deceleration and settling physics.
• Step 3: For elastic overshoot and bounce effects, drag handle P1 or P2 above Y=1.0 (e.g. Y=1.4) or below Y=0.0 (anticipation).
• Step 4: Click the "Play Motion Simulation" button to test the curve across linear translation, scaling, opacity, and rotation.
• Step 5: Copy the generated CSS declaration or Tailwind configuration snippet.

Implementation Example

/* Playful Elastic Spring Overshoot */
.bounce-badge {
  transition: transform 500ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.bounce-badge:hover {
  transform: scale(1.15); /* Reaches ~1.21 during flight before settling at 1.15 */
}

Implementing Bézier Transitions in CSS, Tailwind, and Framer Motion

Custom easing curves can be exported seamlessly into modern web styling workflows.

Implementation Example

// 1. Tailwind CSS Configuration (tailwind.config.js)
module.exports = {
  theme: {
    extend: {
      transitionTimingFunction: {
        'spring-out': 'cubic-bezier(0.175, 0.885, 0.32, 1.275)',
        'snappy': 'cubic-bezier(0.2, 0, 0, 1)',
      }
    }
  }
};

// 2. React Framer Motion Usage
import { motion } from 'framer-motion';

export const Card = () => (
  <motion.div
    initial={{ opacity: 0, y: 20 }}
    animate={{ opacity: 1, y: 0 }}
    transition={{ duration: 0.4, ease: [0.16, 1, 0.3, 1] }}
  />
);

Performance Optimization & Accessibility Standards (prefers-reduced-motion)

• To maintain buttery smooth 60fps and 120fps animations:
• Animate Transform and Opacity Exclusively: These properties bypass layout reflows and paint recalculations, running entirely on the GPU compositor thread.
• Respect Vestibular Motion Sensitivity: Users experiencing vertigo or motion sensitivity can configure their operating systems to reduce motion. Always wrap non-essential transitions in @media (prefers-reduced-motion: reduce).

Implementation Example

/* Accessible Motion Media Query */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

Knowledge Base & Clarifications