HTML 트랜지션 사용법

트랜지션(transition) 트랜지션은 CSS3의 대표적인 애니메이션 도구이다. 트랜지션은 자바스크립트 단에서 실행되는 것이 아닌 웹킷 내부에서 C++로 작성된 코드로 실행되기 때문에 오버헤드가 전혀 없는 장점이 있다.

CSS를 잘 이용하면 C++로 작성한 것 같은 매우 빠른 처리 속도를 얻을 수 있다. 앞에 소스는 transform의 값이 변할 때 2초 동안 바뀐 값으로 서서리 값을 맞추라는 설정이다.

자바스크립트에서는 다음과 같은 코드를 사용한다. 앞의 webkit 접두어는 웹킷 기반 브라우저에서만 사용할 수 있다는 뜻이다.

파이어 폭스는 -moz-, 인터넷 익스플로러 -m-등을 사용한다. CSS에 붙는 접두어를 다르게 하여 여러 번 코딩해서 모든 브..........