Web Animation Performance: CSS vs JavaScript vs Web Animations API

Smooth animations enhance user experience, but poorly executed animations create jank, drain battery, and frustrate users. Choosing the right approach—CSS, JavaScript, or the Web Animations API—depends on what you're animating and how much control you need.

CSS Animations and Transitions: The Default Choice

CSS handles 80% of UI animations with zero JavaScript overhead. Transitions are ideal for hover effects, button states, and element reveals. Animations work for looping effects and keyframe sequences.

.card {
  transform: translateY(0);
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.card:hover {
  transform: translateY(-4px);
}

CSS animations run on the compositor thread when animating transform and opacity only. The browser skips layout and paint phases entirely:

@keyframes fadeSlide {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.enter {
  animation: fadeSlide 0.4s ease-out;
}

Never animate width, height, top, left, or margin—these trigger layout recalculations. Stick to transform and opacity for GPU-accelerated, jank-free animations.

JavaScript Animations: When You Need Control

Libraries like GSAP and Framer Motion provide timeline sequencing, easing curves, and physics-based motion that CSS can't easily match. Use JavaScript when you need:

• Staggered animations across a list of elements
• Scroll-triggered animations tied to scroll position
• Complex timeline sequences with overlapping tweens
• Runtime-driven values (physics, drag, inertia)

// GSAP timeline example
const tl = gsap.timeline({ defaults: { duration: 0.6, ease: 'power3.out' } });
tl.from('.hero-title', { y: 40, opacity: 0 })
  .from('.hero-subtitle', { y: 30, opacity: 0 }, '-=0.3')
  .from('.cta-button', { scale: 0.8, opacity: 0 }, '-=0.2');

The performance cost of JS-driven animation is the main-thread work required to calculate and apply each frame. If a JavaScript animation causes jank, the animation loop is competing with other JS tasks. Use will-change to hint the browser about elements that will animate:

.animating-element {
  will-change: transform, opacity;
}

Web Animations API: The Middle Ground

The WAAPI provides imperative control over CSS-compatible animations with native performance. It runs on the compositor thread like CSS but offers the timing control of JavaScript:

const card = document.querySelector('.card');

card.animate([
  { transform: 'translateY(0)', opacity: 1 },
  { transform: 'translateY(-20px)', opacity: 0.8 },
  { transform: 'translateY(0)', opacity: 1 },
], {
  duration: 800,
  easing: 'ease-in-out',
  iterations: 1,
  fill: 'forwards',
});

Use the finish event for cleanup and cancel() for interruption:

const animation = card.animate(keyframes, options);

// Reverse on hover out
card.addEventListener('mouseleave', () => {
  animation.reverse();
});

WAAPI supports Animation.composite for additive animations and Animation.rangeStart/rangeEnd for scroll-driven animations in modern browsers.

Scroll-Driven Animations

CSS scroll-driven animations (2025+) link animation progress directly to scroll position without JavaScript:

@keyframes fade-in {
  from { opacity: 0; transform: scale(0.9); }
  to { opacity: 1; transform: scale(1); }
}

.animate-on-scroll {
  animation: fade-in linear forwards;
  animation-timeline: view();
  animation-range: entry 0% entry 100%;
}

This approach combines the performance of CSS with scroll-based triggers. For complex parallax or horizontal scroll sections, JavaScript libraries remain more flexible.

Performance Budget for Animations

Establish a 60 fps target and monitor frame drops. Use the Frame rendering stats in DevTools or programmatically:

let lastTime = performance.now();
let frames = 0;

function checkFrameRate(timestamp) {
  frames++;
  if (timestamp - lastTime >= 1000) {
    console.log(`FPS: ${frames}`);
    frames = 0;
    lastTime = timestamp;
  }
  requestAnimationFrame(checkFrameRate);
}

If frames drop below 55 during animations, simplify the motion. Reduce the number of concurrently animating elements or switch from JavaScript to compositor-driven techniques.

The right animation strategy prioritizes the compositor, uses JavaScript only where control requires it, and always monitors real frame rates. Smooth motion isn't a cosmetic feature—it's a core UX quality metric.

Our custom UI/UX design team creates purpose-driven motion systems that enhance usability without sacrificing performance.