[CSS3] CSS3 Transitions

transition-property

변화가 일어날 속성을 명시합니다. 쉽표(,)로 구분하여 여러개의 속성을 동시에 지정할 수 있습니다.

 

transition-duration

변화가 일어나는 시간 간격을 명시합니다. 기본값은 0이기 때문에 이 값을 표시를 해줘야 부드러운 변화 모습을 볼 수 있습니다. 음수값을 지정하면 0으로 인식됩니다.

div {opacity:0; transition-property: opacity; transition-duration: 1s;}

webkit,moz,마우스올려보기
transition-property: opacity;
transition-duration: 1s;

 

 

 

transition-timing-function

변화의 중간 과정에서 움직임이 어떻게 계산되는지를 정합니다. 보통 easing이라고도 불립니다. 미리 정의되어 있는 단어를 사용하거나 cubic-bezier 함수를 사용할 수 있습니다.

div {transition-timing-function: ease;}

 : ease

webkit,moz,마우스올려보기
transition-timing-function: ease;
transition-duration: 0.5s;

 : linear

webkit,moz,마우스올려보기
transition-timing-function: linear;
transition-duration: 0.5s;

 : ease-in

webkit,moz,마우스올려보기
transition-timing-function: ease-in;
transition-duration: 0.5s;

 : ease-out

webkit,moz,마우스올려보기
transition-timing-function: ease-out;
transition-duration: 0.5s;

 : ease-in-out

webkit,moz,마우스올려보기
transition-timing-function: ease-in-out;
transition-duration: 0.5s;

 

 

transition-delay

변화가 시작되기 전까지의 시간을 정할 수 있습니다. 기본값은 0 입니다. 

 

Animatable properties

 : color

webkit,moz,마우스올려보기

 : background-color

webkit,moz,마우스올려보기

 : border-color

webkit,moz,마우스올려보기

 : outline-color

webkit,moz,마우스올려보기

 

 

 

length, percentage

 : font-size

webkit,moz,마우스올려보기

 : text-indent

webkit,moz,마우스올려보기

 : letter-spacing

webkit,moz,마우스올려보기

 : word-spacing

webkit,moz,마우스 올려보기

 : line-height

webkit,moz,마우스올려보기

 : border-width

webkit,moz,마우스올려보기

 : outline-width

webkit,moz,마우스올려보기

 : width

webkit,moz,마우스올려보기

 : height

webkit,moz,마우스올려보기

 : margin

마우스올려보기

 : padding

마우스올려보기

 : left

마우스
올려보기

 : right

마우스
올려보기

 : top

마우스
올려보기

 : bottom

마우스
올려보기

number

 : opacity

마우스올려보기

 : font-weight

마우스올려보기

visibility

 : visibility

마우스올려보기

 : Not listed

background-image, crop, grid-*, text-shadow, vertical-align, z-index, zoom