CSS 트랜지션-프로퍼티 속성

정의와 사용법

transition-property 속성은 전환 효과를 적용하는 CSS 속성 이름을 정의합니다. (지정된 CSS 속성이 변경될 때, 전환 효과가 시작됩니다).

ヒント:전환 효과는 일반적으로 사용자가 마우스 포인터를 요소에 가져다둘 때 발생합니다.

주석:항상 설정하세요 transition-duration 속성이 없으면 시간이 0으로 설정되지 않아 전환 효과가 발생하지 않습니다.

다른 것도 참조하세요:

CSS 강의:CSS 전환

HTML DOM 참조 가이드:transitionProperty 속성

예제

div 요소에 마우스 포인터를 두면, 요소의 너비를 원활하게 변경하는 전환 효과가 발생합니다:

div {
  transition-property: width;
}

개인적으로 시도해 보세요

CSS 문법

transition-property: none|all|property;

속성 값

값 설명
none 过渡 효과를 받지 않는 속성이 없습니다.
all 모든 속성이过渡 효과를 받습니다.
property 过渡 효과를 적용하는 CSS 속성 이름 목록을 정의합니다. 목록은 쉼표로 구분됩니다.

기술 세부 사항

기본 값: all
thừa kế: no
버전: CSS3
JavaScript 문법: object.style.transitionProperty="width,height"

브라우저 지원

표에 표시된 숫자는 이 특성을 완전히 지원하는 첫 번째 브라우저 버전입니다.

prefix를 사용하는 첫 번째 버전의 숫자는 -webkit-, -moz-, 또는 -o-로 표시됩니다.

크롬 IE / 엣지 파이어폭스 사파리 오페라
26.0
4.0 -webkit-		 10.0 16.0
4.0 -moz-		 6.1
3.1 -webkit-		 12.1
10.5 -o-