CSS3 Transitions Example

W3C CSS Transitions Module Level 3(working draft) 예제입니다. 스펙이 완성되지 않아서 제조사 접두어(-moz, -o-, -webkit-)를 사용하였습니다.

transition-property

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

transition-duration

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

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

Toggle opacity between 1 and 0

transition-timing-function

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

div {
	transition-timing-function: ease;
}

ease

Toggle left between 0 and 10em

linear

Toggle left between 0 and 10em

ease-in

Toggle left between 0 and 10em

ease-out

Toggle left between 0 and 10em

ease-in-out

Toggle left between 0 and 10em

transition-delay

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

Animatable properties

color

(text) color

Toggle color between #0c0 and #00c

background-color

Toggle background-color between #0c0 and #00c

border-color

Toggle border-color between #0c0 and #00c

outline-color

Toggle outline-color between #0c0 and #00c

length, percentage

font-size

Toggle font-size between 1em and 2em

text-indent

Toggle text-indent between 0 and 1em

letter-spacing

Toggle letter-spacing between 0 and 0.5em

word-spacing

Toggle word-spacing between 0 and 1.5em

line-height

Toggle line-height between 1.2 and 2.4

border-width

Toggle border-width between 2px and 10px

outline-width

Toggle outline-width between 2px and 10px

width

Toggle width between 5em and 2em

height

Toggle height between 5em and 2em

margin

Toggle margin between 0 and 2em

padding

Toggle padding between 0 and 2em

left

Toggle left between 0 and 80%

right

Toggle right between 0 and 80%

top

Toggle top between 0 and 80%

bottom

Toggle bottom between 0 and 80%

number

opacity

Toggle opacity between 1 and 0

font-weight

Toggle font-weight between 100 and 700

visibility

visibility

Toggle visibility between visible and hidden

Not listed

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