Animate a hover effect smoothly. Which properties are cheap to animate and which cause jank?
Whether you know transform/opacity are compositor-friendly while width/top force layout.
A transition interpolates a property between its old and new value over time: transition: <property> <duration> <timing-function> <delay>. It fires whenever the property changes (on :hover, a class toggle, etc.). transform applies a visual change — translate(), scale(), rotate(), skew() — WITHOUT affecting layout: the element's box in the flow is unchanged, so neighbours don't move. The performance point interviewers want: animate ONLY transform and opacity for smooth 60fps. Those two can be handled by the compositor on the GPU and skip layout and paint. Animating width, height, top, left, or margin forces the browser to recompute geometry (reflow) and repaint every frame — the usual source of jank. So to move something, use transform: translateX() instead of animating left; to resize, use scale() instead of width. will-change: transform can hint the browser to promote an element to its own layer ahead of time (use sparingly — each layer costs memory). Respect prefers-reduced-motion and disable or soften animation for users who request it. timing functions (ease, ease-in-out, cubic-bezier, steps) shape the acceleration curve.
Hover/press feedback, entrance animations, and reordering — reach for transform+opacity to keep it smooth.