CSS animations bring life and interactivity to web pages, but when they’re poorly optimized, they can introduce jank—that frustrating stutter or lag that breaks the smoothness of an animation. This can be especially detrimental to user experience, particularly on mobile devices or slower machines. If your animations are causing performance issues, it’s time to dig deeper into what’s going wrong and how to fix it.
In this article, we’ll explore the causes of jank in CSS animations and dive into actionable strategies to optimize your animations for smooth performance. Whether you’re working on simple hover effects or complex keyframe animations, you’ll learn the techniques you need to ensure your animations run seamlessly across all devices.
Why Animation Jank Happens
Animation jank occurs when the browser struggles to maintain a smooth frame rate, typically 60 frames per second (FPS). This is often caused by heavy CSS animations that push the browser to perform multiple tasks simultaneously, such as painting, compositing, or layout recalculations, all while trying to animate elements on the screen.
Common reasons why animations cause jank:
Heavy CPU Work: Complex animations that require multiple calculations, like animating width or height, can tax the CPU.
Poorly Optimized Properties: Animating non-performant properties (like top, left, width, and height) forces the browser to constantly repaint and reflow elements, slowing down the animation.
Excessive DOM Manipulation: Too many elements being animated at once, or animations running on large DOM trees, can slow down performance.
Inefficient JavaScript Animations: Animating with JavaScript instead of CSS can sometimes result in higher CPU usage, especially if the code isn’t optimized.
Fortunately, there are clear steps you can take to prevent these issues and ensure your animations run smoothly. Let’s explore these strategies.
1. Stick to Hardware-Accelerated Properties
The most significant optimization technique for CSS animations is to animate only hardware-accelerated properties. These include transform, opacity, and filter. By sticking to these properties, you ensure that the browser offloads the animation to the GPU (Graphics Processing Unit), which is much better suited for handling animations than the CPU.
Why It Matters:
When you animate properties like top, left, width, or height, the browser must recalculate the layout of the page (known as reflow), repaint the elements, and then composite them. This is a heavy process that slows down performance, especially on complex pages or slower devices.
By animating transform and opacity, you avoid the reflow and repaint steps entirely. The browser only needs to update the position or opacity of the element, which can be done on the GPU, making the animation much smoother.
Example:
Let’s compare two animations: one that animates the top property and one that animates transform.
/* Less efficient: Animating the top property */
.element-move-top {
position: relative;
animation: moveTop 2s infinite;
}
@keyframes moveTop {
from {
top: 0;
}
to {
top: 100px;
}
}
/* More efficient: Animating the transform property */
.element-move-transform {
position: relative;
animation: moveTransform 2s infinite;
}
@keyframes moveTransform {
from {
transform: translateY(0);
}
to {
transform: translateY(100px);
}
}
In the first example, animating top requires the browser to recalculate the layout on every frame, which slows down performance. The second example uses transform: translateY(), which is hardware-accelerated and allows the browser to update the position without recalculating the layout or repainting.
2. Reduce the Number of Animations Running Simultaneously
Having too many elements animating simultaneously can overwhelm the browser, especially if the animations involve complex keyframes or non-performant properties. Reducing the number of animations running at the same time can greatly improve performance.
Why It Matters:
Each animation adds to the workload of the browser. If you’re animating several elements at once, particularly on mobile devices, the CPU and GPU can quickly become overwhelmed. This is especially true if each animation is forcing a reflow or repaint, as discussed earlier.
Solution:
Instead of animating many elements at once, try to reduce the number of animations running simultaneously. You can achieve this by staggering animations, using CSS delays, or animating only key elements on the page rather than everything at once.
Example: Staggering Animations
/* Animating multiple elements with staggered delays */
.element:nth-child(1) {
animation: fadeIn 1s ease-in-out 0s forwards;
}
.element:nth-child(2) {
animation: fadeIn 1s ease-in-out 0.2s forwards;
}
.element:nth-child(3) {
animation: fadeIn 1s ease-in-out 0.4s forwards;
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
By staggering the animations with delays, you avoid overloading the browser with multiple animations at the same time, improving performance.
3. Use Will-Change Property Wisely
The will-change property allows you to give the browser a hint about which properties will change in the future, so it can optimize the element ahead of time. However, overusing will-change can lead to performance degradation, so it must be used carefully.
Why It Matters:
When you apply will-change to an element, the browser sets aside resources to handle future changes to that property. This is useful for animations because it allows the browser to optimize in advance, reducing the likelihood of jank. However, applying will-change to too many elements or leaving it applied indefinitely can consume memory and slow down performance.
Example: Applying Will-Change
.element {
will-change: transform, opacity;
}
.element:hover {
transform: scale(1.1);
opacity: 0.8;
transition: transform 0.3s ease, opacity 0.3s ease;
}
In this example, will-change is applied to transform and opacity because those properties will change during the hover interaction. This allows the browser to optimize the animation, ensuring smooth transitions.
Important Tip: Only use will-change when necessary and remove it when it’s no longer needed. For example, only apply it just before an animation or interaction, and remove it afterward to free up resources.
/* Adding and removing will-change dynamically */
.element {
transition: transform 0.3s ease;
}
.element:hover {
will-change: transform;
transform: scale(1.1);
}
.element:focus {
will-change: opacity;
opacity: 0.8;
}
4. Avoid Triggering Layout Reflows
Reflows occur when the browser has to recalculate the layout of the page due to changes in certain CSS properties, like width, height, padding, margin, top, or left. Animating these properties can cause the browser to reflow the entire page, significantly slowing down the animation.
Why It Matters:
Each time you animate a property that affects layout, such as changing an element’s height or width, the browser must recalculate the position of every other element on the page. This can lead to significant performance issues, especially if the animation is happening repeatedly or across many elements.
Solution:
To avoid triggering reflows, stick to animating properties that don’t affect the layout of the page, such as transform or opacity.
Example: Avoiding Layout Reflows
/* Inefficient: Animating height causes layout reflow */
.element {
animation: growHeight 1s ease;
}
@keyframes growHeight {
from {
height: 100px;
}
to {
height: 200px;
}
}
/* Efficient: Using scale instead of height */
.element {
animation: scaleUp 1s ease;
}
@keyframes scaleUp {
from {
transform: scaleY(1);
}
to {
transform: scaleY(2);
}
}
The first example animates the height property, which forces the browser to recalculate the layout. In the second example, we use transform: scaleY(), which avoids layout recalculation and allows for a smoother animation.
5. Limit Use of Keyframe Animations
Keyframe animations are powerful, but they can also be resource-intensive, especially when combined with non-performant properties or when used excessively across a webpage. Limiting the complexity and number of keyframe animations can prevent performance issues.
Why It Matters:
Keyframe animations, especially those that animate properties that trigger reflows or repaints, can degrade performance if overused. By reducing the complexity of your keyframes and avoiding animations on too many elements simultaneously, you can ensure smoother performance.
Example: Simplify Keyframes
/* Complex keyframe animation: animating multiple properties */
@keyframes complexAnimation {
0% {
top: 0;
opacity: 1;
}
50% {
top: 50px;
opacity: 0.5;
}
100% {
top: 100px;
opacity: 1;
}
}
/* Simplified keyframe animation */
@keyframes optimizedAnimation {
0% {
transform: translateY(0);
opacity: 1;
}
100% {
transform: translateY(100px);
opacity: 1;
}
}
In the optimized version, we remove the middle keyframe and avoid animating top, instead using transform, which leads to fewer performance issues and a smoother animation.
6. Debounce or Throttle JavaScript Animations
If you’re using JavaScript to control animations, such as through the requestAnimationFrame() method, make sure you debounce or throttle the function to prevent it from being called too frequently.
Why It Matters:
JavaScript-driven animations can be taxing on the CPU, especially if the animation is triggered repeatedly (for example, during scroll events). Throttling or debouncing ensures the function is not called too often, which can improve performance.
Example: Throttling Scroll-Based Animations
let ticking = false;
window.addEventListener('scroll', function () {
if (!ticking) {
window.requestAnimationFrame(function () {
animateOnScroll();
ticking = false;
});
ticking = true;
}
});
function animateOnScroll() {
// Perform animations based on scroll position
}
Using requestAnimationFrame() ensures the animation runs at the optimal frame rate, while throttling the function prevents it from being called too often, resulting in smoother animations.
7. Understand the Browser Rendering Pipeline
To truly optimize CSS animations, it’s important to understand how browsers render web pages and process animations. Every time an element is animated, the browser goes through a sequence of steps known as the rendering pipeline, which includes:
- Style Calculation: The browser determines which CSS rules apply to each element.
- Layout (Reflow): The browser calculates the position and size of elements.
- Paint: The browser draws the pixels for each element.
- Compositing: The browser assembles the layers and prepares them for display.
Not all animations trigger the entire rendering pipeline. The key to optimization is minimizing the number of stages the browser needs to go through. As mentioned earlier, animating properties like transform and opacity avoids the Layout and Paint stages, allowing the animation to move directly to Compositing—the least resource-intensive step.
Why It Matters:
Animations that trigger Layout or Paint stages cause the entire page (or a significant portion of it) to be recalculated and redrawn, which leads to performance drops. Avoiding these stages helps keep animations smooth, even on lower-end devices.
8. Use CSS Containment to Isolate Animation Effects
CSS containment allows developers to limit how an element’s changes affect the rest of the page. By isolating parts of the DOM that won’t affect other elements, you can reduce the browser’s workload. This is especially useful for animations, where frequent changes to a single element should ideally not trigger reflows or repaints of the entire page.
Why It Matters:
Containment helps you control what parts of the page the browser needs to re-render. By applying containment to certain sections of your page, you ensure that animations only affect the elements they are directly animating, reducing the scope of browser recalculations and thus improving performance.
Example: Using CSS Containment
.contained-element {
contain: layout paint; /* Isolate layout and painting effects */
animation: moveUp 1s ease-in-out;
}
@keyframes moveUp {
from {
transform: translateY(0);
}
to {
transform: translateY(-100px);
}
}
Here, the contain: layout paint; rule ensures that changes to .contained-element won’t affect the layout or painting of other elements on the page. This optimization is particularly helpful for complex layouts or when animating elements within a large DOM.
9. Optimize Animation Timing with Easing Functions
The timing function of an animation determines how it progresses from start to finish. While the default ease timing function works for many situations, using custom timing functions like ease-in-out, cubic-bezier, or even steps() can help optimize performance while improving the feel of the animation.
Why It Matters:
The right easing function can make an animation feel more natural while also spreading out the computational load. For instance, linear animations maintain a constant speed but can feel mechanical, while ease-in-out animations start slow, speed up, and then slow down again, giving a more organic feel that also reduces computational strain at the beginning and end of the animation.
Example: Using a Custom Cubic Bezier Function
.element {
animation: fadeMove 2s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
}
@keyframes fadeMove {
from {
transform: translateY(100px);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}
In this example, the cubic-bezier function creates a more tailored easing effect, ensuring the animation progresses smoothly without overwhelming the CPU.
10. Use GPU-Friendly Filters
While filter is a powerful CSS property for creating effects like blurs or color adjustments, not all filters are GPU-accelerated. filter: blur() and filter: brightness(), for example, are GPU-friendly, meaning they can be rendered smoothly even during animations. However, more complex filters like drop-shadow() or contrast() may require more processing power.
Why It Matters:
GPU-accelerated filters ensure that the browser can offload the heavy lifting to the graphics card, preventing jank in animations. But if you overuse non-accelerated filters or apply them in large quantities, the performance gains of CSS animations can quickly degrade.
Example: Efficient Use of Filters
.element {
animation: blurAndFade 1.5s ease;
filter: blur(10px) brightness(1.2);
}
@keyframes blurAndFade {
0% {
filter: blur(0px) brightness(1);
opacity: 0;
}
100% {
filter: blur(10px) brightness(1.2);
opacity: 1;
}
}
In this example, the blur() and brightness() filters are GPU-friendly, allowing for smooth transitions without taxing the CPU.
11. Leverage CSS Custom Properties for Animation States
CSS custom properties (variables) offer a clean and efficient way to control animation states dynamically, allowing you to tweak animations or transitions without having to rewrite keyframes or entire CSS blocks.
Why It Matters:
By using custom properties, you can centralize your animation logic, making it easier to manage and adjust. Additionally, custom properties can help prevent recalculating the DOM tree or reapplying styles repeatedly, improving overall performance.
Example: Animating with CSS Variables
:root {
--animation-duration: 2s;
--animation-opacity: 1;
}
.element {
animation: fadeIn var(--animation-duration) ease-in-out;
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: var(--animation-opacity);
}
}
In this example, the animation’s duration and opacity values are controlled via CSS custom properties. This allows for easy adjustments across the entire stylesheet, promoting maintainability and optimization.
12. Test and Monitor Performance with Browser DevTools
A critical step in optimizing animations is actively monitoring their performance using browser tools like Chrome DevTools. These tools allow you to see how animations affect your page, whether they trigger reflows or repaints, and if any bottlenecks exist in the animation pipeline.
Why It Matters:
By using DevTools, you can get a clear picture of what’s happening under the hood during an animation. For example, the Performance tab in Chrome DevTools lets you record your page during an animation, showing you how much time is spent recalculating styles, rendering, and painting. This data is essential for identifying and resolving performance issues.
Example: Using DevTools for Animation Optimization
- Open Chrome DevTools (right-click the page and select Inspect).
- Navigate to the Performance tab.
- Click Record and interact with your page, especially the animations.
- Stop the recording and review the timeline. Look for long recalculate style, layout, or paint phases that might indicate inefficient animations.
By analyzing the timeline, you can pinpoint exactly where your animations might be causing jank and make the necessary adjustments.
Conclusion: Mastering Animation Performance in CSS
CSS animations can bring elegance and interactivity to your web pages, but if they’re not optimized, they can introduce jank and ruin the user experience. By focusing on hardware-accelerated properties like transform and opacity, reducing the number of simultaneous animations, using will-change effectively, and avoiding animations that trigger reflows or repaints, you can ensure your animations run smoothly across all devices.
Remember that smooth animations are not just about aesthetic appeal—they also directly impact user engagement and performance, especially on mobile devices. By implementing these strategies, you’ll ensure that your CSS animations are fast, fluid, and enjoyable for users, no matter the complexity of your design.
At PixelFree Studio, we prioritize not only visually stunning designs but also highly optimized, smooth interactions that enhance user experience. Use these techniques to make sure your animations shine without sacrificing performance.
Read Next:
