CSS 전환 속성

<div> 요소 위로 마우스를 가져가면 너비가 100px에서 300px로 점진적으로 변경됩니다.

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

div:hover {
  width: 300px;
}

아래에서 더 많은 "직접 사용해 보기" 예를 살펴보세요.

정의 및 사용

속성은 다음 transition에 대한 약식 속성입니다.

참고: 항상 transition-duration 속성을 지정하십시오. 그렇지 않으면 지속 시간이 0이고 전환이 적용되지 않습니다.

표의 숫자는 속성을 완전히 지원하는 첫 번째 브라우저 버전을 지정합니다.

-webkit-, -moz- 또는 -o- 뒤에 오는 숫자는 접두사와 함께 작동한 첫 번째 버전을 지정합니다.

Property
transition	26.0 4.0 -webkit-	10.0	16.0 4.0 -moz-	6.1 3.1 -webkit-	12.1 10.5 -o-

transition: property duration timing-function delay|initial|inherit;

Value	Description
transition-property	Specifies the name of the CSS property the transition effect is for
transition-duration	Specifies how many seconds or milliseconds the transition effect takes to complete
transition-timing-function	Specifies the speed curve of the transition effect
transition-delay	Defines when the transition effect will start
initial	Sets this property to its default value. Read about initial
inherit	Inherits this property from its parent element. Read about inherit

<input type="text">가 포커스를 받으면 너비를 점차적으로 100px에서 250px로 변경합니다.

input[type=text] {
width: 100px;
transition: width .35s ease-in-out;
}

input[type=text]:focus {
width: 250px;
}