Frequently Asked Questions
What is a CSS easing function?▼
A CSS easing function (also called a timing function) controls the rate of change during an animation or transition. Instead of moving at a constant speed (linear), easing functions let you create natural-feeling motion by accelerating, decelerating, or bouncing. CSS supports keyword values like ease, ease-in, ease-out, and ease-in-out, as well as the cubic-bezier() function for custom curves.
How does cubic-bezier work in CSS?▼
The cubic-bezier(x1, y1, x2, y2) function defines a bezier curve. The curve starts at (0,0) and ends at (1,1). The two control points (x1,y1) and (x2,y2) shape the curve. The x values must be between 0 and 1 (representing time), while y values can exceed this range for overshoot effects like bouncing.
What is the difference between ease, ease-in, ease-out, and ease-in-out?▼
ease (default) starts slightly slow, accelerates, then decelerates. ease-in starts slowly and accelerates, good for exit animations. ease-out starts fast and decelerates, ideal for entrance animations. ease-in-out starts and ends slowly with acceleration in the middle, creating smooth symmetrical motion. Each maps to a specific cubic-bezier value.