transition 관련 속성은 요소 박스에 지정된 속성이 점진적으로 전이 되는 과정을 구현합니다.

📌 transition-property

transition-property는 CSS 속성 값의 초기 상태가 종료 상태로 전이되는 과정을 구현하는 속성입니다.

속성 값으로 CSS 속성을 지정하면 해당 속성 값만 전이되고, all을 지정할 경우 요소에 지정된 모든 속성 값이 전이됩니다. 2개 이상의 속성을 지정할 경우, 콤마(,)로 구분하면 여러 개를 지정할 수 있습니다.

📌 transition-duration

transition-duration 속성은 전이가 진행되는 시간을 합니다.

트랜지션을 이용한 애니메이션 효과를 적용하고 싶다면 transition-property 속성과 transition-duration 속성은 필수로 선언해야 합니다.

div {
	width: 100px;
	height: 50px;
	background: rgba(5,77,74,1);
	transition-property: background;
	transition-duration: 3s;
}

div:hover {
	width: 400px;
	background: rgba(255,100,0,0.8);
}

MDN transition-property 속성

MDN transition-duration 속성

📌 transition-delay

transition-delay는 전이가 되기 전 지연되는 시간을 지정하는 속성입니다. transition-duration 속성과 마찬가지로 지연 시간은 밀리 초(ms) 또는 초 단위(s)로 지정합니다. 이때 지연되는 시간은 진행 시간(Transition Duration)에 포함되지 않습니다.

div {
	transition-delay: 2s;
}

MDN transition-delay 속성