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 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용안됨 | 사용안됨 | 사용안됨 | 사용안됨 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 |