Optimizing CSS Animation Performance: Techniques and Best Practices

Author Kay Huang, a senior visual designer at Ctrip, shares practical experience optimizing the performance of CSS animations on the Ctrip train‑ticket marketing page.

The browser renders each frame in four steps: (a) compute styles, (b) calculate layout, (c) paint pixels, and (d) composite layers. For CSS3 animations, every frame goes through this pipeline, and exceeding the 16.67 ms budget (60 fps) causes jank.

To keep work under 10 ms per frame, the article proposes seven optimization methods.

3.1 Enable GPU acceleration – Use transform (e.g., translate) instead of top/left so the layout step is skipped. Example:

<style>
  .heart{animation:heartbeat 4s infinite;width:50px;height:50px;background:red;position:absolute;left:30px;top:30px;}
  @keyframes heartbeat{
    0%{top:30px;left:30px;}
    25%{top:30px;left:230px;}
    50%{top:230px;left:230px;}
    75%{top:230px;left:30px;}
  }
</style>

Replacing the position changes with transforms eliminates red repaint boxes and reduces frame time.

3.2 Avoid costly CSS properties – Properties like box-shadow trigger expensive calculations. Use transform: translateZ(0) to enable hardware acceleration while keeping the visual effect.

.box {transform: translateZ(0); box-shadow: 0 0 10px rgba(0,0,0,0.5);}

3.3 Avoid complex selectors – Simple class selectors compute faster. Example of a lightweight hover animation:

/* Simple class selector */
.item {background-color:#fff; transition:background-color 0.3s ease;}
.item:hover {background-color:#007bff;}

3.4 Use will-change to hint the browser about upcoming changes, allowing it to pre‑allocate resources. Example:

#textbox {opacity:1; transition:opacity 0.3s ease; will-change:opacity;}

3.5 Use requestAnimationFrame instead of setTimeout for frame‑synchronized updates:

function animate(){
  element.style.transform='translateX(100px)';
  requestAnimationFrame(animate);
}
requestAnimationFrame(animate);

3.6 Minimize JavaScript DOM operations in animations – Direct DOM changes cause layout and paint work. Cache elements or use CSS transitions to reduce overhead.

3.7 Prefer CSS animations over JavaScript – CSS animations leverage the GPU and browser optimizations. When JavaScript is necessary, limit DOM access and combine it with CSS classes for visual changes.

In conclusion, avoiding layout‑triggering properties, declaring animations early, and using GPU‑friendly CSS properties such as opacity, translate, rotate, and scale yields smoother animations and better performance.