transition

transition이란?

• 요소의 스타일이 변경될 때 그 변화를 부드럽게 애니메이션 효과로 표현해주는 속성
• transition을 사용하면 요소의 속성이 변경될 때 즉각적인 변화 대신 지정된 시간 동안 천천히 변화하는 모습을 보여줄 수 있다.

주요 속성

• transition-property
  변화할 CSS 속성을 지정한다.
  예를 들어, width, height, background-color 등이 있다. 여러 속성을 지정할 경우 쉼표로 구분한다.

• transition-duration
  변화가 완료되는 시간을 설정한다.
  초 단위로 지정하며, 예를 들어 0.5s는 0.5초를 의미한다.

• transition-timing-function
  변화의 속도를 정의한다.
  예를 들어, linear, ease, ease-in, ease-out, ease-in-out 등이 있다.

• transition-delay
  변화가 시작되기 전의 대기 시간을 설정한다. 초 단위로 지정한다.

기본 사용법

/* 초기 상태의 스타일 */
.element {
  width: 100px;
  height: 100px;
  background-color: blue;
  transition: width 0.5s ease, background-color 1s ease-in-out;
}

/* 변경 후의 스타일 (예: hover 상태) */
.element:hover {
  width: 200px;
  background-color: red;
}

위 예시에서는 .element 클래스가 적용된 요소가 hover 상태가 되면 width가 0.5초 동안 부드럽게 100px에서 200px로 변화하고, background-color가 1초 동안 부드럽게 파란색에서 빨간색으로 변화한다

자세한 예시

.box {
  width: 100px;
  height: 100px;
  background-color: blue;
  transition: width 0.5s ease, height 0.5s ease, background-color 1s ease-in-out;
}

.box:hover {
  width: 200px;
  height: 200px;
  background-color: red;
}

위 코드를 적용한 경우 .box 요소는 마우스를 올리면 크기가 커지고 색상이 변경된다. 변화는 지정된 시간 동안 부드럽게 발생한다.