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

보다 자세한 사항은 이곳에서 확인해 볼 수 있다. 영어로 되어 있지만 더 예쁘고 자세히 잘 나와 있음.