CSS3 transition 속성

transition 속성은 아래와 같음

/* For Safari 3.1 to 6.0 */

-webkit-transition-property: width; 

// transition을 설정할 css 속성, 모든 속성에 적용할 경우는 all)

-webkit-transition-duration: 1s; 

// transition이 지속되는 시간

-webkit-transition-timing-function: linear; 

// transition 변화의 움직임,  linear , ease , ease-in , ease-out , ease-in-out 등

-webkit-transition-delay: 2s; 

// transition이 일어나기 전 대기 시간

/* Standard syntax */

transition-property: width;

transition-duration: 1s;

transition-timing-function: linear;

transition-delay: 2s;

아래처럼 한줄로 작성할 수 있음

-webkit-transition: width 1s linear 2s; /* For Safari 3.1 to 6.0 */

transition: width 1s linear 2s;

transition 속성은 아직 모든 브라우저에서 구현할 수 없어 각 브라우저별로 새로운 css 기능을 구현하도록 지원해 주는 접두사를 써줘야 함

transition : background .2s ease-in .2s ; 

-webkit-transition : background .2s ease-in .2s ; ​

-moz-transition : background .2s ease-in .2s ; ​

-o-transition : background .2s ease-in .2s ; ​

​-ms-transition : background .2s ease-in .2s ;​

-webkit- 웹킷 엔진 , 사파리 , 크롬

-moz- 모질라 계열 , 파이어폭스

-o- 오페라 

-ms- 익스플로러

transition 적용 사이트

http://nettuts.s3.amazonaws.com/581_cssTransitions/demos.html

http://everhooddesign.com/node/39

http://css3.bradshawenterprises.com/transitions/