Animation on the web has evolved from flashy distractions to a genuine UX tool. When used well, motion communicates state changes, guides attention, and creates a sense of polish that builds trust. When used poorly, it slows pages down, frustrates users, and triggers accessibility issues. Here is how to get the balance right.
Why Animation Matters for UX
The human brain is wired to notice motion. Animation leverages this by directing attention to important elements, providing feedback on user actions, and smoothing transitions between states. A button that subtly changes colour on hover tells the user it is interactive. A loading spinner communicates that something is happening. A smooth page transition reduces the jarring feeling of navigating between pages.
Research consistently shows that well-implemented micro-interactions increase perceived quality and user satisfaction. They make interfaces feel responsive and alive rather than static and mechanical. But there is a critical distinction between animation that serves the user and animation that serves the designer's ego.
Performance-First Animation Techniques
Not all CSS properties are equal when it comes to animation performance. The browser's rendering pipeline has three stages — layout, paint, and composite — and animating properties that trigger earlier stages is expensive.
- Use transform and opacity: These properties are composited on the GPU and do not trigger layout or paint. Translate, scale, rotate, and fade cover 90% of animation needs.
- Avoid animating layout properties: Width, height, margin, padding, and top/left trigger layout recalculation for the entire page. Use transform: translateX() instead of animating left.
- Use will-change sparingly: The will-change property hints to the browser that an element will animate, allowing it to optimise in advance. But overuse promotes elements to their own compositing layers unnecessarily, consuming memory.
- Prefer CSS over JavaScript: CSS animations and transitions are handled by the browser's compositor thread and do not block the main thread. Use JavaScript animation libraries only when you need complex sequencing or physics-based motion.
Motion Design Principles
Good animation follows principles borrowed from traditional animation and adapted for interfaces. Easing is fundamental — linear animations feel robotic, while ease-out curves feel natural for elements entering the screen and ease-in curves work for elements leaving. Duration should match the complexity of the change; micro-interactions like button states need 100-200 milliseconds, while page transitions can be 300-500 milliseconds. Anything longer than 500 milliseconds feels sluggish.
Stagger animations when revealing multiple elements. Instead of everything appearing at once, introduce items sequentially with a 50-100 millisecond delay between each. This creates a sense of flow and makes the content easier to process. However, keep the total stagger time short — users should not have to wait for your animation to finish before they can interact with the page.
Accessibility and Reduced Motion
Some users experience motion sickness, seizures, or discomfort from animated content. The prefers-reduced-motion media query lets you respect user preferences. At minimum, wrap all non-essential animations in a reduced motion check and disable them for users who have requested reduced motion in their operating system settings. Essential animations — like a loading indicator — can be simplified rather than removed entirely.
This is not optional. The European Accessibility Act, which affects Malta and all EU member states, requires websites to accommodate users with disabilities. Respecting motion preferences is a baseline expectation. At Born Digital, we build all our animation systems with reduced motion support from the start — it is simpler than retrofitting it later.
Practical Implementation
Start with scroll-triggered reveal animations for content sections — they are easy to implement with IntersectionObserver and add polish without complexity. Add hover and focus states to interactive elements. Use transition on state changes like accordion panels, modal overlays, and navigation menus. Only reach for animation libraries like GSAP or Framer Motion when you need timeline-based sequencing, scroll-linked animations, or physics-based motion that CSS cannot achieve.