Question 1

What is an easing in CSS animation?

Accepted Answer

An easing (the timing-function) describes how a value changes over the duration of an animation instead of moving at a constant speed. Linear is the same speed the whole time, which feels mechanical. Real motion accelerates and decelerates, so easings like ease-out, ease-in-out and easeOutBack make UI feel natural. In CSS every easing is ultimately a cubic-bezier() curve (or a steps() function); ease-out, for example, is just a named cubic-bezier curve.

Question 2

When should I use ease-out versus ease-in?

Accepted Answer

Use ease-out (fast start, slow finish) for things entering or responding to the user — menus opening, items appearing, a card you tapped — because it feels responsive and settles gently. Use ease-in (slow start, fast finish) for things leaving the screen, since accelerating away reads as exiting. ease-in-out suits elements that move from one on-screen place to another. As a rule, most interface motion looks best with ease-out.

Question 3

What is overshoot (easeOutBack) good for?

Accepted Answer

easeOutBack overshoots the target slightly and then settles back, giving a playful spring or pop. It is great for confirmation moments — a button press, a like animation, a toast popping in, a badge appearing — where a tiny bit of bounce adds personality. Keep the overshoot subtle and the duration short, and avoid it on large or frequently repeated elements where it can feel gimmicky.

Question 4

Can a single cubic-bezier do bounce or elastic motion?

Accepted Answer

Not exactly. A cubic-bezier() curve is monotonic in time and can only overshoot once, so it can approximate a springy settle (like easeOutBack) but it cannot reproduce a multi-bounce ball or a true elastic wobble. For those you need a multi-step @keyframes animation or a JavaScript/Web Animations spring. This tool marks elastic and bounce as approximations and gives you the closest single cubic-bezier; for a real multi-bounce, build it as @keyframes.

Question 5

How do I respect prefers-reduced-motion?

Accepted Answer

Some users have a system setting that asks for reduced motion. Wrap non-essential animation in a media query and turn it off or shorten it: @media (prefers-reduced-motion: reduce) { * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } }, or provide a calmer fade instead of a large move. Keep durations short (roughly 100–300ms) for everyday UI so motion stays helpful rather than distracting.

Easing & MotionPreset Generator

Easing & Motion
Preset Generator