CSS animations are one of the most powerful tools in a frontend developer's toolkit — and one of the most misunderstood. This guide covers everything from basic transitions to complex keyframe sequences.
Transitions vs Animations: When to Use Each
CSS transitions animate between two states triggered by an event (hover, focus, class change). CSS animations run automatically with keyframe-defined intermediate states. Use transitions for simple state changes like hover effects. Use animations for continuous motion like loaders, pulsing indicators, or autonomous UI movement.
The Animation Property Shorthand
The CSS animation shorthand takes 8 values: name, duration, timing-function, delay, iteration-count, direction, fill-mode, and play-state. Most developers only use the first three, but fill-mode and direction are critical for animations that need to hold their end state or alternate direction.
Always use transform and opacity for animations. These are GPU-composited properties and do not trigger layout reflow. Animating width, height, top, or left causes expensive layout recalculations on every frame.
Timing Functions Explained
ease (default) starts slow, speeds up, then slows down. ease-in starts slow and accelerates. ease-out starts fast and decelerates — the most natural-feeling for UI elements entering the screen. linear maintains constant speed — good for loading spinners and progress bars. cubic-bezier() lets you define completely custom timing curves.
Building a Loading Spinner from Scratch
The classic spinning ring uses border-top to create a partial border that rotates infinitely. The key insight is that a circular element with three transparent borders and one coloured border looks like an arc. Rotate it and you have a spinner.
Use the CSS Loader Generator to generate production-ready spinner CSS without writing it from scratch — useful for prototyping and matching specific design requirements quickly.
Performance Best Practices
Use will-change: transform on animated elements to hint to the browser that they should be promoted to their own compositor layer. Use animation-fill-mode: both to prevent jumpy starts and ends. For complex animations with many elements, consider requestAnimationFrame in JavaScript for more control.