UI Animation Timing Demo

A CSS easing function (also called a timing function) defines the rate of change of an animation over time. It controls how an element accelerates or decelerates during a transition or animation. The most common easing functions are ease, ease-in, ease-out, ease-in-out, and linear. They can make UI animations feel more natural and polished by mimicking real-world physics.

cubic-bezier(x1, y1, x2, y2) is a powerful CSS function that lets you define custom easing curves. It uses a cubic Bézier curve with four control points — the first is always (0,0) and the last is always (1,1). The two middle control points (x1,y1) and (x2,y2) shape the curve. The x-axis represents time (0 to 1), and the y-axis represents animation progress. Values of y outside the 0–1 range create overshoot effects like "back" or "elastic" easings.

Ease-in starts slowly and accelerates toward the end — ideal for elements exiting the screen. Ease-out starts quickly and decelerates at the end — perfect for elements entering the screen, as it mimics natural deceleration. Ease-in-out combines both: slow start, fast middle, slow end — great for UI elements that move within the viewport. Choosing the right one significantly improves perceived performance and user experience.

For transitions: transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
For animations: animation: slideIn 0.5s ease-out;
You can use CSS keywords (ease, linear, etc.) or define custom curves with cubic-bezier(). The animation-timing-function and transition-timing-function properties accept these values. Always test on real devices, as complex curves may perform differently across browsers.

The most widely-used presets include: ease-out for enter animations, ease-in for exit animations, ease-in-out for looping or in-viewport movements, and ease-out-back (cubic-bezier(0.34, 1.56, 0.64, 1)) for delightful overshoot effects. Material Design recommends using decelerated easing (ease-out) for most UI elements. Libraries like GSAP and Framer Motion also offer spring and bounce presets for more expressive motion.

Pure CSS cubic-bezier() cannot perfectly replicate bounce or elastic effects because a single cubic curve doesn't have enough inflection points. However, you can approximate them using @keyframes with multiple steps, or use JavaScript animation libraries (GSAP, anime.js, Framer Motion) that natively support these complex easing equations. The bounce and elastic presets in this tool use JavaScript-driven easing for accurate demonstration.