Style transitionProperty 속성

정의와 사용법

transitionProperty 속성은 이동 효과가 적용되는 CSS 속성 이름을 정의합니다. (지정된 CSS 속성이 변경될 때 이동 효과가 시작됩니다).

추천:사용자가 요소에 마우스를 올리면 일반적으로 이동 효과가 나타납니다.

주석:항상 지정하십시오 transitionDuration 속성그렇지 않으면 지속 시간이 0으로 되돌아가고, 이동은 유효하지 않습니다.

다른 참조

CSS 참조 가이드transition-property 속성

예제

div 요소에 마우스를 올려다가 너비와 높이를 점진적으로 변경하십시오:

document.getElementById("myDIV").style.transitionProperty = "width,height";

직접 시험해 보세요

문법

transitionProperty 속성 반환:

object.style.transitionProperty

transitionProperty 속성 설정:

object.style.transitionProperty = "none|all|property|initial|inherit"

속성 값

설명
none 이동 효과를 적용받지 않는 속성이 없습니다.
all 기본 값. 모든 속성에 이동 효과가 적용됩니다.
property 이동 효과의 CSS 속성 이름 목록을 쉼표로 구분하여 정의합니다.
initial 이 속성을 기본 값으로 설정합니다. 참조하십시오 initial
inherit 부모 요소에서 이 속성을 상속합니다. 참조하십시오 inherit

기술 세부 사항

기본 값: all
반환 값: 문자열로, 요소의 transition-property 속성
CSS 버전: CSS3

브라우저 지원

표의 숫자는 이 속성을 최초로 완전 지원하는 브라우저 버전을 나타냅니다.

크롬 에지 파이어폭스 사파리 오페라
크롬 에지 파이어폭스 사파리 오페라
26.0 10.0 16.0 6.1 12.1