Transition

관련 사이트 모음.



개요

트랜지션(transition)이란 '장면이 바뀌는 과정'을 말합니다. 예를 들면 A장면에서 B장면으로 바뀌는 과정 정도로 이해하면 됩니다. CSS3에서는 장면과 장면 사이를 부드럽게 전환시킬 수 있는 트랜지션을 지원합니다. 트랜지션 속성은 다음과 같습니다.

트랜지션 속성
속성 설명
transition-property 트랜지션을 설정할 CSS 속성을 명시합니다. 개별 속성이 아니라 모든 속성에 적용할 경우 'all'을 사용합니다.
transition-duration 트랜지션이 지속되는 시간을 의미합니다. 기본 값은 0이고, 양수값을 사용할 수 있습니다.
transition-timing-function 트랜지션 변화 시의 움직임을 설정합니다. linear, ease, ease-in, ease-out, ease-in-out 등의 키워드를 사용합니다.
transition-delay 트랜지션이 일어나기 전 대기 시간을 설정합니다. 대기 시간이 지나면 트랜지션이 일어납니다.

transition 역시 background나 font처럼 속기형 작성법이 존재합니다. background와 마찬가지로 속성을 생략하면 기본 값이 적용됩니다.

tranistion: property | duration | timing-function | delay;

ex) transition:background-position .2s ease-in .2s;

위 예제를 해석해 보면 "0.2초가 지난 다음에 배경 위치(background-position)를 안쪽으로부터 서서히(ease-in) 0.2초 동안 트랜지션되도록 장면 전환하라" 입니다.

easing 키워드와 설명
키워드 설명
Linear 갑자기 빨라지거나 느려지지 않고, 시작부터 끝까지 같은 속도로 움직입니다.
Ease-in 시작(in) 부분에서는 느리게 움직이다가 끝(out) 부분으로 갈수록 빨라집니다.
Ease-out 시작(in) 부분에서는 빠르게 움직이다가 끝(out) 부분으로 갈수록 느려집니다.
Ease-in-out 움직임이 시작(in) 부분과 끝(out) 부분에서 서서히 움직입니다. ease-in과 ease-out이 섞인 것처럼 보입니다.