[CSS] 애니메이션 렌더링 순서

🛠 렌더링 과정과 해당 속성들

1️⃣ 레이아웃(Layout)

• 영향받는 속성: width, height, margin, padding, position, top, left, right, bottom 등
• 설명:
  • 요소의 크기와 위치를 다시 계산하는 단계
  • 부모와 자식 요소까지 영향을 줌
  • 비용이 가장 크므로 최소화해야 함

🔴 예시 (비효율적인 애니메이션)

@keyframes badExample {
  from { left: 0px; }
  to { left: 100px; } /* left 속성 변경 → 레이아웃 재계산 */
}

❌ 문제: left를 변경하면 브라우저가 모든 요소의 위치를 다시 계산해야 함 → 성능 저하

---

2️⃣ 페인트(Paint)

• 영향받는 속성: background, color, box-shadow, border, text-shadow 등
• 설명:
  • 요소를 픽셀로 변환하는 과정
  • 색상, 그림자, 테두리 변경 시 영향을 받음
  • 복잡한 그림자(box-shadow), 반투명(opacity < 1) 효과가 많으면 성능 저하

🔴 예시 (비효율적인 애니메이션)

@keyframes badPaint {
  from { background-color: red; }
  to { background-color: blue; } /* 배경색 변경 → 페인트 단계 필요 */
}

❌ 문제: 배경색 변경 시 브라우저가 다시 페인트 작업을 해야 해서 비용 발생

---

3️⃣ 합성(Compositing)

• 영향받는 속성: transform, opacity
• 설명:
  • 개별 레이어를 GPU가 합성하여 화면에 표시하는 단계
  • 이 단계에서만 변경이 이루어지면, 레이아웃 및 페인트 단계를 건너뛸 수 있어 성능이 가장 좋음
  • GPU 가속이 적용되므로 애니메이션 성능이 향상됨

🟢 예시 (효율적인 애니메이션)

@keyframes goodExample {
  from {
    transform: translateX(0px);
    opacity: 0;
  }
  to {
    transform: translateX(100px);
    opacity: 1;
  }
}

✅ 장점: transform과 opacity는 레이아웃/페인트를 건너뛰고 GPU에서 직접 처리 → 부드러운 애니메이션

---

📌 정리: 애니메이션 속성별 렌더링 단계

렌더링 단계	속성	영향
레이아웃(Layout)	width, height, top, left, right, bottom, margin, padding, position	요소 크기/위치 변경 → 전체 페이지 영향
페인트(Paint)	background, color, box-shadow, border, text-shadow	색상 및 스타일 변경 → 다시 그리기 발생
합성(Compositing)	transform, opacity	GPU가 처리 → 가장 빠르고 부드러움 ✅

---

🚀 최적화 원칙

1️⃣ 애니메이션은 transform과 opacity만 사용
2️⃣ left, top, width 대신 transform: translate() 활용
3️⃣ 복잡한 페인트 연산(box-shadow, background)을 최소화
4️⃣ will-change 속성을 사용해 브라우저에 최적화 힌트 제공

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