CSS Animations Guide

CSS has two animation systems: Transitions (animate between two states on a trigger like hover) and @keyframes animations (multi-step animations that run automatically). Transitions are simpler: transition: property duration easing. Keyframes are more powerful: define multiple steps with @keyframes, then apply with animation: name duration easing iteration. Performance rule: only animate transform and opacity — these properties are GPU-accelerated. Animating width, height, margin, or padding causes expensive layout recalculations. Use will-change: transform to hint the browser about upcoming animations.