🌱 기초 프론트엔드
CSS 트랜지션이 뭔가요?
쉽게 이해하기
문을 열 때 천천히 스르륵 열리는 자동문을 떠올려보세요. 갑자기 '탁' 열리는 게 아니라 부드럽게 움직이죠. CSS 트랜지션도 마찬가지로 색상, 크기, 위치 같은 것들이 변할 때 갑자기 변하지 않고 부드럽게 변화하도록 만들어줍니다.
핵심 정리
CSS 속성이 변할 때 부드럽게 변화하도록 만드는 기능입니다.
자세히 알아보기
웹사이트를 보다 보면 버튼 위에 마우스를 올렸을 때 색이 서서히 바뀌거나, 메뉴가 부드럽게 나타나는 걸 본 적 있으실 거예요. 이런 효과가 바로 CSS 트랜지션입니다.
CSS 트랜지션은 어떤 CSS 속성이 변할 때, 그 변화를 즉시 적용하지 않고 일정 시간에 걸쳐 부드럽게 변화시킵니다. 예를 들어 버튼의 배경색이 파란색에서 빨간색으로 바뀔 때, 0.3초 동안 서서히 색이 변하도록 만들 수 있어요.
실무에서는 사용자 경험을 개선하기 위해 많이 씁니다. 버튼에 hover 효과를 줄 때, 모달창이 나타날 때, 이미지가 확대될 때 등 다양한 상황에서 사용됩니다. transition 속성으로 '어떤 속성을', '얼마 동안', '어떤 속도로' 변화시킬지 정할 수 있습니다.
너무 많은 트랜지션을 쓰면 웹사이트가 느려 보일 수 있으니, 사용자의 주목이 필요한 곳에만 적절히 사용하는 게 좋습니다.