CSS 트랜지션(Transition) 기초설 > 웹 무료강의

CSS 인터랙션 CSS 트랜지션(Transition) 기초설

페이지 정보

작성자 모던DS
조회 50회

본문

CSS 트랜지션(Transition) 설명

CSS 트랜지션은 CSS 속성의 값이 변경될 때, 그 변화가 즉시 일어나지 않고 일정 시간에 걸쳐 부드럽게 일어나도록 만드는 속성입니다.

transform과 함께 사용하면 훨씬 역동적이고 세련된 사용자 경험(UX)을 제공할 수 있습니다.

1. 기본 개념

트랜지션은 보통 마우스 호버(:hover)나 클릭, 자바스크립트를 통한 클래스 변경 등 상태 변화가 있을 때 작동합니다.

2. 주요 속성 4가지

트랜지션을 제어하는 핵심 속성들입니다. 이를 한 줄로 합쳐서 쓰는 단축 속성(shorthand)을 주로 사용합니다.

속성	설명	예시
transition-property	효과를 적용할 CSS 속성 이름	all, background-color, transform
transition-duration	효과가 지속될 시간 (필수)	0.3s, 500ms
transition-timing-function	변화 속도의 흐름 (가속도)	linear, ease, ease-in-out
transition-delay	효과가 시작되기 전 대기 시간	1s (1초 후 시작)

3. 타이밍 함수 (Timing Function)

변화의 '리듬'을 결정합니다.

ease: 기본값. 천천히 시작해서 빨라졌다가 다시 천천히 끝납니다.
linear: 처음부터 끝까지 일정한 속도로 움직입니다.
ease-in: 천천히 시작해서 점점 빨라집니다.
ease-out: 빠르게 시작해서 점점 느려집니다.
cubic-bezier(n,n,n,n): 개발자가 직접 정교한 속도 곡선을 정의합니다.

4. 단축 속성 사용법

일일이 따로 쓰기보다 한 줄로 깔끔하게 정리하는 것이 관례입니다.

문법: transition: [속성명] [지속시간] [타이밍함수] [대기시간];

CSS

/* 모든 속성에 대해 0.5초 동안 부드럽게 적용 */ .button { background-color: blue; transition: all 0.5s ease; } .button:hover { background-color: red; transform: scale(1.2); }

5. 주의사항 및 팁

숫자 데이터만 가능: 색상, 크기, 위치, 투명도 등 수치로 계산 가능한 속성에만 적용됩니다. display: none에서 block으로 변하는 것은 중간 단계가 없으므로 트랜지션이 작동하지 않습니다.
성능 최적화: 레이아웃에 영향을 주는 width, height, top, left보다는 transform이나 opacity 속성을 사용하는 것이 브라우저 성능(60fps) 면에서 훨씬 유리합니다.
상태 전후에 모두 설정: 트랜지션 속성은 변화가 일어날 원래의 요소(기본 상태)에 작성해야 마우스를 올렸을 때와 뗐을 때 모두 부드럽게 작동합니다.