CSS Cubic-Bezier: The Art of Animation Pacing
A cubic-bezier function defines an animation's speed curve, controlling its acceleration and deceleration. It's used in CSS to make UI motion feel natural. The footgun is mistaking presets: ease accelerates more sharply than the symmetrical ease-in-out.
Why it exists
Default linear animations feel robotic and unnatural because real-world objects don't start and stop moving at a constant speed. Easing functions, especially cubic-bezier, were introduced to let developers model physical acceleration and deceleration, making UI motion feel more intuitive and polished.
The mental model
Think of an animation's progress as a journey from 0% to 100% over a set duration. A cubic-bezier function is a graph plotting time (x-axis) against progress (y-axis). A straight line (linear) means constant speed. A curved line means the speed is changing. The steepness of the curve at any point represents the animation's velocity at that moment.
How it works
A cubic-bezier curve is defined by a start point (0,0), an end point (1,1), and two control points (P1 and P2) whose coordinates you specify. The CSS function cubic-bezier(P1x, P1y, P2x, P2y) takes the coordinates of these two control points to shape the curve. The browser then calculates the animation's progress at each frame based on this curve. CSS provides keywords like ease, ease-in, and ease-out which are just presets for common cubic-bezier values. For instance, ease-in is an alias for cubic-bezier(0.42, 0, 1, 1), creating a slow start that speeds up towards the end.
When to use it
Use cubic-bezier functions for almost any property change you animate in CSS. It is essential for creating high-quality user interfaces where motion guides the user's eye and provides feedback. Apply it to hover effects, modal pop-ups, and sliding menus. The default ease preset is a good starting point for many general-purpose animations.
When not to use it
For animations that must occur in discrete, even intervals, like a sprite sheet or a ticking clock, the steps() timing function is more appropriate. For purely mechanical, constant-speed movements where physical realism is not a goal, the simpler linear function is sufficient.
One canonical example
The ease-out curve, cubic-bezier(0, 0, 0.58, 1), is perfect for an element entering the screen. The animation starts fast, grabbing attention, and then gently slows to a halt, allowing the user to comfortably process its final state. This is a common pattern for dropdown menus or tooltips. Using ease-in for the same task would feel sluggish as it slowly ramps up.
Interview question
For an element entering the screen, why is "ease-out" typically a better choice than "ease-in"?
- a."ease-out" begins quickly and then slows down, guiding attention and smoothly settling the element.Correct
- b."ease-out" allows the element to start slowly, giving users time to notice its arrival.
- c."ease-out" ensures the animation has a consistent, smooth velocity from start to finish.
- d."ease-out" provides a balanced acceleration and deceleration, making the overall motion feel natural.
Why? this is the answer
The card explains that "ease-out" starts fast and then gently slows to a halt, which is ideal for elements entering the screen to grab attention and allow comfortable processing of the final state. Conversely, "ease-in" would feel sluggish as it starts slow and speeds up, which is not suitable for an element appearing on screen.
Just read this? Test yourself on what you have been reading.
Read the original → developer.mozilla.org
You just looked this up. Could you explain it out loud?
That is the part interviews actually test. Tezvyn takes questions like this one and gives you what the interviewer is really checking, the answer that lands, and the mistake that ends the conversation, in the four minutes before your next meeting.
The iPhone app is on the way
We are building it. Until it lands, nothing here is held back from you: every interview card, your saved cards, streaks and the job board all work in Safari, plus hundreds of free practice quizzes of thirty questions each. Sign in and it all carries over to the app the day it arrives.
Want it as an icon? Tap Share at the bottom of Safari, then Add to Home Screen. It opens full screen and the cards you have read stay available offline.
We are hiring for this. Open roles that interview on css — each one lists the topics its interview covers.
See open roles