[CSS] 애니메이션

🎨 CSS 애니메이션 공부 가이드

CSS 애니메이션은 @keyframes과 animation 속성을 사용해 요소의 상태를 점진적으로 변경하는 방식

✅ 1. 알아야 할 기본 개념

1. 애니메이션 속성

   • animation-name: 애니메이션 이름
   • animation-duration: 실행 시간
   • animation-timing-function: 속도 곡선 (ease, linear, ease-in-out 등)
   • animation-delay: 시작 시간 지연
   • animation-iteration-count: 반복 횟수 (infinite 가능)
   • animation-direction: normal, reverse, alternate 등
   • animation-fill-mode: 애니메이션 전후 상태 (forwards, backwards)

2. @keyframes

   • 애니메이션 동작 정의

   @keyframes fadeIn {
     from { opacity: 0; }
     to { opacity: 1; }
   }

3. 트랜지션 (transition)

   • 한 번만 변화하는 애니메이션에 적합

   .box {
     transition: all 0.5s ease-in-out;
   }

🔥 2. 알면 좋은 심화 개념

1. CSS vs JavaScript 애니메이션 차이

   • CSS: 간단하고 최적화된 애니메이션 (GPU 가속)
   • JavaScript: 복잡한 로직 제어 가능 (requestAnimationFrame 활용)

2. 성능 최적화

   • transform과 opacity를 사용하면 GPU 가속 적용
   • left, top 대신 translate 사용 (paint를 최소화)
   • will-change: transform;으로 브라우저에 최적화 힌트 제공

3. 애니메이션 속도 곡선 이해

   • ease: 느려졌다 빨라짐
   • ease-in: 천천히 시작
   • ease-out: 천천히 끝남
   • ease-in-out: 천천히 시작하고 끝남
   • cubic-bezier(n, n, n, n): 커스텀 곡선 지정 가능

🚀 3. CS적으로 효율적인 구현 방법

1. 컴포지팅 최적화 (transform & opacity 활용)

   .box {
     transform: translate3d(0, 0, 0); /* GPU 가속 유도 */
     will-change: transform, opacity;
   }

2. 렌더링 단계 고려

   • layout → paint → composite 순서
   • layout을 유발하는 width, height 변화는 최소화
   • paint를 줄이기 위해 복잡한 박스 쉐도우나 배경 제거

3. CSS 변수 (--var) 활용

   • 애니메이션 값 재사용

   :root {
     --duration: 0.5s;
   }
   .box {
     animation: fadeIn var(--duration) ease-in-out;
   }

🎯 4. 애니메이션 렌더링 순서

1. HTML/CSS 파싱 → 스타일 적용 → 레이아웃 계산 → 페인트 → 합성
2. 최적화 원칙
   • opacity & transform 사용 → composite 단계에서 처리 가능
   • 레이아웃 트리거 (width, height, margin) 피하기 브라우저가 애니메이션을 렌더링할 때 레이아웃(Layout) → 페인트(Paint) → 합성(Compositing) 순서로 진행
     각 단계에서 영향을 받는 CSS 속성이 다르며, 이를 최적화하는 것이 성능을 높이는 핵심 !!!

💡 CSS 애니메이션을 만들 때 기억할 점은?

1️⃣ transform과 opacity를 활용하면 성능이 좋아진다
2️⃣ top, left 대신 translate()를 사용하자
3️⃣ animation-timing-function을 적절히 조절하면 더 자연스럽다