부드러운 전환 효과의 비밀, transition 완전 정복

 

 

웹사이트에서 버튼을 누를 때 색이 부드럽게 바뀌는 것,
슬라이드 메뉴가 천천히 열리는 것처럼
사용자가 편안하게 느끼는 변화에는 항상 transition이 숨어 있어요.

이번 포스팅 에서는 transition 속성 하나로도
어떤 효과까지 줄 수 있는지 실습 중심으로 소개해보겠습니다.

---

 

✅ transition 기본 문법

transition: [속성] [지속시간] [타이밍함수] [지연시간];

 

예를 들어:

button {
  background-color: #f00;
  transition: background-color 0.3s ease-in-out;
}

• 속성: 어떤 CSS 속성에 효과를 줄 건지
• 지속시간: 얼마나 천천히 바뀔지 (ex. 0.3초)
• 타이밍 함수: 속도가 일정한지 가속되는지 등
• 지연시간: 몇 초 뒤에 시작할지 (선택 사항)

---

 

✅ 가장 많이 쓰는 예제

.box {
  width: 100px;
  height: 100px;
  background: tomato;
  transition: all 0.5s ease;
}
.box:hover {
  width: 200px;
  background: skyblue;
}

 

🔍 왜 all을 쓰는 걸까?

• all: 모든 스타일 속성에 적용
• 그러나 성능을 생각하면 바뀌는 속성만 지정하는 것이 좋아요

예: transition: width 0.5s, background-color 0.5s;

---

 

✅ 타이밍 함수 알아보기

함수	설명
ease	기본값, 느리게-빠르게-느리게
linear	일정한 속도
ease-in	점점 빠르게 시작
ease-out	천천히 멈춤
ease-in-out	천천히 시작하고 천천히 멈춤

 

---

 

✅ 지연 시간까지 설정해보자

transition: background-color 0.3s ease 0.2s;

 

→ 색상이 0.2초 뒤에 바뀌기 시작하고, 0.3초 동안 변화함

💡 여러 속성 각각 다르게 주려면 쉼표로 나열:

transition: width 0.5s ease, height 1s linear 0.3s;

 

---

 

⚠️ 실수 방지 포인트

• hover 같은 트리거가 있어야 transition 작동
• transition은 변화 전후 상태가 명확히 있어야 함
• display: none → block은 transition이 안 됨
  → 대신 opacity, transform, height로 해결 가능

---

 

✅ 실전 팁

• 버튼의 hover 효과, 모달의 열고 닫기, 툴팁 등장 등
  → 전부 transition으로 자연스럽게 구현 가능해요!

.tooltip {
  opacity: 0;
  transition: opacity 0.3s;
}
.tooltip.show {
  opacity: 1;
}