The transition-timing-function property in CSS defines how the speed of a transition changes over its duration. It controls the acceleration curve, making the transition feel more natural or mechanical depending on the chosen value.

Syntax Example

Preset Timing Functions

1
ease — starts slow, speeds up, then slows down at the end (default).
2
linear — maintains a constant speed from start to finish.
3
ease-in — starts slow and speeds up toward the end.
4
ease-out — starts fast and slows down at the end.
5
ease-in-out — starts and ends slow, with faster movement in the middle.

CSS Example

Each timing function affects how the element moves during the transition, influencing the visual feel of the animation.

For complete control, you can define a custom curve using cubic-bezier(x1, y1, x2, y2). This allows fine-tuning of the acceleration pattern beyond the preset options.

Example: Custom Bezier Curve

Key Takeaways

1
transition-timing-function controls the pacing of animations.
2
Common values include ease, linear, ease-in, ease-out, and ease-in-out.
3
Use cubic-bezier() for custom timing effects that match your design style.

Scenario Questions

0-2 years experience

1How would you make a button fade in over 0.5 seconds using a linear timing function?
2If you apply `transition: all 0.3s ease-in;` to an element and then change its width, what animation behavior will you see?
3What happens if you omit the timing function in a CSS transition?

2-5 years experience

1You notice that a modal's slide‑down animation feels too abrupt. How would you adjust the CSS to make it start slowly and then speed up?
2A colleague reports that a CSS animation works in Chrome but not in Safari, and the timing seems off. What could be causing the discrepancy and how would you debug it?
3When combining multiple transitions on the same element with different timing functions, how does the browser resolve them?

5-8 years experience

1Our design system defines a set of standard easing curves for all UI animations. How would you implement a reusable CSS utility or token system that ensures consistent timing functions across components, and what trade‑offs would you consider?
2We need to animate a large list of items with staggered delays. How would you choose timing functions and implement them to avoid jank and keep frame rates high?
3Explain how using custom cubic‑bezier timing functions could impact performance on low‑end devices, and how you would test or mitigate any issues.

8+ years experience

1Our legacy web app mixes hard‑coded `ease` values and JavaScript‑driven animations. We're planning a migration to a unified CSS‑only animation framework. What architectural considerations and migration strategy would you propose to standardize timing functions while minimizing risk?
2When building a cross‑platform design system used by web, iOS, and Android teams, how do you ensure the visual feel of easing curves matches across platforms, and what process would you set up to maintain consistency over time?
3If a performance team flags that certain CSS transitions cause layout thrashing due to timing function choices, how would you work with them to identify root causes and refactor the animation strategy at the system level?

Follow-up Questions

Can you give an example where you’d prefer ease-in over linear?
How would you test that your chosen timing function works consistently across browsers?
What trade‑offs might you consider when defining a custom cubic‑bezier curve?

Sharethis question

Share via WhatsApp, X, Facebook, LinkedIn or copy link. Open Graph preview enabled.