[CSS] transition

transition

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

---

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

/* 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 속성은 요소의 움직임 시간을 지연합니다.

호환성(Compatibility)

						6	7	8	9	10	11
transition	사용가능	사용가능	사용가능	사용가능	사용가능	사용안됨	사용안됨	사용안됨	사용안됨	사용가능	사용가능	사용가능	사용가능	사용가능

---