VI. 트랜지션과 애니메이션 - 2. 트랜지션

앞에서는 단순한 변형을 배웠다. 이번에 배울 트랜지션은 하나의 스타일을 완전히 다른 스타일로 바꾼다.

트랜지션에서는 스타일이 바뀌는 시간을 조절하여 자바스크립트를 사용하지 않고도 애니메이션 효과를 낼 수 있다.

 

트랜지션이란

트랜지션은 웹 요소의 배경색으 바꾸거나 도형의 테두리를 사각형에서 원형으로 바꾸는 것처럼 스타일 속성이 바뀌는 것을 말한다.

 

트랜지션과 속성

CSS3 트랜지션을 실행하려면 표와 같이 여러 가지 속성을 사용해야 한다. 이제부터 트랜지션의 속성을 하나하나 알아보겠다.

종류	설명
transition-property	트랜지션의 대상을 지정한다.
transition-duration	트랜지션을 실행할 시간을 지정한다.
transition-timing-function	트랜지션의 실행 형태를 지정한다.
transition-delay	트랜지션의 지연 시간을 지정한다.
transition	상술한 속성을 한꺼번에 정한다.

 

트랜지션의 대상을 지정하는 transition-property 속성

트랜지션을 만들려면 맨 먼저 transition-property 속성을 사용하여 어떤 속성에 트랜지션을 적용할 것인지 대상을 먼저 지정해야 한다.

transition-propety: all | none | <속성 이름>

종류	설명
all	all값을 사용하거나 transition-property를 생략할 경우 요소의 모든 속성이 트랜지션 대상이 된다. 기본값이다.
none	트랜지션을 하는 동안 아무 속성도 바뀌지 않는다.
속성 이름	트랜지션 효과를 적용할 속성을 지정한다. 예를 들어 배경색만 바꿀 것인지, width값을 바꿀 것인지 원하는 대상만 골라 지정할 수 있다. 속성이 여럿일 경우 쉼표(,)로 구분하여 나열한다.

예시는 다음과 같다

transition-prpoerty: width, height;

 

 

트랜지션의 진행 시간을 지정하는 transition-duration 속성

transition-property에서 트랜지션 대상을 지정했다면 다음으로 진행 시간을 지정해야 속성이 자연스럽게 바귀는 애니메이션 효과를 만들 수 있다.

진행 시간은 transition-duration 속성으로 지정할 수 있다.

지정할 수 있는 시간 단위는 초 또는 밀리초이다.

트랜지션의 대상 속성이 여러 개라면 진행 시간도 쉼표로 구분해서 여러 개를 지정할 수 있다.

transition-property: width, height;
transition-duration: 2s, 1s;

 

 

트랜지션의 속도 곡선을 지정하는 transition-timing-function 속성

이 속성을 사용하면 트랜지션 효과의 시작, 중간, 끝에서의 속도를 지정해 전체 속도 곡선을 만들 수 있다.

속도 곡선은 미리 정해진 키워드나, 베지에 곡선을 이용해 표현한다.

transitiln-timing-function: linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier(n,n,n,n)

 

종류	설명
ease	처음에는 천천히 시작하고 점점 빨라지다가 마지막엔 천천히 끝냅니다. 기본값입니다.
linear	시작부터 끝까지 똑같은 속도로 진행합니다.
ease-in	느리게 시작합니다
ease-out	느리게 끝냅니다
ease-in-out	느리게 시작하고 느리게 끝냅니다.
cubic-bezier(n,n,n,n)	베지에 함수를 정의해서 사용합니다. 이때 n값은 0~1 사이만 사용할 수 있습니다.

예를 들어 처음부터 끝까지 일정한 속도로 트랜지션을 진행하려면 다음과 같이 속성값을 linear로 지정한다.

transition-timing-function: linear;

 

트랜지션의 지연 시간을 설정하는 transition-delay 속성

이 속성은 트랜지션 효과를 언제부터 시작할 것인지 설정한다.

이 속성을 사용하면 지정한 시간만큼 기다렸다가 트랜지션이 시작된다.

사용할 수 있는 값은 초(s)나 밀리초(ms)이며, 기본값은 0이다.

transition-delay: <시간>

 

트랜지션의 속성을 한꺼번에 표기하는 transition 속성

지금까지 여러 가지 트랜지션 속성을 사용했는데, 트랜지션의 적용 대상이 전체이고 각각의 진행 시간이 같다면 transition 속성으로 한꺼번에 지정하는 것이 편리하다.

transition: <transition-property값> | <transition-duration값> | <transition-timing-function값> | <transition-delay값>

주의해야 할 것은 시간값을 사용하는 속성이 두개이므로, 

시간값이 두개 입력된다면 앞에 오는 시간값을 transition-duration 속성으로, 뒤에 오는 시간값을 transition-delay 속성으로 간주한다는 점을 기억하자.