CSS3 transition-property 속성 사용 방법 및 예제

transition-propertyCSS 속성은 전환 효과가 적용되는 CSS 속성 이름을 지정합니다.

다음 표는 이 속성의 사용 설명과 버전 기록, 그리고 JavaScript 스크립트에서 이 속성의 사용 문법을 설명합니다。

transition-property 사용 문법

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

transition-property:　　[,　, ... ]　|　none　|　all　|　initial　|　inherit
　where　　is a CSS property name

아래 예제는 transition을 사용하는 방법을 보여줍니다.-속성.

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

속성 값

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

브라우저 호환성

transition-property 속성의 브라우저 호환성을 보여주는 표에서의 숫자는 이 속성을 지원하는 브라우저의 최소 버전 번호를 나타냅니다; 모든 주요 브라우저는 이 속성을 지원합니다。

추가로 읽어보세요

다음 튜토리얼을 참조하십시오:CSS3 Transitions。

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