Animation
Animation is the presentation of changing visual states over time to create the appearance of motion or change.
Design for Developers
The use of changing visual states over time to communicate movement, activity, or interaction in an interface.
- How it is used
- Guides user flows, confirms interactions, communicates status, and adds appropriate delight.
- How deep it goes
- Explains purposes, scenarios, storyboarding, testing, and CSS property costs without framework-specific implementation.
- Examples
- Uses a Yeti login form, blinking holiday lights, a link hover effect, shaking password errors, skeleton content, and a button storyboard.
- What you can do after
- Apply it by planning and testing purposeful motion that provides feedback, status, or restrained delight without inhibiting use.
Classic Game Programming on the NES: Make your own retro video game
Animation is the presentation of changing visual states over time to create motion or visual activity in a game.
- How it is used
- Adds visual activity to a space shooter’s enemies, background, explosions, and game-state presentation.
- How deep it goes
- Works through timed sprite-pattern cycling, NMI tile updates, palette swaps, and NES video-memory constraints.
- Examples
- Uses cycling meteor enemies, randomly placed twinkling stars, palette-swapped scenery, and explosion effects.
- What you can do after
- Build it from scratch by cycling sprite patterns, updating background tiles, and swapping palette colors on timed intervals.
Read how Classic Game Programming on the NES: Make your own retro video game explains animation →
Math for Web Design
A web animation is the programmed or styled change of visual properties over time in a web interface.
- How it is used
- Uses animation to provide motion, interactive feedback, reading progress, and celebratory completion effects.
- How deep it goes
- Works through frame loops, interpolation, Bézier easing, trigonometric paths, scroll normalization, and simple physics calculations.
- Examples
- Demonstrates an orbiting element, sliding dialog, hover tooltip, bouncing ball, reading-progress bar, and canvas confetti shower.
- What you can do after
- Build it from scratch with CSS or JavaScript by mapping time, angles, scrolling, or physics values to visual properties.
CSS in Depth, Second Edition
Animation is a time-varying visual change in a user interface that can communicate information or significance to the user.
- How it is used
- Uses animation to communicate interaction feedback, loading progress, and other meaningful changes in an interface.
- How deep it goes
- Explains animation through a working form example and rendering internals, including layers, GPU acceleration, and will-change.
- Examples
- Demonstrates a Save-button spinner, an is-loading class, a rotating pseudo-element, and a form-submission feedback state.
- What you can do after
- Build it from scratch using CSS keyframes, pseudo-elements, transforms, and JavaScript-triggered loading states.
Everyday Data Visualization
Animation is the presentation of visual changes through a sequence of displayed states over time.
- How it is used
- Uses motion to attract attention, show changing data, and confirm successful chart interactions.
- How deep it goes
- Explains purposes, examples, and cautions about distraction and performance, but stops short of implementation steps.
- Examples
- Uses racing bar charts, Gapminder’s World Health Chart, loading spinners, growing bars, and rearranging visual elements.
- What you can do after
- Apply animation to emphasize changing data or provide timely interaction feedback without harming clarity or performance.
Related concepts
- motionuses · Motion is a change in an object’s position or configuration over time.
- prefers-reduced-motionconfigured by · prefers-reduced-motion is a CSS media feature that indicates whether a user has requested reduced nonessential motion.
- CSS transform propertyused by · The CSS transform property applies two-dimensional or three-dimensional geometric transformations, such as translation, rotation, scaling, and skewing, to an element’s rendering.
- usabilityaddresses · Usability is the degree to which intended users can use a system or product effectively, efficiently, and satisfactorily to accomplish their goals.
These guides are generated from the text of Manning books by Manning's knowledge graph and link to the sections they draw on. The full books are available on liveBook and at manning.com.