Choosing Between CSS and JavaScript for Web Animations

There are two primary ways to create animations on the web: CSS and JavaScript. The choice between them depends on the dependencies of your project and the kinds of effects you aim to create.

Most basic animations can be built with either approach, but the effort and time differ. In general, follow these guidelines:

  • Use CSS for simpler, self-contained UI state transitions. CSS transitions and animations are ideal for tasks like bringing a navigation menu in from the side or showing a tooltip. You may use JavaScript to control the states, but the animation logic stays in CSS.
  • Use JavaScript when you need significant control. The Web Animations API is a standards-based approach available in most modern browsers. It offers real objects, which suits complex object-oriented applications, and makes it easy to stop, pause, slow down, or reverse animations.
  • Use requestAnimationFrame for hand-orchestrated scenes. For advanced use cases like building a game or drawing to an HTML canvas, this direct JavaScript approach may be the best route.

If you are already using a JavaScript framework with animation support—such as jQuery's .animate() method or GreenSock's TweenMax—it may be more convenient to continue with that library for your animation needs.

Animating with CSS

CSS is often the simplest way to get something moving. This approach is declarative: you specify the end state, and the browser handles the rest.

For example, the following CSS moves an element 100px along both the X and Y axes. When the move class is added, the transform value triggers a 500ms CSS transition:

.box {
  transform: translate(0, 0);
  transition: transform 500ms;
}

.box.move {
  transform: translate(100px, 100px);
}

Beyond the duration, you can control the easing—which dictates how the animation feels. If you define separate CSS classes for your animations, you can toggle them on and off from JavaScript:

box.classList.add('move');

This pattern creates a useful separation: JavaScript manages state by setting classes; the browser handles the animation. To detect when a CSS transition finishes, you can listen for the transitionend event, though support only began with Internet Explorer 10:

var box = document.querySelector('.box');
box.addEventListener('transitionend', onTransitionEnd, false);

function onTransitionEnd() {
    // Handle the transition finishing.
}

For more control over keyframes, durations, and iterations, CSS animations provide another layer. The example below animates the box indefinitely without user interaction:

.box {
  animation-name: movingBox;

  animation-duration: 1300ms;

  animation-iteration-count: infinite;

  animation-direction: alternate;
}

@keyframes movingBox {
  0% {
    transform: translate(0, 0);
    opacity: 0.3;
  }

  25% {
    opacity: 0.9;
  }

  50% {
    transform: translate(100px, 100px);
    opacity: 0.2;
  }

  100% {
    transform: translate(30px, 30px);
    opacity: 0.8;
  }
}

CSS animations are defined independently of their target element, and the animation-name property selects the needed keyframe set. On older browsers, you'll need vendor prefixes; build tools can generate these from an unprefixed source.

Animating with JavaScript and the Web Animations API

JavaScript animation is generally more complex than CSS, but yields more power. The Web Animations API lets you animate CSS properties directly or assemble composable effect objects.

JavaScript animations are imperative: you write them inline and can encapsulate them inside objects. The snippet below recreates the earlier CSS transition:

var target = document.querySelector('.box');
var player = target.animate([
    {transform: 'translate(0)'},
    {transform: 'translate(100px, 100px)'}
], 500);
player.addEventListener('finish', function() {
    target.style.transform = 'translate(100px, 100px)';
});

Web Animations only changes how an element appears by default. To have the element remain at its final position, you need to update its underlying styles when the animation completes, as shown above.

The Web Animations API is a relatively new W3C standard. It runs natively in most current browsers, with a polyfill available for those that lack support.

Using JavaScript gives you step-by-step control over an element's styles. You can slow animations down, pause, stop, or reverse them—capabilities especially valuable in complex, object-oriented applications where animating behavior can be encapsulated with other logic.