CSS 트랜지션 속성

정의 및 사용법

transition 속성은 네 개의 전환 속성을 설정하는 간단한 속성입니다:

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

다른 것을 참조하세요:

CSS 교본:CSS 전환

HTML DOM 참조 설명서:transition 속성

예제

마우스 포인터를 div 요소에 두면 너비가 100px에서 300px로 점진적으로 변합니다:

div {
  width: 100px;
  transition: width 2s;
}

직접 시도해 보세요

CSS 문법

transition: 속성 지속 시간 속도 함수 지연;

속성 값

값 설명
transition-property 전환 효과를 설정하는 CSS 속성의 이름을 규정합니다.
transition-duration 전환 효과를 완료하는 데 필요한 시간 또는 밀리초를 규정합니다.
transition-timing-function 속도 효과의 속도 곡선을 규정합니다.
transition-delay 전환 효과가 언제 시작되는지 정의합니다.

기술 세부 사항

기본값: all 0 ease 0
상속성: no
버전: CSS3
JavaScript 문법: object.style.transition="width 2s"

브라우저 지원

표에 나타난 숫자는 이 속성을 완전히 지원하는 첫 번째 브라우저 버전을 나타냅니다.

-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-