[CSS] 트랜지션과 애니메이션의 차이점

1. 복잡성과 유연성:
   - 트랜지션: 초기 상태와 최종 상태만을 정의할 수 있어 비교적 단순합니다[1].
   - 애니메이션: 여러 중간 단계(keyframes)를 정의할 수 있어 더 복잡하고 다양한 변화를 표현할 수 있습니다[1].

2. 실행 방식:
   - 트랜지션: 특정 트리거(예: hover)에 의해 실행되며, 트리거가 제거되면 원래 상태로 돌아갑니다[1].
   - 애니메이션: 페이지 로드 시 자동으로 실행될 수 있으며, 지정된 횟수만큼 또는 무한히 반복될 수 있습니다[1][4].

3. 제어 수준:
   - 트랜지션: 시작과 끝 상태 사이의 변화를 부드럽게 만들어주지만, 중간 과정을 세밀하게 제어하기 어렵습니다[3].
   - 애니메이션: @keyframes를 사용하여 세부적인 움직임을 시간 단위로 제어할 수 있으며, 전체 애니메이션의 재생, 정지, 반복을 조절할 수 있습니다[4].

4. 상태 의존성:
   - 트랜지션: 요소의 상태 변화(예: hover, active)에 따라 작동합니다[4].
   - 애니메이션: 요소의 상태 변화와 무관하게 독립적으로 실행될 수 있습니다[4].

5. 사용 목적:
   - 트랜지션: 간단한 상태 변화나 UI 요소의 반응을 부드럽게 만드는 데 적합합니다[2].
   - 애니메이션: 더 복잡하고 연속적인 동작이나 스토리텔링이 필요한 경우에 사용됩니다[1].

이러한 차이점들로 인해, 트랜지션은 주로 간단한 상호작용 효과에 사용되고, 애니메이션은 더 복잡하고 독립적인 동작을 구현하는 데 사용됩니다.