Easing Functions: ease linear cubic-bezier

An easing function controls the speed curve of a transition or animation — how fast it accelerates or decelerates over its duration.

linear maintains constant speed throughout the transition. Useful for loading bars and progress indicators where steady motion is expected.

ease starts fast, then slows down near the end. This is the default and feels natural for most UI transitions.

ease-in starts slowly and accelerates. Good for elements that are leaving the screen (exit animations).

ease-out starts fast and decelerates. Great for elements entering the screen — they arrive with energy and settle smoothly.

ease-in-out starts and ends slowly, with faster motion in the middle. Best for looping or back-and-forth animations.

Defines a custom cubic Bézier curve with four control points. Enables spring-like and custom easing curves.

The four values define two control points: cubic-bezier(x1, y1, x2, y2). Values above 1 on y axis create overshoot (spring) effects. Use tools like easings.net to visualize curves.

steps(n, direction) divides the animation into n discrete equal steps. Perfect for sprite animations and typewriter effects.

The second argument controls where the step occurs:

• jump-start: first step at time 0
• jump-end: last step at end time (default)
• jump-both: steps at both start and end
• jump-none: no step at either end

The new linear() function allows defining arbitrary easing curves through multiple points — enabling spring and bounce effects in pure CSS without cubic-bezier limitations.

Easing functions control animation speed curves. Built-in options: linear, ease, ease-in, ease-out, ease-in-out. Custom curves use cubic-bezier(). Discrete steps use steps(). The new linear() function enables complex spring-like curves.