Create a staggered list fade-in using only CSS

What's really being asked

This question evaluates your understanding of CSS animation sequencing, selector efficiency, and performance-conscious rendering. The interviewer wants to see if you can coordinate multiple elements without JavaScript, use declarative timing controls, and respect accessibility and compositor constraints.

The full answer

First, define a reusable @keyframes rule such as fadeIn that animates opacity from 0 to 1 and optionally a subtle translateY for lift. Second, apply the animation to the list items with a base duration and set opacity to 0 initially so items are invisible before the animation runs. Third, stagger the start times. The scalable approach uses an inline custom property like --index on each item and a CSS calc expression for animation-delay, for example calc(var(--index) * 100ms). An acceptable fallback is :nth-child(n) with increasing delay values. Fourth, set animation-fill-mode to forwards so each item retains its visible state after the animation completes rather than snapping back to opacity 0. Fifth, keep the animation compositor-friendly by animating only opacity and transform, avoiding layout-triggering properties like height, width, or margin. Sixth, wrap the animation rules in a prefers-reduced-motion media query to disable or simplify motion for users who need it.

The mistakes people make

Proposing JavaScript loops or setTimeout immediately fails the only CSS constraint. Using transition instead of animation is a weaker answer because transitions require a state change trigger and are harder to sequence declaratively. Hardcoding a separate class for every list item to set its delay is unmaintainable. Forgetting animation-fill-mode forwards causes items to vanish after fading in. Animating properties that force layout or paint recalculations, such as top or margin, signals poor performance awareness.

What usually comes next

How would you handle an unknown number of items generated dynamically? The answer is to render an inline style with --index on each DOM node and let CSS calc derive the delay. What if the list is very long? You might cap the maximum delay or use a logarithmic stagger. How do you keep this accessible? You respect prefers-reduced-motion by setting animation-duration to 0s or removing the animation entirely. What about performance at scale? The rendering engine can skip frames for offscreen tabs, but animating only compositor properties keeps the main thread free.

A concrete example

For a list of five items, define @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }. Then set li { opacity: 0; animation: fadeIn 300ms ease forwards; } and li:nth-child(1) { animation-delay: 0ms; } li:nth-child(2) { animation-delay: 100ms; } through the fifth. Alternatively, set style="--index: 0" on each li in markup and use li { animation-delay: calc(var(--index) * 100ms); }.