Question 1

What is a CSS easing function?

Accepted Answer

An easing function (timing function) defines how an animated property changes speed over its duration. CSS uses keywords like ease, linear, ease-in-out, or custom cubic-bezier() and steps() functions inside the transition-timing-function and animation-timing-function properties.

Question 2

How does cubic-bezier() work?

Accepted Answer

cubic-bezier(x1, y1, x2, y2) defines a Bezier curve between the points (0,0) and (1,1). x1 and x2 must be in 0..1; y1 and y2 can go outside that range to create overshoot (back/bounce-like) effects. The control points pull the curve, and the curve's slope sets the instantaneous speed.

Question 3

What is the steps() function?

Accepted Answer

steps(n, jump-term) splits the duration into n equal intervals, producing a stair-step animation instead of smooth motion. jump terms are jump-start (start), jump-end (end), jump-none and jump-both. It is used for sprite-sheet animations and instant-state UI.

Question 4

Can I use these easing functions with transitions?

Accepted Answer

Yes. The generated value works in transition: all 0.4s , in transition-timing-function: , and in @keyframes animation-timing-function: . Copy the value and paste it where you currently use linear or ease.