CSS 애니메이션과 트랜지션

트랜지션은 CSS 속성값이 변할 때, 그 변화가 즉시 일어나는 대신 지정된 시간 동안 점진적으로(부드럽게) 일어나도록 하는 기능입니다.

트랜지션이 속성 변화에 대한 부드러운 전환이라면, 애니메이션은 여러 단계에 걸쳐 다양한 속성을 원하는 시간 동안 반복적으로 제어할 수 있는 훨씬 강력한 기능입니다.

트랜지션 간단한 상태 변화: 버튼 호버 효과, 메뉴 확장/축소, 탭 전환 등 두 가지 상태(시작-끝) 간의 부드러운 전환에 적합합니다.

주로 사용자의 마우스 오버(:hover), 클릭(:active), 포커스(:focus) 등 특정 이벤트에 반응하여 요소의 상태가 변할 때 유용하게 사용됩니다.트랜지션 관련...