CSS3 Transition 속성
CSS3의 transition 속성은 동적으로 CSS 속성값 (색상, 크기, 투명도 등)을 바꿀 때 플래시나 자바스크립트의 도움없이 자연스러운 애니메이션 효과를 만들 때 사용한다. transition 속성은 다시 property, duration, timing-function, delay의 4가지 세부 속성을 가지며, property에서 지정한 속성의 값이 변경될 때 애니메이션을 통해서 자연스럽게 변경된다.
- property – 애니메이션이 적용될 속성 (width, height, background-color 등)
- duration – 애니메이션 지속 시간 (0.4s 는 0.4초를 의미)
- timing-function – 가속곡선 (liniar | ease | ease-in | ease-out | ease-in-out 등)
- delay – 애니메이션이 시작되기 전 딜레이
css 작성시에는 border나 shadow 속성과 마찬가지로 transition 속성을 저 순서대로 써서 한 줄에 정의할 수 있다.
div.toAnimate { transition: all 0.4s ease-in-out;}
또한 현재(2012년 9월)는 IE를 제외한 모든 브라우저에서는 실험적으로 지원하고 있어서 제조사마다 접두사를 붙여야 한다. 파이어폭스는 -moz-, 웹킷계열은 -webkit-, 오페라는 -o-라고 앞에 붙여주어야 한다. IE에서는 transition을 아예 지원하지 않고 있다.
<div id="iddh"
style="
border: 1px solid grey;
border-radius: 6px;
font-size: 10pt;
padding: 3px;
background-color: white;
-webkit-transition: all 0.8s ease-in-out;
-moz-transition: all 0.8s ease-in-out;
-o-transition: all 0.8s ease-in-out;
transition: all 0.8s ease-in-out;"
onmouseover="this.style.backgroundColor='gold';this.style.color='green';"
onmouseout="this.style.backgroundColor='white';this.style.color='black';">SAMPLE</div>
아래는 위 코드로 간단히 적용해본 트랜지션 예제이다. 마우스를 올리면 블럭의 색상이 변하게 된다.
SAMPLE
보다 자세한 사항은 이곳에서 확인해 볼 수 있다. 영어로 되어 있지만 더 예쁘고 자세히 잘 나와 있음.
