Animations and transitions

Transitions interpolate between property values on state change; animations run keyframes over time. Both should communicate state, stay responsive, and respect user preferences.

					.dialog {
  transition: opacity 200ms ease, transform 200ms ease;
}
.dialog[data-open="true"] {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .dialog { transition: none; }
}
				

Compositor-friendly properties (`transform`, `opacity`) usually skip layout. Animating `width`, `height`, `top`, or `margin` triggers layout and can jank.

On interviews: transition triggers, keyframe timing, reduced motion, and pipeline cost of layout animations.

Common pitfalls: motion without purpose; layout-heavy animations on large lists; no reduced-motion fallback.

Checklist:

• Animate meaningful state changes.
• Respect prefers-reduced-motion.
• Prefer transform and opacity.
• Profile before optimizing keyframes.