CSS3 transition 속성 사용 방법 및 예제

transition CSS 속성은 요소가 두 상태 효과 사이에서 전환할 수 있도록 정의합니다. 이는transition-property，transition-duration，transition-timing-function와transition-delay단축 속성

아래 표는 이 속성의 사용 설명과 버전 기록, 그리고 자바스크립트 스크립트에서의 속성 사용 문법을 설명합니다.

transition 사용 문법

이 속성의 문법은 다음과 같습니다：

transition:　transition1　,　transition2, ... transitionN]　|　initial　|　inherit
　　　　　　　　　　　　where　transition　is:　[　transition-property　|　transition-duration　|　transition-timing-function　|　transition-delay　]

아래 예제는 transition 속성을 사용하는 방법을 설명합니다.

button　{
　　　　background:　#fd7c2a;
　　　　-webkit-transition-property:　background　2s;　/*　Safari에 대해서　3.0+　*/
　　　　transition:　background　2s;　
}
button:hover　{
　　　　background:　#3cc16e;
}

속성 값

다음 표는 이 속성의 값을 설명합니다.

브라우저 호환성

transition 속성의 브라우저 호환성을 참조하십시오. 표에 나타난 숫자는 이 속성을 지원하는 브라우저의 최저 버전 번호를 나타냅니다. 모든 주요 브라우저는 이 속성을 지원합니다.

더 읽기

다음 튜토리얼을 참조하세요：CSS3 Transitions。

관련 속성：transition-delay，transition-duration，transition-property，transition-timing-function。