CSS3 트랜지션

CSS3 트랜지션

 

트랜지션은 어떠한 조건에 의해 다른 상태로 변화하는 것을 의미합니다.

 

트랜지션 관련 속성

속성	설명
transition	변화와 관련된 속성 값을 지정함
transition-delay	일정 시간 동안 지연 후 변화하는 속성임
transition-duration	변화의 시작과 끝가지의 시간을 의미함
transition-property	변화시킬 속성의 이름을 의미함
transition-timing-function	변화의 속도 조절을 의미함

 

트랜지션 속성 지정

☞ 어떠한 이벤트에 스타일의 변화를 줄 것인지를 지정해 줍니다.

☞ 변화를 주고자 하는 속성의 처음 상태와 최종 상태를 지정해 줍니다.

☞ transition 속성들을 사용하여 움직임의 속도나 딜레이 시간을 지정해 줍니다.

☞ transition-property 속성과 transition-duration 속성은 가장 기본이 되는 속성입니다.

transition-property 속성은 변화시킬 속성의 이름을 값으로 갖고 있습니다.

transition-duration 속성은 지정한 속성의 스타일이 변화하기 시작하여 최종 상태로 변화하기까지의 시간을 값으로 갖고 있습니다.

 

트랜지션 요소의 변화 지정 예제

 

transition-delay 속성

스타일이 변화하기 전 대기 시간을 지정해야 할 경우 사용하며 값의 단위는 초를 사용합니다.

 

transition-timing-function 속성

변화하는 속도 조절에 적용하는 속성입니다.

 

transition-timing-function 속성의 값

값	설명
ease	기본값 cubic-bezier(0.25, 0.1, 0.25, 1.0)
linear	처음부터 끝까지 같은 속도로 변화함 cubic-bezier(0.0, 0.0, 1.0, 1.0)
ease-in	시작은 느리고 점점 빠른 속도로 변화함 cubic-bezier(0.42, 0, 1.0, 1.0)
ease-out	시작은 빠르고 점점 느린 속도로 변화함 cubic-bezier(0, 0, 0.58, 1.0)
ease-in-out	시작부터 중간까지 점점 빨라지고 중간에서 끝까지 점점 느려짐 cubic-bezier(0.42, 0, 0.58, 1.0)

 

트랜지션(transition) 변화의 대기 시간 및 속도 지정 예제

 

트랜지션(transition)

transition 속성을 사용하여 한번에 값을 지정할 수 있습니다.

형식

transition: transition-property값   transition-duration값   transition-timing-function값   transition-delay값

트랜지션(transition) 속성 지정 예제

 

트랜지션 실습 프로그램