CSS 애니메이션과 transition의 차이를 설명해주세요.

CSS transition은 특정 속성 값이 A에서 B로 바뀔 때 그 변화를 부드럽게 보간하는 기능이고, animation은 @keyframes로 정의한 여러 단계의 움직임을 독립적으로 실행하는 기능입니다. 즉 transition은 상태 변화에 반응하고, animation은 시간 축을 가진 시나리오를 실행한다고 볼 수 있습니다.

핵심 개념

• transition은 hover, class 변경, media query 등 속성 변화가 있어야 시작됩니다.
• animation은 keyframe, 반복 횟수, 방향, 지연 등을 갖고 자동 실행될 수 있습니다.
• 둘 다 가능한 경우에는 단순 상태 변화는 transition, 복잡한 반복/단계 동작은 animation이 적합합니다.

동작 방식 또는 판단 기준

이 주제를 이해할 때는 다음 순서로 보면 실무 적용이 쉬워집니다.

1. 무엇을 해결하려는가: 성능, 표현력, 안정성, 접근성 중 어떤 문제를 줄이려는지 확인합니다.
2. 전제 조건은 무엇인가: 정렬 여부, 브라우저 지원, 네트워크 특성, 동시성 조건처럼 성립해야 하는 조건을 점검합니다.
3. 비용은 어디서 발생하는가: 시간 복잡도, 메모리, 캐시, 재시도, 렌더링 비용처럼 병목 지점을 나눠 봅니다.
4. 실패 시 어떤 문제가 생기는가: 잘못 적용했을 때의 버그나 운영 리스크를 함께 고려합니다.

실제 예시

.button {
  transform: translateY(0);
  background: #2563eb;
  transition: transform 160ms ease, background 160ms ease;
}
.button:hover {
  transform: translateY(-2px);
  background: #1d4ed8;
}

@keyframes skeleton-loading {
  from { background-position: 100% 0; }
  to { background-position: -100% 0; }
}
.skeleton {
  background: linear-gradient(90deg, #eee, #f8f8f8, #eee);
  background-size: 200% 100%;
  animation: skeleton-loading 1.2s infinite linear;
}

실무에서 주의할 점

• width, height, top, left처럼 layout을 다시 계산하는 속성을 과하게 애니메이션하면 성능이 나빠집니다.
• 무한 애니메이션은 배터리와 접근성에 영향을 줍니다. prefers-reduced-motion을 고려해야 합니다.
• transition과 animation이 같은 속성을 동시에 제어하면 우선순위와 최종 상태가 혼란스러워질 수 있습니다.

실무 적용 가이드

• 가능하면 transform, opacity 중심으로 움직임을 만듭니다.
• 마이크로 인터랙션에는 짧은 transition을, 로딩/강조/복잡한 장면에는 keyframes를 사용합니다.
• 모션은 기능을 돕는 수준으로 제한하고, 사용자 설정을 존중합니다.

함께 연결해서 보면 좋은 키워드

CSS, transition, animation, keyframes, prefers-reduced-motion

정리

CSS transition은 특정 속성 값이 A에서 B로 바뀔 때 그 변화를 부드럽게 보간하는 기능이고, animation은 @keyframes로 정의한 여러 단계의 움직임을 독립적으로 실행하는 기능입니다. 다만 개념 자체보다 중요한 것은 적용 조건과 한계를 함께 이해하는 것입니다. 작은 예제에서는 단순해 보여도 실제 서비스에서는 성능, 보안, 유지보수성, 접근성 요구사항이 함께 얽히므로, 문제의 성격을 먼저 파악한 뒤 적절한 도구로 선택하는 것이 좋습니다.