[해피CGI][cgimall] CSS3 Transition 효과내보기

자바스크립트 도움없이 애니메이션 효과를 만들 때 사용합니다. 
즉 변화가 부드러운 애니메이션을 의미합니다.

delay, property, duration, timing-function 의 4가지 속성을 가지고 있으며
property에서 지정한 속성의 값이 변경 될 때 자연스럽게 표현됩니다.

 

transition속성 transition-property : 속성 transition-duration : 지속시간. transitin-timing-function: 지정시간동안 트랜지션 속도

  

사용예) <a href="#" class="footer">해피CGI</a> a { text-decoration:none; } a.footer { padding:10px 20px; background:#0c4da2; } a.footer:hover{ background:#3baee7; }    트랜지션 적용하기 (크롬기준)  a.footer {  padding:10px 20px; background:#0c4da2;  -webkit-transition-property : background; -webkit-transition-duration: 0.5s; -webkit-transition-timing-function: ease; } a.footer:hover{ background:#3baee7; }  백그라운드 속성에 트랜지션을 줬는데,  마우스를 오버했을때만 배경색상이 #3baee7로 변하는 과정에서  애니메이션 효과가 일어나게 됩니다.