Use Transform and Opacity Properties to Implement Animations 관련

The Front-End Performance Optimization Handbook – Tips and Strategies for Devs

---

When you’re building a website, you’ll want it to be responsive, fast, and efficient. This means making sure the site loads quickly, runs smoothly, and provides a seamless experience for your users, among other things. So as you build, you’ll want to...

• Example: Inefficient vs. Efficient Animation
  • Performance comparison:
  • HTML implementation:

---

The Front-End Performance Optimization Handbook – Tips and Strategies for Devs

When you’re building a website, you’ll want it to be responsive, fast, and efficient. This means making sure the site loads quickly, runs smoothly, and provides a seamless experience for your users, among other things. So as you build, you’ll want to...

In CSS, transforms and opacity property changes don't trigger reflow and repaint. They’re properties that can be processed by the compositor alone.

Diagram showing how transform and opacity properties bypass layout and paint processes

---

Example: Inefficient vs. Efficient Animation

❌

❌Inefficient animation using properties that trigger reflow and repaint:

.box-inefficient {
  position: absolute;
  left: 0;
  top: 0;
  width: 100px;
  height: 100px;
  background-color: #3498db;
  animation: move-inefficient 2s infinite alternate;
}

@keyframes move-inefficient {
  to {
    left: 300px;
    top: 200px;
    width: 150px;
    height: 150px;
  }
}

This animation constantly triggers layout recalculations (reflow) because it animates position (left/top) and size (width/height) properties.

✅

✅ Efficient animation using transform and opacity:

.box-efficient {
  position: absolute;
  width: 100px;
  height: 100px;
  background-color: #3498db;
  animation: move-efficient 2s infinite alternate;
}

@keyframes move-efficient {
  to {
    transform: translate(300px, 200px) scale(1.5);
    opacity: 0.7;
  }
}

Why this is better:

1. transform: translate(300px, 200px) replaces left: 300px; top: 200px
2. transform: scale(1.5) replaces width: 150px; height: 150px
3. These transform operations and opacity changes can be handled directly by the GPU without triggering layout or paint operations

Performance comparison:

1. The inefficient version may drop frames on lower-end devices because each frame requires:
   • JavaScript → Style calculations → Layout → Paint → Composite
2. The efficient version typically maintains 60fps because it only requires:
   • JavaScript → Style calculations → Composite

HTML implementation:

<div class="box-inefficient">Inefficient</div>
<div class="box-efficient">Efficient</div>

For complex animations, you can use the Chrome DevTools Performance panel to visualize the difference. The inefficient animation will show many more layout and paint events compared to the efficient one.

Reference

Stick to Compositor-Only Properties and Manage Layer Count  |  Articles  |  web.dev

---

Compositing is where the painted parts of the page are put together for displaying on screen.