<HTML5+CSS3>시간에 따른 변화를 만들어 주는 트랜지션

트랜지션이란 한 스타일에서 다른 스타일로 바뀌는 것을 말합니다. 트랜지션 속성은 브라우저 접두사를 붙여 사용해야 합니다

 

   "transition-property 속성 – 적용할 트랜지션 지정하기"

-트랜지션 효과를 만드는 첫 번째 단계는 CSS 속성 중 어떤 속성에 트랜시션을 적용할 것인지 선택 하는 것입니다. 그 결정을 이 속성이 합니다.

 

속성 값

(1) none : 트랜지션 동안 아무 속성도 바뀌지 않습니다.

(2) all : all값을 사용하거나 transition-property를 생략할 경우 요소의 모든 속성이 트랜지션 대상이 됩니다. 기본 값입니다.

(3)속성이름: 트랜지션 효과를 적용할 속성 이름을 지정합니다. ex) 배경색만 바꿀것인지 width값을 바꿀것인지 원하는 것을 골라 지정 가능 쉼표로 구분하여 나열 (여러개일 경우)

 

이 속성의 값은 다음처럼 다양하게 지정할 수 있습니다.

ex) transition-property:all; -> 모든 속성에 트랜지션 적용

transition-property:background-color; ->요소의 배경색에 트랜지션 적용

transition-property:background-color,border; ->요소의 배경색과 테두리에 트랜지션 적용

 

transition-duration 속성 – 트랜지션 진행 시간 지정하기

-이 속성은 트랜지션 진행될 시간을 지정합니다. transition-property에서 트랜지션 대상을 지정했다면, 진행 시간을 지정해야 그 시간 동안 속성이 자연스럽게 바뀌는 애니메이션 효과를 만들 수 있습니다. 여러개의 일 경우 쉼표로 구분합니다.

단위 : 초 (s) OR 밀리초 (millseconds) .

기본 값 : 0s

 

ex) transtition-duration:1s; ->트랜지션 진행 시간 1초

 

transition-timing-function 속성 – 트랜지션 형태 선택하기

-트랜지션 효과의 시작과 중간, 그리고 끝에서의 속도 곡선을 선택합니다. 이 곡선은 베지에 곡선을 이용해 표현합니다.

% 베지에 곡선은 n개의 점을 이용해 (n-1)차 곡선을 만들어 내는 함수이다.

 

속성 값

(1) linear : 시작에서 끝까지 똑같은 속도로 트랜지션 진행

(2) ease : 천천히 시작->점점 빨라짐->마지막에 천천히 (기본값)

(3) ease-in : 트랜지션 시작을 느리게 한다

(4) ease-out : 트랜지션을 느리게 끝낸다

(5) ease-in-out : 느리게 시작하고 느리게 끝낸다.

(6) cubic-bezier(n,n,n,n) : 직접 베지에 함수 정의 사용 n에서 사용할수 있는 값:0~1사이

 

트랜지션을 처음부터 끝까지 일정한 속도로 진행한다면 linear로 지정

ex)transition-timing-function:linear ->일정한 속도로 트랜지션 진행

 

transition-delay속성 – 지연 시간 설정하기

-이 속성은 트랜지션 효과를 언제부터 시작할 것인지 정하는 지연 시간을 설정합니다.

즉, 지정하는 시간만큼 기다렸다가 트랜지션이 시작됩니다.

사용할 수 있는 값 : 초 OR 밀리초 (기본 값 : 0 s )

 

ex)transition-dealy:2s; ->딜레이 2초

 

transition 속성 – 트랜지션 속성 한꺼번에 표시하기

-이러한 속성들은 접두사를 꼭 붙여야하는데

-webkit-접두사와 –moz- 접두사만 붙이더라도 각 속성당 3줄의 소스를 사용하게 된다 때문에 트랜지션 속성을 모두 표기해야 할 경우 소수가 길어진다.

이 속성을 사용하면 한줄로 표기할 수 있다.

transition속성을 사용할 때 transition-duration 속성은 반드시 표기해야 한다.

why ??  트랜지션 실행 시간을 지정하지 않으면 기본 값 0이되어 트랜지션 효과를 볼 수 없다.

ex) transition:property 값 | duration 값 | timing-fuciton 값 | delay 값 ; (기본 형)

 

속성 값

(1) property　: 트랜지션이 적용될 css 속성 이름이다 .none, all , 속성이름 , 값을 사용

(2) duration : 트랜지션 실행 시간이다 초나 밀리초로 값 지정

(3) timing-fuciton : 트랜지션 효과의 곡선 형태입니다. transition-timing-function 속성의 값을 사용

(4) delay : 트랜지션 지연 시간 초나 밀리초로 값 지정

 

다음 예는,요소의 모든 부분에 1초동안 linear트랜지션 적용 ( 지연시간이 0s 일 경우 지정 x)

ex) transition:all 1s linear; ->요소의 모든 부분에 1초 동안 linear 적용