transition

transition은 스타일 속성이 변경될 때 그 변화를 일정 시간에 걸쳐 일어나게 하여 애니메이션 효과를 만들어냅니다.

---

1. CSS transition의 정의

transition은 CSS 속성값이 변경될 때(예: 마우스 호버 시 색상 변경), 그 변화가 즉시 일어나지 않고 일정한 시간 동안 부드럽게 전환되도록 제어하는 속성입니다.

상태의 변화(State A → State B)를 자연스러운 움직임으로 이어주는 가교 역할을 합니다.

---

2. transition의 4가지 핵심 속성

transition은 총 4가지 세부 속성으로 구성됩니다.

• transition-property: 변화를 줄 대상 속성을 정합니다. (예: background-color, transform, all)
• transition-duration: 변화가 일어날 지속 시간을 설정합니다. (단위: s 또는 ms) [필수]
• transition-timing-function: 변화의 속도 곡선을 정합니다. (예: 서서히 시작하다 빨라짐)
• transition-delay: 변화가 시작되기 전 대기 시간을 설정합니다.

---

3. 중요 타이밍 함수 (Timing Functions)

움직임의 '느낌'을 결정하는 가장 중요한 요소입니다.

• ease: 기본값. 천천히 시작해서 빨라졌다가 다시 천천히 끝납니다.
• linear: 처음부터 끝까지 일정한 속도로 움직입니다.
• ease-in: 천천히 시작해서 속도가 붙으며 끝납니다.
• ease-out: 빠르게 시작해서 끝날 때 천천히 멈춥니다.
• cubic-bezier(n,n,n,n): 나만의 고유한 속도 곡선을 직접 수치로 정의합니다.

---

4. 실전 예제 코드: "종합 선물 세트"

한 줄로 줄여 쓰는 단축 속성(Shorthand) 방식을 실무에서는 가장 선호합니다.

구조: transition: 속성 시간 타이밍함수 대기시간;

CSS

 

.button {
  width: 150px;
  height: 50px;
  background-color: #3498db;
  color: white;
  border: none;
  cursor: pointer;

  /* 1. 모든 속성을(all) 2. 0.5초 동안(0.5s) 3. 부드럽게(ease-in-out) 변화시킴 */
  transition: all 0.5s ease-in-out;
}

/* 마우스를 올렸을 때의 변화 */
.button:hover {
  background-color: #2ecc71; /* 배경색 변경 */
  width: 200px;              /* 너비 변경 */
  border-radius: 25px;       /* 모양 변경 */
  transform: scale(1.1);      /* 크기 약간 확대 */
}

---

📋 속성별 상세 요약표

세부 속성	설명	예시
property	변화를 감시할 CSS 속성	opacity, width, all
duration	애니메이션 재생 시간	0.3s, 500ms
timing-function	속도의 흐름 (가속도)	linear, ease-in
delay	실제 시작까지 기다리는 시간	1s (1초 후 시작)

---

학습 정리

• **duration**이 설정되지 않으면 기본값이 0이므로 아무런 효과가 나타나지 않는다.
• all 키워드를 쓰면 해당 요소의 모든 변경 가능한 속성에 자동으로 효과가 적용된다.
• 마우스 호버(:hover)뿐만 아니라 자바스크립트로 클래스를 추가/제거할 때도 transition은 작동한다.

---

부드러운 웹 화면을 만드는 transition의 원리를 완벽히 이해하셨습니다!

---

---

transition의 각 세부 속성들이 실제 코드에서 어떤 역할을 하는지 개별 예제를 통해 자세히 살펴보겠습니다.

각 속성의 차이를 명확히 느낄 수 있도록 구성했습니다.

---

1. transition-property (대상 지정)

어떤 속성에만 부드러운 효과를 줄지 선택합니다.

CSS

 

.prop-box {
  width: 100px;
  height: 100px;
  background-color: #e74c3c;
  /* 배경색(background-color) 변화에만 1초간 효과를 줍니다. */
  /* 너비(width) 변화는 즉시 일어납니다. */
  transition-property: background-color;
  transition-duration: 1s;
}

.prop-box:hover {
  background-color: #8e44ad;
  width: 200px;
}

---

2. transition-duration (시간 설정)

애니메이션이 얼마나 오래 지속될지 결정합니다.

CSS

 

.dur-box {
  width: 100px;
  height: 100px;
  background-color: #3498db;
  transition-property: transform;
}

.fast { transition-duration: 0.2s; } /* 아주 빠르게 */
.slow { transition-duration: 2s; }   /* 아주 느리게 */

.dur-box:hover {
  transform: rotate(180deg);
}

---

3. transition-timing-function (속도 조절)

변화의 리듬(가속도)을 결정합니다.

CSS

 

.time-box {
  width: 100px;
  height: 50px;
  margin-bottom: 10px;
  background-color: #2ecc71;
  transition: width 1s; /* 단축 속성 사용 */
}

.linear { transition-timing-function: linear; } /* 일정한 속도 */
.ease-in { transition-timing-function: ease-in; } /* 시작은 느리게, 끝은 빠르게 */
.out { transition-timing-function: cubic-bezier(0, 0.5, 0.5, 1); } /* 커스텀 곡선 */

.container:hover .time-box {
  width: 300px;
}

---

4. transition-delay (대기 시간)

마우스를 올린 후 '언제' 애니메이션을 시작할지 정합니다.

CSS

 

.delay-box {
  width: 100px;
  height: 100px;
  background-color: #f1c40f;
  /* 1초를 기다린 후에 0.5초 동안 변화가 일어납니다. */
  transition-duration: 0.5s;
  transition-delay: 1s;
}

.delay-box:hover {
  border-radius: 50%;
  background-color: #f39c12;
}

---

💡 실무 팁: 여러 속성에 각기 다른 시간 주기

쉼표(,)를 사용하여 속성마다 서로 다른 시간과 타이밍을 적용할 수 있습니다.

CSS

 

.complex-box {
  width: 100px;
  height: 100px;
  background-color: gray;
  /* 너비는 0.3초 만에, 배경색은 1초 뒤에 2초 동안 천천히 변경 */
  transition: width 0.3s ease, background-color 2s 1s linear;
}

.complex-box:hover {
  width: 200px;
  background-color: pink;
}

---

연습 포인트

• all 키워드: transition-property: all;이라고 쓰면 모든 수치형 CSS 속성에 효과가 적용되어 편리합니다.
• 반대 방향: 마우스를 뗐을 때도 부드럽게 돌아오는 이유는 transition이 :hover가 아닌 원래의 클래스 상태에 정의되어 있기 때문입니다.

---

각 속성의 개별적인 역할까지 완벽하게 파악하셨네요!

---