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.
The CSS Animation Event System
CSS animations fire three JavaScript events that allow you to synchronise other code with animation state: animationstart fires when the animation begins. animationiteration fires at the end of each cycle (except the last). animationend fires when the animation completes. These events include the animationName property so you can distinguish between multiple animations running on the same element.
A practical use: fade in a loading spinner when data starts fetching, and fade it out the moment the fetch completes, with a smooth transition rather than an abrupt disappearance. Listen for animationend to know exactly when to show or hide content without guessing timing or using setTimeout.
GPU Acceleration: Why Transform and Opacity Are Special
Modern browsers use a compositing architecture where the page is split into layers, each rendered independently and combined by the GPU. Animating transform (translate, rotate, scale) and opacity does not trigger layout recalculation or paint operations — the browser simply moves or fades an already-rendered layer. This is why these animations run at 60fps even on complex pages.
Animating width, height, top, left, margin, or padding forces the browser to recalculate the layout of potentially the entire page on every frame — a process called reflow. At 60fps this happens 60 times per second. Each reflow may also trigger a repaint of affected areas. The performance cost on complex pages can make the animation visibly stutter. Always use transform: translateX() instead of left:, and transform: scaleX() instead of animating width.
All CSS loaders generated by the CSS Loader Generator exclusively use transform and opacity animations, ensuring smooth 60fps performance without layout reflow.
CSS Custom Properties in Animations
CSS custom properties (variables) can be used to create highly configurable animations. Instead of hardcoding values inside keyframes, reference custom properties that can be changed per element. This pattern is particularly powerful for animation libraries and design systems where multiple elements use the same animation but with different speeds or distances.
One important limitation: CSS custom properties cannot currently be animated directly with @keyframes in most browsers — you cannot interpolate between two custom property values. The workaround is to animate a numerical property and multiply it by a custom property using calc(), or to use the Houdini CSS Properties and Values API (supported in Chromium-based browsers) which allows registering typed custom properties that can be animated.
Respecting User Motion Preferences
The prefers-reduced-motion media query detects whether a user has enabled the 'Reduce Motion' setting in their operating system. For users with vestibular disorders, epilepsy, or motion sensitivity, large-scale animations, parallax effects, and rapidly moving elements can cause nausea, disorientation, or even seizures. The WCAG 2.1 accessibility guidelines require that content which moves for more than 5 seconds has a mechanism to pause, stop, or hide it.
Implement it simply: @media (prefers-reduced-motion: reduce) { .animated-element { animation: none; transition: none; } }. A more nuanced approach reduces animation intensity rather than eliminating it — shorter durations, smaller distances, no looping. For loading spinners specifically, consider switching to a static indicator (a simple bordered box with 'Loading...' text) for users who prefer reduced motion.
Animating SVG Elements
SVG elements can be animated with CSS just like HTML elements, but with access to SVG-specific properties. stroke-dasharray and stroke-dashoffset can animate a path appearing to draw itself — a technique widely used in logo animations and illustrated progress indicators. The animation works by setting stroke-dasharray equal to the path length (obtainable via getTotalLength()), then animating stroke-dashoffset from the full path length to zero, making the stroke appear to grow from its start point.
SVG transform animations have historically been inconsistent across browsers due to the difference between SVG's transform-origin (which historically defaulted to the SVG viewport origin) and HTML's transform-origin (which defaults to the element centre). Modern browsers have standardised this behaviour, but for maximum compatibility in SVG animation, explicitly set transform-origin: center center or use the SVG transform attribute rather than CSS transforms for complex multi-step SVG animations.
Performance Profiling CSS Animations
Browser DevTools provide specific tools for diagnosing animation performance problems. Chrome DevTools' Performance tab records a timeline of all browser activities including layout, paint, and composite operations. Play your animation while recording to see frame-by-frame performance data. Frames that take longer than 16.7ms (the budget for 60fps) appear as long tasks on the timeline. The Layers panel shows which elements have been promoted to their own compositor layer — elements being animated with transform and opacity appear here, confirming GPU acceleration.
The Rendering tab in Chrome DevTools has several diagnostic overlays: Paint flashing highlights areas of the page that are being repainted (each flash indicates a repaint operation that could be avoided with better animation properties), Layer borders shows compositor layer boundaries, and Frame rendering stats displays a real-time FPS counter and frame budget indicator. These tools turn animation performance from guesswork into measurable, debuggable behaviour.
CSS Animation Libraries and When to Use Them
Several CSS animation libraries provide pre-built animation effects that can be applied by adding class names. Animate.css is the most widely used, providing over 70 entrance, exit, and attention-seeking animations as ready-to-use CSS classes. Motion UI (from Foundation) provides more sophisticated animations with Sass-based customisation. GSAP (GreenSock Animation Platform) is technically a JavaScript library but outputs CSS transforms and can animate virtually any property with professional-grade easing and timeline control.
Use CSS animation libraries when: you need effects quickly for a prototype, you want battle-tested cross-browser compatibility without manual testing, or the animations are decorative enough that customisation is less important than development speed. Build custom animations when: the animation is core to the product experience, pixel-perfect matching to a design system is required, file size is a concern (Animate.css adds 75KB minified), or performance characteristics of the animation need precise control.
The Future of CSS Animations: Scroll-Driven Animations and View Transitions
CSS Scroll-Driven Animations, shipped in Chrome 115 and gaining support in other browsers, allow animations to be driven by scroll position rather than time. An element can fade in as you scroll it into view, a progress bar can fill as you scroll down the page, or a header can shrink as you scroll past a certain point — all without any JavaScript. The animation-timeline: scroll() and animation-timeline: view() properties connect CSS animations to the scroll container's position, providing GPU-accelerated scroll effects that previously required JavaScript intersection observers and requestAnimationFrame loops.
The View Transitions API, available in Chromium-based browsers and being implemented in Firefox and Safari, enables smooth animated transitions between page states — including between entirely separate page navigations in multi-page apps. A navigation from a product list to a product detail page can animate the product image growing from its list position to fill the detail page header, creating the kind of polished transition previously only possible in native mobile apps. These new browser capabilities are moving complex animation scenarios from JavaScript frameworks into the CSS layer, improving performance and reducing JavaScript bundle size.
CSS Animations in Component-Based Frameworks
React, Vue, and Angular all provide built-in mechanisms for applying CSS animations to components during mounting and unmounting. React's Transition Group library provides CSSTransition and TransitionGroup components that apply enter and exit class names at the correct lifecycle moments — solving the fundamental problem that CSS cannot animate an element being removed from the DOM (because the element must remain in the DOM for the exit animation to play, then be removed when the animation ends). Vue's built-in Transition component provides the same functionality natively with v-enter, v-enter-active, v-leave, and v-leave-active classes.
Angular's animations module (@angular/animations) provides a domain-specific API for defining animations that bridges CSS and JavaScript, allowing animation parameters to be dynamically computed at runtime. This is powerful for data-driven visualisations where animation properties (duration, distance, colour) depend on data values, but the API complexity is higher than pure CSS for simple use cases. For simple enter and exit animations in Angular components, pure CSS transition classes applied via [class.animated] bindings are often simpler and more maintainable than the animations module.
Framer Motion is the dominant animation library for React, providing a React-native API for complex animations including shared layout animations, drag interactions, and gesture-based animations that go beyond what CSS transitions and keyframes can express. For most UI animations in React applications — hover effects, simple transitions, loading states — CSS animations remain the appropriate and more performant choice. Framer Motion's value is in complex, coordinated, physics-based, or gesture-driven animations where the JavaScript layer adds genuine capability beyond what CSS alone can achieve.
The most common mistake developers make when implementing CSS animations is using them where CSS transitions would be simpler and more maintainable. A CSS transition — the smooth change from one state to another triggered by a class change or user interaction — requires just two lines of CSS: the transition property on the element, and the target state on the modifier class. CSS keyframe animations are necessary when the motion involves more than two states, must run automatically without user interaction, or requires control over individual moments in the animation sequence. Reaching for keyframe animations when a transition suffices adds unnecessary complexity and makes the animation harder to understand and maintain.
CSS animation debugging requires distinguishing between three categories of problems: the animation is not playing at all (usually a specificity conflict where another rule overrides the animation property, or a typo in the keyframe name), the animation plays incorrectly (wrong timing, wrong starting or ending values, wrong iteration count), and the animation plays but looks wrong visually (incorrect transform-origin, wrong unit used for transforms, unexpected inherited values affecting the animated element). Each category has a different debugging approach. For animations not playing, check the Animations panel in Chrome DevTools which shows all active animations and their names. For animations playing incorrectly, use the Animations panel's timeline scrubber to step through the animation frame-by-frame. For visual problems, use the Elements panel to inspect computed styles on the animated element at different points in the animation.
References: MDN CSS Animation Reference · Animation Performance Guide (web.dev)