[CSS] transition 속성 종류

Transition 사용법

 

속성 값이 변할 때 부드럽게 전환할 수 있도록 도와주는 것

transition 속성은 요소가 새 스타일로 바뀌는 속도, 시간 및 방법을 제어

 

• transition-property: 어떤 속성을 애니메이션할 것인지를 지정합니다.
• transition-duration: 애니메이션이 걸리는 시간을 설정합니다.
• transition-timing-function: 애니메이션 속도를 제어하는 함수입니다. 애니메이션이 진행되는 동안의 속도 변화를 정의합니다.
• transition-delay: 애니메이션이 시작되기 전의 지연 시간을 설정합니다.

---

1. transition-property

 

.box {
  transition-property: background-color, width;
}

transition-property는 애니메이션 할 CSS 속성을 지정

예를 들어, width, height, background-color, transform 등이 있을 수 있습니다.

여러 속성을 콤마로 구분하여 지정할 수 있습니다.

.box {
  transition-property: all;
}

transition-property 를 all 로 지정하면 

color 추가할 필요 없이 모든 속성이 적용된다.

 

transform 도 같이 지정할 수 있다.

그럼 회전하면서 부드럽게 변경되는 걸 확인할 수 있음. 

---

2. transition-duration

 

transition-duration은 애니메이션이 걸리는 시간을 밀리초(ms) 또는 초(s)로 지정합니다.

.box {
  transition-duration: 2s;
}

 

예를 들어, 2초 동안 애니메이션이 진행되게 하려면 다음과 같이 설정합니다.

.box {
  transition-duration: 1s, 2s;
}

여러 속성을 지정한 경우 각각의 속성에 대해 개별적으로 지속 시간을 설정할 수도 있습니다.

---

3. transition-timing-function

.box {
  transition-timing-function: ease-in-out;
}

transition-timing-function은 애니메이션 동안의 속도 변화를 정의합니다.

주로 사용되는 값은 다음과 같습니다.

• linear: 애니메이션이 일정한 속도로 진행됩니다.
• ease: 시작은 느리게, 중간은 빠르게, 끝은 다시 느리게 진행됩니다. (기본값)
• ease-in: 시작은 느리게, 끝은 빠르게 진행됩니다.
• ease-out: 시작은 빠르게, 끝은 느리게 진행됩니다.
• ease-in-out: 시작과 끝은 느리게, 중간은 빠르게 진행됩니다.
• cubic-bezier(n, n, n, n): 사용자 정의 타이밍 함수입니다.

---

4. transition-delay

 

.box {
  transition-delay: 0.5s;
}

transition-delay는 애니메이션이 시작되기 전까지의 지연 시간을 설정합니다.

밀리초(ms) 또는 초(s)로 지정할 수 있습니다.

 

지연 시간을 설정하여 원하는 시간만큼 기다린 후 애니메이션을 시작할 수 있습니다.