Mastering CSS Animation with JavaScript: Advanced Techniques
When building web animations, developers must choose between CSS and JavaScript based on performance and control requirements.
Many designers assume CSS animations are harder than JavaScript ones. However, CSS animations often deliver superior performance and can handle complex interactions with minimal code.
By combining a small amount of JavaScript, CSS transitions and animations achieve hardware-accelerated motion more efficiently than most JavaScript libraries. Let's explore how.
Dive Deeper Now!
Precision Control of CSS Transitions
Online forums frequently discuss triggering and pausing element transitions. The JavaScript solution is surprisingly straightforward.
To trigger a transition, simply toggle a class that activates the desired CSS property change.
To pause a transition, use getComputedStyle and getPropertyValue at the desired stopping point, then set the element's CSS property to that captured value.
Using JavaScript as CSS Callbacks
One of the most valuable yet lesser-known techniques is leveraging DOM events like animationend, animationstart, animationiteration, and transitionend. These events fire when animations complete, start, or repeat, allowing precise control.
Currently, these events require vendor prefixes. In our example, we use Craig Buckler's PrefixedEvent function, which accepts element, type, and callback parameters for cross-browser support. His article on capturing CSS animations with JavaScript is a must-read.
Harnessing DOM Events for Animation
We can monitor elements and react to animation events, but what if you need to modify a running CSS animation mid-way? That requires a clever workaround.
Understanding animation-play-state Property
The animation-play-state property is ideal for pausing and resuming animations. You can change it via JavaScript like this (note vendor prefixes):
Element.Style.Smooth Animation = "paused";
Element.Style.Seamless UI Transition = "running";
Retrieving Current Keyframe Percentage
Unfortunately, at this time, there is no way to get the exact current “percentage completed” of a CSS keyframe animation. Best approach for approximation is using setInterval function that iterates 100 times during the animation, which is essentially: the animation duration in ms / 100. For example, if the animation is 4 seconds long, then the setInterval needs to run every 40 milliseconds (4000/100).
var showPercent = window.setInterval(function() {
if (currentPercent < 100) {
currentPercent += 1;
} else {
currentPercent = 0;
}
// Updates a div that displays the current percent
result.innerHTML = currentPercent;
}, 40);
Core Principles to Remember
Before writing code, carefully plan your transition or animation flow. This proactive approach minimizes issues and ensures the desired outcome—far better than debugging later.
Here's a small example showing how HTML and CSS alone can solve a problem that might seem to require JavaScript.
Summary and Future Outlook
- Developers once had to choose between CSS and JavaScript for animations.
- CSS transitions are generally easier to manipulate than CSS animations in JavaScript.
- CSS matrices can be difficult to work with, especially for beginners.
- Think through your approach and plan the execution carefully.