Style transition 속성

정의와 사용법

transition 속성은 네 가지 전환 속성의 줄임말 속성입니다：

주석：항상 정의하십시오 transitionDuration 속성그렇지 않으면 지속 시간이 0으로 설정되고, 전환은 유효하지 않습니다.

다른 참조도 참조하십시오：

CSS 참조 매뉴얼：transition 속성

예제

div 요소에 마우스를 올려다 둘 때 점진적으로 외관을 변경합니다：

document.getElementById("myDIV").style.transition = "all 2s";

직접 시도해 보세요

문법

transition 속성 반환：

object.style.transition

transition 속성 설정：

object.style.transition = "속성 지속 시간 timing-function 지연|initial|inherit"

속성 값

값 설명
transitionProperty 전환 효과가 대상 CSS 속성의 이름을 정의합니다.
transitionDuration 전환 효과가 얼마나 많은 초나 밀리초가 걸리는지 정의합니다.
transitionTimingFunction 전환 효과의 속도 곡선을 정의합니다.
transitionDelay 전환 효과가 언제 시작되는지 정의합니다.
initial 이 속성을 기본 값으로 설정합니다. 참조하십시오 initial。
inherit 이 속성을 부모 요소에서 상속합니다. 참조하십시오 inherit。

기술 세부 사항

기본 값： all 0 ease 0
반환 값： 문자열로, 요소의 transition 속성。
CSS 버전： CSS3

브라우저 지원

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

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