Transitions & Keyframe Animations

CSS provides two distinct animation mechanisms: transitions and @keyframes animations. Understanding both, knowing when to use each, and being aware of performance implications are common interview topics.

CSS Transitions

Transitions animate a property change from one value to another. They require a trigger (such as :hover, :focus, or a class toggle) and only animate between two states. You define them with transition-property, transition-duration, transition-timing-function, and transition-delay — or the shorthand transition: property duration timing delay.

Transitions are ideal for simple state changes: hover effects, focus styles, expanding panels, and toggling visibility. They are declarative and require no JavaScript for the animation itself.

@keyframes Animations

@keyframes let you define multi-step animation sequences with percentage-based waypoints (or from/to for two-step). You apply them with the animation shorthand, which accepts name, duration, timing function, delay, iteration count, direction, fill mode, and play state.

Key properties include animation-iteration-count (use infinite for looping), animation-direction (alternate for ping-pong effects), and animation-fill-mode (forwards keeps the final state, backwards applies the first keyframe during delay). Animations can run without a trigger and support complex multi-property choreography.

Performance Considerations

The browser rendering pipeline has four stages: Style, Layout, Paint, and Composite. Animating properties that trigger layout (like width, height, top, left, margin, or padding) forces the browser to recalculate geometry for the element and potentially its siblings. Animating properties that trigger paint (like background-color or box-shadow) is cheaper but still not ideal.

Only transform and opacity can be composited on the GPU without triggering layout or paint. This means animations using translateX() instead of left, or scale() instead of width, run at 60fps even on low-powered devices. The will-change property can hint the browser to promote an element to its own compositor layer, but overuse wastes memory.

Timing Functions

The cubic-bezier() function gives precise control over easing curves. Common presets are ease (default), ease-in, ease-out, ease-in-out, and linear. The steps() function creates frame-by-frame animations, useful for sprite sheets or typewriter effects.

When to Use Which

Use transitions for simple A-to-B state changes triggered by user interaction. Use @keyframes for complex multi-step animations, looping effects, animations that run on page load, or when you need directional control. In practice, most UI interactions use transitions, while loading spinners, skeleton screens, and attention-grabbing effects use keyframe animations.

The Web Animations API

For programmatic control, the Web Animations API (element.animate()) provides JavaScript access to the same engine that powers CSS animations. It returns an Animation object with methods like play(), pause(), reverse(), and finish(), plus a finished promise for sequencing.