[css3] Transition 속성 설명하기

[css3] Transition 속성 설명하기

요소를 움직이는 장면이 부드럽게 바뀌도록 css3 의 Transition을 적용합니다.

트랜지션을 적용할 속성은 '배경이미지'입니다. 아직 브라우저에 적용되지 않았습니다.

background: 

url(../images/banner-arrow.png) no-repeat -100px 140px, 

url(../images/banner-photo.png) no-repeat -40px 220px, 

url(../images/banner-09.png) no-repeat -20px -380px,

url(../images/banner-bg.png) no-repeat 0 0;

transition: background-position .2s ease-in .2s;

테스트를 위해서 웹 브라우저 제조사 식별코드인 Vender Prefix를 적용합니다. (파이어폭스의 경우)

-moz-transition: background-position .2s ease-in .2s;

웹브라우저별 Vender Prefix

웹브라우저	Vender Prefix
모질라 계열(파이어폭스)	-moz-
웹킷 엔진 사용 (사파리, 크롬)	-webkit-
오페라	-o-
익스플로러	-ms-
콘쿼러 웹 브라우저	-khtml-

[css3] Transition 속성 설명하기