코드랩 레퍼런스

transition 본문

CSS

transition

webstoryboy 2016. 6. 25. 15:22
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

크롬 아이콘 파이어폭스 아이콘 사파리 아이콘 오페라 아이콘 안드로이드 아이콘 ios 아이콘 익스플로러6 아이콘 6 익스플로러7 아이콘 7 익스플로러8 아이콘 8 익스플로러9 아이콘 9 익스플로러10 아이콘 10 익스플로러11 아이콘 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이 작동됩니다.

Ad

Comments