Controlling CSS Animations and Transitions with JavaScript

CSS Transitions vs Animations: Key Differences

CSS Transitions: Simple State Changes

CSS transitions provide the simplest way to animate between two states. When a CSS property changes, the browser interpolates the values over a specified duration, creating a smooth effect. Transitions are ideal for hover states, focus indicators, and any interaction where an element moves between two defined states. The transition property accepts four values: the properties to animate, the duration, the timing function, and an optional delay.

Key transition properties:

• transition-property: The CSS properties to animate
• transition-duration: How long the transition takes (e.g., 300ms)
• transition-timing-function: The acceleration curve (ease, linear, cubic-bezier)
• transition-delay: Optional wait before starting

The power of transitions lies in their simplicity and browser optimization. Because transitions are declarative in CSS, the browser can anticipate and prepare for the animation, often resulting in better performance than JavaScript-driven alternatives. Transitions work particularly well for small, frequent animations like button hover effects, menu open/close states, and form input focus rings.

CSS Animations: Complex Sequences with Keyframes

CSS animations extend beyond simple two-state transitions by supporting multi-step sequences defined in @keyframes rules. An animation can have any number of keyframes, each specifying different property values at specific percentages of the animation duration. This capability enables complex effects like bouncing balls, loading spinners, and elaborate entrance animations that would be impractical with transitions alone.

Key animation properties:

• animation-name: Links to @keyframes definition
• animation-duration: How long one cycle takes
• animation-timing-function: How the animation progresses over time
• animation-delay: Wait before starting
• animation-iteration-count: How many times to repeat
• animation-direction: normal, reverse, alternate, alternate-reverse
• animation-play-state: running or paused

Unlike transitions, animations can repeat indefinitely with animation-iteration-count: infinite, making them suitable for continuous motion effects like pulsing indicators or rotating loaders. The animation-play-state property is particularly valuable for JavaScript control, as toggling between "running" and "paused" states allows users to halt animations for better readability or to conserve resources.

Learn more about CSS animations in MDN's comprehensive guide.

JavaScript Control: The animation-play-state Property

The animation-play-state property provides the most direct JavaScript control over CSS animations, allowing developers to pause and resume animation playback. By default, animations run in the "running" state; setting this property to "paused" freezes the animation at its current position without resetting it. This capability enables interactive features like hover-to-pause functionality, where users can examine an animated element by hovering over it, or pause buttons that halt all animations on a page for improved accessibility.

Practical implementations of animation-play-state often combine it with event listeners for user interactions. A common pattern adds a .paused class to animated elements when the user mouses over them, setting animation-play-state: paused, and removes the class on mouseout to resume playback. For page-wide animation control, JavaScript can query all animated elements and toggle their play state collectively. This approach is particularly valuable for accessibility, allowing users who are sensitive to motion to pause all animations through a preferences toggle. The animation-play-state property represents the simplest entry point for JavaScript-enhanced animation control.

Common patterns for animation-play-state control:

• Toggle between running and paused on click events
• Pause animations when the user scrolls past certain elements
• Provide a global pause button for accessibility
• Use with Intersection Observer to pause off-screen animations

The Web Animations API: Advanced JavaScript Control

The Web Animations API provides a JavaScript-native way to create and control animations, offering capabilities beyond CSS-based approaches. Unlike CSS animations, which are declarative and limited to predefined keyframes, the Web Animations API allows developers to construct animations dynamically, specifying keyframes and timing options as JavaScript objects.

The core method, Element.animate(), accepts an array of keyframe objects and a timing options object, returning an Animation object that provides extensive control over playback. This programmatic approach enables animations to be created in response to runtime conditions, user input, or data that is not known at stylesheet authoring time. By combining this API with modern JavaScript techniques, developers can create sophisticated, data-driven animation experiences.

Key Animation Object Methods:

Animation Object Properties:

The returned Animation object provides methods like play(), pause(), reverse(), and finish(), as well as properties for currentTime and playbackState, enabling precise control that would be impossible with CSS alone. Explore more in the MDN Web Animations API guide.

Performance Optimization for Smooth Animations

Performance optimization for web animations centers on a fundamental principle: animate only transform and opacity properties. These properties can be handled entirely by the compositor thread, which operates independently of the main JavaScript thread and GPU-accelerated rendering. This optimization is critical for high-performance web applications that aim to deliver smooth 60fps experiences across all devices.

Properties to Animate (GPU-accelerated):

• transform - translate, rotate, scale, skew
• opacity - transparency level

Properties to Avoid (CPU-heavy):

• width, height, margin, padding - trigger layout
• background-color, border-color - trigger repaint
• box-shadow, filter - expensive composite operations

The transform property supports translation, rotation, scaling, and skew through efficient matrix operations that the GPU handles natively. Combining multiple transforms in a single property, such as transform: translateX(100px) rotate(45deg) scale(1.5), avoids intermediate renders and keeps animation smooth. Together, transform and opacity can create a wide range of visual effects while maintaining consistent 60fps performance even on lower-powered devices.

Following Google's performance guidelines for animations, any animation requiring property changes beyond these two should consider whether the visual impact justifies the performance cost.

Hardware Acceleration with will-change

Modern browsers support hardware acceleration for animations through the will-change CSS property. This hints to the browser that an element will be animated, allowing it to prepare by creating separate compositor layers.

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

Best practices for will-change:

• Apply it only to elements about to be animated
• Remove it after animation completes
• Avoid applying to too many elements (memory cost)
• For most cases, browser auto-optimization is sufficient

Reducing Paint and Layout Operations

Beyond animating only transform and opacity, additional strategies minimize animation impact:

1. Stagger animations - Use delays to spread work across frames
2. Limit scope - Animate fewer elements at once
3. Use containment - contain: layout paint isolates elements
4. Consider transforms - Scale instead of width, translate instead of left/top

For animations that require layout changes, using transforms to simulate those changes can maintain performance. Instead of animating width to expand an element, animate transform: scaleX() for a similar visual effect with better performance. These optimizations become increasingly important on mobile devices with limited processing power and battery constraints.

Practical Examples: Common Animation Control Patterns

Synchronized Animation Sequences

// Create staggered entrance animations
const createEntrance = async () => {
 const items = document.querySelectorAll('.list-item');
 
 const animations = Array.from(items).map((item, index) => {
 return item.animate(
 [
 { transform: 'translateY(20px)', opacity: 0 },
 { transform: 'translateY(0)', opacity: 1 }
 ],
 {
 duration: 300,
 delay: index * 100, // Stagger by 100ms
 easing: 'ease-out',
 fill: 'forwards'
 }
 );
 });
 
 // Wait for all to complete
 await Promise.all(animations.map(a => a.finished));
 console.log('Entrance complete!');
};

Accessibility: Respects Reduced Motion

// Check for reduced motion preference
const prefersReducedMotion = window.matchMedia(
 '(prefers-reduced-motion: reduce)'
).matches;

// Disable or reduce animations based on preference
const createAnimation = (element) => {
 if (prefersReducedMotion) {
 // Instant change instead of animation
 element.style.opacity = '1';
 return null;
 }
 
 return element.animate([
 { opacity: 0 },
 { opacity: 1 }
 ], { duration: 200 });
};

Dynamic Property Modification

// Adjust animation speed based on user interaction
const slider = document.getElementById('speed-control');
const animatedElement = document.querySelector('.animated');

// Get the animation's current timing
const currentAnimation = animatedElement.getAnimations()[0];

slider.addEventListener('input', (e) => {
 const speed = e.target.value;
 const baseDuration = 1000;
 const newDuration = baseDuration / speed;
 
 // Update animation timing
 currentAnimation.effect.updateTiming({
 duration: newDuration
 });
});

These patterns demonstrate how to build sophisticated animation experiences in modern web applications. By combining the Web Animations API with accessibility considerations and user interaction, you can create interfaces that are both engaging and respectful of user preferences.

Sources

1. MDN Web Docs - Using CSS Animations - Comprehensive official documentation on CSS animation syntax, @keyframes, and animation properties
2. MDN Web Docs - Web Animations API - JavaScript API for controlling CSS animations programmatically
3. web.dev - High-Performance CSS Animations - Google's performance optimization guide focusing on transform and opacity for 60fps animations