transition

transition 속성은 요소의 움직임을 정의합니다.

특징	설명
기본 값	transition-property : all transition-duration : 0s transition-timing-function : ease transition-delay : 0s
상속	안됨
애니메이션	안됨
버전	CSS3

Definition

• transition 속성은 요소의 움직임을 정의합니다.

Syntax

transition : transition-property | transition-duration | transition-timing-function | transition-delay | inherit;

/* property | duration을 설정한 경우 */
transition: left 4s;

/* property | duration | delay를 설정한 경우 */
transition: left 4s 1s;

/* property | duration | timing-function | delay를 설정한 경우 */
transition: right 4s ease-in-out 1s;

/* 두개의 요소에게 적용하는 방법 */
transition: left 4s, color 2s;

/* 모든 속성에 적용하는 방법 */
transition: all 0.5s ease-out;

Property

속성 값	설명
transition-property	transition-property 속성은 transition의 적용 여부를 정의합니다.
transition-duration	transition-duration 속성은 요소의 움직임 지속시간을 정의합니다.
transition-timing-function	transition-timing-function 속성은 요소의 움직임 기능을 정의합니다.
transition-delay	transition-delay 속성은 요소의 움직임 시간을 지연합니다.
inherit	transition의 속성 값을 상위요소한테 상속받습니다.

Compatibility

							6	7	8	9	10	11
transition

Sample

transition: left 2s; transition: left 2s 1s; transition: left 2s ease-in-out 1s; transition: left 2s ease-in 1s; transition: all 2s ease-out;

마우스 오버시 transition이 작동됩니다.