CSS _ 정리 02 : Button, Transition

1. Button

hover : 커서가 버튼에 올려져있는 상태

active : 커서가 버튼을 클릭한 상태

 

2. CSS 애니메이션 이벤트를 지원하는 transition

마우스를 버튼에 올려두었을 때, 버튼의 색이 천천히 변하는 경우가 있다.

이처럼 일정 시간 동안 요소에 변화를 줄 수 있도록 해주는 것이 transition이다.

transition / transition-delay / transition-duration / transition-property / transition-timing-function

 

3. transition을 지원하는 웹 브라우저

다양한 브라우저가 transition을 지원하고, 아래처럼 표시한다.

4.0 -webkit- : chrome

4.0 -moz- : firefox

3.1 -webkit- : mac

 

(2, 3)번에 관해 더 많은 정보는 아래의 링크에서 확인하면 된다.

출처 : http://tcpschool.com/css/css3_transform_transition