Question 1

transition vs animation — when each?

Accepted Answer

transitions interpolate property changes; animations use keyframes for sequenced/looping motion. Transitions for UI state; keyframes for loader/entrance choreography.

Question 2

Which properties are 'cheap' to animate?

Accepted Answer

Prefer transform and opacity (compositor-friendly); avoid layout-thrashing top/left/width. will-change sparingly. Measure jank on low-end devices.

Question 3

Explain animation-fill-mode.

Accepted Answer

Controls values before/after execution (none, forwards, backwards, both). forwards keeps final keyframe styles. Without it, elements may snap back.

Question 4

How do you respect prefers-reduced-motion?

Accepted Answer

Wrap motion in @media (prefers-reduced-motion: no-preference) or reduce to instant opacity. Essential info must not rely on motion alone. Provide pause for long animations.

Question 5

easing functions — why not always linear?

Accepted Answer

Perceived realism and UI polish; ease-out for exits, ease-in-out for moves. Custom cubic-bezier for brand motion. Overshoot carefully for restraint.

Question 6

How do you debug a transition that doesn't run?

Accepted Answer

Check if property is animatable, values comparable, specificity, display:none toggles, reduced motion. display can't interpolate; use opacity/visibility patterns or @starting-style.

Question 7

What is @keyframes composition with multiple animations?

Accepted Answer

Multiple animations on one element via comma-separated lists; watch conflicting properties. animation shorthand order matters. Name collisions across bundles.

Question 8

Scroll-driven animations — concept?

Accepted Answer

Tie animation progress to scroll timelines instead of time. Powerful for storytelling; still honor reduced motion and performance budgets.

Question 9

GPU layers and will-change pitfalls?

Accepted Answer

will-change can promote layers but wastes memory if overused. Add only around interaction, remove after. Don't will-change: everything.

Question 10

Design motion guidelines for a product.

Accepted Answer

Durations scale, easing tokens, reduced-motion policy, when motion is allowed. Codify in DS. Avoid novelty animations that delay task completion.

Question 11

How do enter/exit animations work with display:none?

Accepted Answer

Historically hard; modern approaches include @starting-style, WAAPI, or keep in DOM briefly. Libraries often manage mount/unmount timing. Accessibility: don't delay focus too long.

Question 12

FLIP technique at a high level?

Accepted Answer

First/Last/Invert/Play — animate transforms to simulate layout changes cheaply. Useful for shared-element-like rearrangements without animating layout props.

Animations CSS Interview Questions

Other CSS interview topics