[CSS3] transition (스타일로 효과 넣기)

 최근에 알게된 기능이다.

천천히 메뉴가 열린다던지 하는 효과는 나는 당연히 자바스크립트로 CSS 스타일을 수치를 하나씩 조절해야한다라고 생각을 하였는데.

transition 스타일을 이용하면 된다고한다. 

하지만 역시 이러한 기능은 어느정도 버전 호환성에 문제가 발생하게 되는데.

IE10 부터 제대로 지원이된다고 한다. 또한, 낮은 버전의 기타 브라우저는 웹킷기반의 스타일로 사용하면 된다고 한다.

웹킷은 기존의 transition을

-webkit-transition 으로 대체해서 작성하면된다.

모질라 재단의 사이트 : https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions

솔직하게 위 사이트보다 설명을 더 잘할 자신이 없으니 메모성 포스팅이다.

간단하게 요약하자면 transition스타일을 적용하면 transition이 대상한 스타일에 대해서 변화가 발생할 시에 transition에 지정한 규칙대로 천천히 변화하도록 애니메이션을 주는 아주 똑똑한 스타일이다.