Animation
Programmatic motion that communicates state changes, guides attention, or provides feedback.
Plain English
Good animation serves the user, not the designer. A loading spinner communicates "the system is working." A success checkmark provides feedback that the form submitted. A notification that slides in from the right attracts attention without interrupting. The cardinal rule: animation should be purposeful and brief. Animations that exist purely to look impressive slow users down and signal a design that prioritises style over function.
Technical
CSS animations use the animation property with @keyframes. Key values: animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction, animation-fill-mode. For continuous animations (spinners): animation-iteration-count: infinite. For entrance animations: animation-fill-mode: both with a short delay prevents flash-of-content. Always provide @media (prefers-reduced-motion: reduce) overrides that either disable or drastically reduce animations.
Live Demo
Easing Comparison
ease-out feels most natural — fast start, gentle stop, like real-world physics.
Usage
✓ Good usage
A 200ms fade-in + slight upward translate on a modal entrance, with a matching 150ms fade-out on close — communicates depth and provides contextual feedback.
✗ Bad usage
Full-page dissolve animations between every screen change at 600ms — beautiful in a Dribbble shot, unusable in a real product where users click quickly.
Recommended values
- Micro-interaction (hover, click): 100–200ms
- State change (tab switch, form success): 200–300ms
- Entrance animation (modal, notification): 200–350ms
- Loading spinner: continuous, 700–1000ms per rotation
- Page-level transitions: 300–500ms (use sparingly)
- Always: @media (prefers-reduced-motion) override
Common mistakes
- Not providing prefers-reduced-motion alternatives — causes nausea/discomfort for users with vestibular disorders.
- Entrance animations on every element — visually overwhelming.
- Animations that delay access to content — anything that makes the user wait to read or interact.
AI Prompt Example
Copy this into Claude, Cursor, Bolt, or v0.
Use animation only for: loading states (spinner), success/error feedback, modal entrance/exit, and notification slide-in. All animations under 300ms. Always include @media (prefers-reduced-motion: reduce) { * { animation-duration: 0.01ms !important; }}.