부드러운 애니메이션 효과를 주는 transition

✨ CSS transition과 :hover 같이 쓰는 법

transition은 CSS에서 스타일 변화에 부드러운 애니메이션 효과를 주는 속성이에요. 보통 :hover와 함께 써서, 마우스를 올렸을 때 자연스럽게 바뀌도록 만들죠!

🧠 기본 개념

transition: 변화 줄 스타일 지정

background-color: 어떤 속성을 변화시킬지

0.3s: 변화에 걸리는 시간 (0.3초)

ease: 부드러운 속도 곡선 (처음 느리게 → 점점 빨라짐 → 다시 느리게)

❌ transition 없는 경우

button {
  background-color: #d1bfa7;
}

button:hover {
  background-color: #b9a68e;
}

→ 변화가 순간적으로 확! 일어나요.

✅ transition 있는 경우

button {
  background-color: #d1bfa7;
  transition: background-color 0.3s ease;
}

button:hover {
  background-color: #b9a68e;
}

→ 변화가 부드~럽게 일어나요. 사용자에게 훨씬 자연스럽고 감각적인 인상을 줘요.

🎨 다른 속성에도 적용 가능

• color – 글자색
• opacity – 투명도
• transform – 회전, 확대/축소 등
• box-shadow – 그림자 효과
• all – 모든 변화에 적용

작은 변화 하나가 UX를 확 바꿀 수 있다 💡