[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 속성 설명하기
'programming > html5' 카테고리의 다른 글
[html5] new Audio() 구문 사용법 (0) | 2012.05.21 |
---|---|
[html5] WebM (웹앰) (0) | 2012.05.21 |
[html5] 인라인 요소, 블록 요소 (0) | 2012.05.18 |
[html5] firefox firebug 콘솔 사용하기 (1) | 2012.05.18 |
[html5] 신기능 지원 여부 확인 사이트 standardista (0) | 2012.05.18 |