[CSS] 애니메이션, 트랜지션, 트랜스폼의 차이

뜬금없지만 프론트엔드 개발자이지만 CSS를 잘 다루지 못하는 상태로 취업해서

밑바닥부터 구르고 있다.

통장 잔고를 보면 눈가가 뜨거워진다.

 

애니메이션, 트랜지션, 트랜스폼의 차이.

매번 단편적으로 보고 넘어가버리니 다시 보면 헷갈려서 정리해 보려고 한다.

---

 

CSS의 Animation, Transition 및 Transform은 모두 웹 페이지에서 요소를

시각적으로 개선하기 위해 사용되는 CSS 속성이다.

 

애니메이션 (Animation)

CSS3에서 새롭게 추가된 기능으로, 특정 요소에 대해 애니메이션 효과를 부여하는 방법이다.

요소에 복잡한 시각적 변화를 부여하는 데 사용되며, 일반적으로 사용자가 상호작용하지 않아도 자동으로 실행한다.

@keyframes 규칙을 사용하여 정의하며, 시작 상태와 끝 상태를 정의할 수 있다.

애니메이션 속성에는 애니메이션 이름, 지속시간, 타이밍 함수, 반복 유무 등이 있다.

트랜지션 (Transition)

요소의 상태 변화를 부드럽게 처리하는 방법이다.

예를 들어, 요소의 배경색상이 바뀔 때 즉시 변하는 것이 아니라, 서서히 변하는 효과를 부여하는 것이다.

트랜지션은 hover와 같은 이벤트에 의해 트리거되는데,

이벤트가 발생하면 트랜지션에 정의된 속성에 대해 변화가 일어난다.

트랜스폼 (Transform)
요소의 모양, 크기, 위치 등을 변화시키는 방법이다.

예를 들어, 요소를 회전시키거나, 크기를 조절하거나, 이동시키는 등의 변형을 부여할 수 있다.

트랜스폼은 2D 및 3D 변형을 모두 지원하며, 이를 사용하여 다양한 효과를 부여할 수 있다.

---

정리하자면

 

애니메이션 : 요소에 대해 복잡한 시각적 효과를 주며 상호작용 하지 않아도 정해진 규칙에 따라 자동으로 실행된다.

 

트랜지션 : 요소의 상태 변화를 딱딱하지 않게 부드럽게 변화하게 효과를 주는 방법이다.

 

트랜스폼 : 요소의 모양, 크기, 위치 등을 변형시키는 효과를 준다.