A progress indicator needs to visibly pass through four distinct color stages as a task advances, so why would an animation fit this better than a transition?

Three loading dots share the same 3-second pulsing animation, but a designer wants them to never all look identical at the same instant, so what technique addresses that without changing the keyframes themselves?

Two developers each write an animation that moves an element 300px to the right — one animates left from 0 to 300px, the other animates transform: translateX() from 0 to 300px — so which one is the better rendering-performance choice, and why?

A performance engineer is explaining to a junior developer why CSS transitions succeeded where JavaScript-driven animation struggled.

A developer builds a purely visual CSS spinner div with no role or aria-label attributes at all, so what problem does that create for a screen reader user?

A developer writes animation: pulse 2s ease-in 1s 3 alternate both paused; and wants to know which sub-property the value 3 is setting, so using the shorthand’s fixed positional order, which sub-property does it map to?

A slide-in notification has both a delay before it starts and needs to stay in its final position once it finishes, so which single fill-mode value covers both requirements at once?

A developer applies will-change: transform to a button inside its :hover rule, intending to prepare it for an animation that only plays on click, so why is that timing a poor fit?

An animation repeatedly changes an element’s left and width values every frame to create a resizing, sliding effect, so what does that force the browser to redo on every single frame?

A blockquote component uses ::before with content: “\201C” to draw a large decorative opening quotation mark, so why is a Unicode escape used instead of just typing a literal quote character into the content string?