transition + animation 조합으로 매끄러운 인터랙션 만들기

 

 

단독으로 사용해도 강력한 transition과 animation
하지만 두 속성을 잘 조합하면 더 유연하고 세련된 UI 연출이 가능해집니다.

이번 포스팅에서는 실제로 많이 쓰이는 예제를 통해 두 속성을 같이 활용하는 팁을 알려드리겠습니다.

---

 

✅ 기본 개념 먼저 짚고 가기

• transition
  → 사용자의 행동에 반응하는 애니메이션 (hover, focus 등)
• animation
  → 페이지 로딩과 동시에 자동으로 동작하는 애니메이션

👉 두 속성은 동시에 선언 가능하지만, 작동 조건이 다르기 때문에 구분해서 써야 해요

---

 

✅ 예제: 페이지 진입 시 fade-in + hover 시 scale-up

.card {
  animation: fadeIn 1s ease-in;
  transition: transform 0.3s ease;
}
.card:hover {
  transform: scale(1.05);
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

 

---

 

✅ 실전 팁: 언제 transition + animation 조합할까?

상황	추천 속성
첫 등장 시 부드럽게 나타나게 하고 싶다	animation
사용자 액션에 따라 즉각 반응하게 하고 싶다	transition
두 가지 다 하고 싶다	둘 다 선언하면 됨! (애니메이션 순서 고려해야 함)

 

---

 

✅ 조심해야 할 점

• animation과 transition은 같은 속성을 동시에 제어할 수 없음
  → 예: animation에서 opacity를 조절하고 있는데 transition으로도 opacity를 주면 충돌 발생 가능
• animation-fill-mode: both를 주면
  시작 전/종료 후 상태 유지가 가능하므로 transition과 연결이 매끄러워짐

.card {
  animation: fadeIn 1s ease-in both;
}

 

---

 

✅ 자주 쓰이는 조합 예시

• 🎬 페이지 로딩 시 등장 → hover 시 확대
• 🛒 상품 카드 진입 시 위에서 내려오기 → 클릭 시 색상 변경
• 📦 모달창 등장 애니메이션 + 내부 버튼 hover 반응

---

 

✅ 요약 정리

요소	animation	transition
실행 조건	자동 시작	사용자 동작
반복 가능	O (infinite)	X
순차 제어	@keyframes	불가
조합 방식	동시 선언 가능하나, 속성 겹침 주의