Motion Design for Web: CSS Animations, Lottie, and Micro-Interactions

Last updated October 2026

Motion design for the web encompasses CSS animations, Lottie vector animations, and micro-interactions that guide user attention, communicate state changes, establish brand personality, and improve perceived performance — when implemented thoughtfully with performance budgets (animating only transform and opacity), accessibility considerations (respecting prefers-reduced-motion), and file size constraints critical for Indian users on mid-range devices and variable network conditions.

Why Does Motion Design Matter for Modern Websites?

Motion is not decoration — it serves functional purposes:

• Guides attention: A subtle animation draws the eye to a CTA button, a notification badge, or a form validation message. Without motion, users may miss critical interface elements.
• Communicates state changes: Loading spinners, progress bars, skeleton screens, and success animations inform users that something is happening. This reduces perceived wait time by 30–40% even when actual load times are unchanged.
• Provides feedback: Button press animations, hover effects, and input field interactions confirm that the user’s action was registered. Without feedback, users click again, causing duplicate submissions.
• Establishes hierarchy: Staggered entrance animations naturally establish content hierarchy — elements that appear first are perceived as more important.
• Builds brand personality: The way elements move defines your brand’s character. Snappy, responsive animations feel modern and tech-savvy. Smooth, deliberate animations feel premium and luxurious. Bouncy, playful animations feel approachable and fun.

What Are the Core CSS Animation Techniques?

CSS Transitions

The simplest animation technique. Transitions smoothly interpolate between two states when a CSS property changes (usually on hover, focus, or class toggle):

• Use for: Hover effects, button states, colour changes, size changes, opacity fades
• Performance: Excellent for transform and opacity properties, which are handled by the GPU compositor without triggering layout or paint
• Best practice: Always specify which properties to transition (transition: transform 0.3s ease, opacity 0.3s ease) rather than transition: all, which can accidentally transition expensive properties

CSS Keyframe Animations

For complex multi-step animations defined with @keyframes:

• Use for: Loading spinners, entrance animations, attention-grabbing loops, background animations
• Performance: Same GPU-accelerated properties (transform, opacity) are efficient. Animating width, height, top, left, or margin triggers layout recalculation on every frame — avoid these.
• Best practice: Use will-change: transform sparingly on elements that will animate, and remove it after animation completes. Over-using will-change consumes GPU memory.

CSS Scroll-Driven Animations

A newer CSS feature (widely supported in 2026) that ties animations to scroll position without JavaScript:

• Use for: Parallax effects, scroll progress indicators, reveal-on-scroll animations, horizontal scroll sections
• Performance: Excellent — runs on the compositor thread, no main thread blocking. Dramatically better than JavaScript scroll listeners (IntersectionObserver or scroll event listeners).
• Browser support: Chrome, Edge, Firefox (behind flag), Safari (partial). For Indian websites targeting broad browser support, include a JavaScript fallback or progressive enhancement.

What Is Lottie and When Should You Use It?

Lottie is a JSON-based animation format created by Airbnb that renders After Effects animations in the browser. Designers create animations in After Effects (or Figma with plugins), export them as JSON files via the Bodymovin plugin, and developers render them using the lottie-web library.

Advantages of Lottie

• Tiny file sizes: A complex illustration animation that would be 2 MB as a GIF or 500 KB as a video is typically 30–100 KB as a Lottie JSON file.
• Resolution-independent: Lottie animations are vector-based, rendering crisply at any screen size — critical for responsive design across mobile, tablet, and desktop.
• Interactive: Lottie animations can be controlled programmatically — play on scroll, pause on hover, reverse on click, scrub to a specific frame based on user input.
• Designer-developer workflow: Designers create in After Effects (familiar tool), developers implement with a simple JSON file import. No need to translate complex animations into CSS keyframes.

When to Use Lottie vs CSS Animations

Lottie Performance Considerations

• Library size: lottie-web is approximately 250 KB. Use the “light” build (150 KB) if you do not need SVG renderer features. Consider lottie-light or dotlottie-player for smaller alternatives.
• Rendering mode: Lottie can render as SVG (best quality, moderate performance), Canvas (best performance, no DOM overhead), or HTML (legacy). For most web use, SVG rendering is recommended.
• Lazy loading: Load Lottie animations only when they scroll into view. On a page with 5 Lottie animations, lazy loading prevents downloading and parsing all 5 on initial page load.

What Are Micro-Interactions and How Do You Design Them?

Micro-interactions are small, contained animations triggered by user actions. They are the building blocks of a polished user experience:

Common Micro-Interaction Patterns

• Button feedback: Scale down on press (transform: scale(0.95)), colour change, ripple effect
• Form validation: Shake animation on error, checkmark on success, colour transition on valid input
• Toggle states: Switch animations, checkbox ticks, accordion expand/collapse
• Navigation: Menu open/close, tab switch, page transitions
• Data loading: Skeleton screens, shimmer effects, progress indicators
• Notifications: Toast slide-in/out, badge pulse, alert shake
• Scroll feedback: Sticky header shrink, back-to-top button appear, section reveal

The Motion Design Principles

1. Duration: 150–400ms for most micro-interactions. Under 100ms feels instantaneous (no animation perceived). Over 500ms feels slow. Entrance animations: 200–400ms. Exit animations: 150–250ms (exits should be faster than entrances).
2. Easing: Never use linear easing for UI animations — it feels robotic. Use ease-out (decelerate) for entrances, ease-in (accelerate) for exits, and ease-in-out for transitions between states. Custom cubic-bezier curves for brand-specific motion personality.
3. Consistency: Define a motion system with standardised durations, easings, and patterns. All buttons should animate the same way. All modals should enter the same way. Inconsistent animation feels broken.
4. Purpose: Every animation must serve a function — guiding attention, providing feedback, or communicating state. Remove any animation that exists only for decoration.

How Do You Ensure Motion Accessibility?

Motion that delights most users can harm others:

• Vestibular disorders: Large-scale motion, parallax, and zooming animations can trigger vertigo, nausea, and migraines in people with vestibular disorders (estimated 35% of adults over 40 experience some form).
• Photosensitive epilepsy: Flashing or rapidly changing content (more than 3 flashes per second) can trigger seizures.
• Cognitive load: Excessive animation can overwhelm users with cognitive disabilities, making it harder to focus on content.

Implementing Reduced Motion

Use the prefers-reduced-motion CSS media query to provide animation alternatives:

• Replace parallax with static backgrounds
• Replace slide/zoom entrances with simple opacity fades
• Reduce or eliminate decorative background animations
• Keep essential functional animations (loading indicators, state changes) but simplify them

In JavaScript, check window.matchMedia('(prefers-reduced-motion: reduce)').matches before triggering JS-driven animations. For Lottie, reduce playback speed or show a static frame instead.

What Is the Performance Budget for Web Animations?

For Indian websites targeting mobile users on mid-range devices:

• Frame rate target: 60fps (16.67ms per frame budget). If an animation drops below 30fps, it feels broken. Use Chrome DevTools Performance tab to measure frame rates.
• Animate only compositor properties: transform (translate, scale, rotate) and opacity. These bypass layout and paint, running entirely on the GPU. Animating any other property triggers expensive layout/paint operations.
• Limit simultaneous animations: On mid-range Indian phones (Redmi, Realme with 3–4 GB RAM), more than 3–4 simultaneous complex animations can cause frame drops. Stagger animations and limit concurrent motion.
• Total animation payload: All Lottie JSON files + animation-related JavaScript should stay under 200 KB total. For perspective: the lottie-web library (150–250 KB) + 3 small Lottie animations (30 KB each) = 240–340 KB. This is acceptable but leaves no room for more without impacting performance.
• Test on real devices: Chrome DevTools CPU throttling (4x slowdown) approximates mid-range Indian phone performance. Test all animations under throttling before deploying.

Frequently Asked Questions

Should I use CSS animations or a JavaScript animation library like GSAP?

Use CSS for simple animations (transitions, basic keyframes, scroll-driven). Use GSAP (GreenSock) when you need complex sequencing (timeline-based animations), scroll-triggered animations with fine control (ScrollTrigger plugin), or animations that respond dynamically to user input. GSAP adds ~28 KB (core) to your bundle but provides dramatically more control than CSS alone.

How do I add Lottie animations to a WordPress site?

Elementor Pro includes a native Lottie widget — upload the JSON file and configure playback (auto-play, loop, scroll-trigger). For non-Elementor WordPress sites, use the LottieFiles WordPress plugin or embed the lottie-player web component directly in a Custom HTML block. Keep JSON files under 100 KB each for optimal performance.

What is the difference between Lottie and Rive?

Lottie renders After Effects animations exported as JSON. Rive is a dedicated interactive animation tool with its own editor and runtime. Rive produces smaller files, better performance (its own rendering engine), and supports interactive state machines (animations that respond to user input). For static playback animations, Lottie is mature and well-supported. For interactive animations (like a character that reacts to cursor position), Rive is superior.

How do I convince clients that motion design is worth the investment?

Present data: pages with well-implemented micro-interactions see 15–25% higher conversion rates. Skeleton loading screens reduce perceived load time by 30%. Animated onboarding walkthroughs improve completion rates by 40%. Frame motion design as a conversion investment, not a design luxury. For Indian clients who are cost-conscious, emphasise that CSS animations are essentially free (developer time only, no additional tools or licenses).

Are there free Lottie animations I can use?

Yes. LottieFiles.com hosts thousands of free Lottie animations under permissive licences. IconScout, Lordicon, and unDraw also provide free animated assets. For branded animations, hire a motion designer on Fiverr or Upwork (₹5,000–₹25,000 per animation depending on complexity) or use LottieFiles’ online editor to customise existing animations with your brand colours.