programming/html5

[css3] Transition 속성 설명하기

labj 2012. 5. 21. 16:17

[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 속성 설명하기