자연스러운 웹 인터랙션! - transition vs animation 완전 정복하기

 

 

웹사이트에서 버튼을 눌렀을 때 부드럽게 색이 바뀌거나, 배너가 좌우로 움직이는 걸 본 적 있죠?
이런 자연스러운 움직임을 만드는 데 쓰이는 두 가지 핵심 속성이 바로 transition과 animation입니다.

이번 포스팅에서는 이 둘의 차이점과 각각 어떻게 사용하는지 예시와 함께 차근차근 살펴볼게요!

---

 

✅ transition이란?

transition은 "변화가 일어날 때 부드럽게 전환되도록" 만들어주는 속성이에요.
어떤 스타일 속성이 바뀔 때, 그 변화가 천천히, 자연스럽게 일어나게 하는 거죠.

.box {
  width: 100px;
  height: 100px;
  background-color: tomato;
  transition: all 0.3s ease;
}

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

• all: 모든 속성에 적용
• 0.3s: 지속 시간
• ease: 전환 속도의 곡선

🎯 핵심 포인트

• *이벤트(trigger)*가 있어야 작동 (ex. hover, click 등)
• 변화되는 속성이 명확해야 함
• 한 번만 전환됨

---

 

✅ animation이란?

animation은 이름처럼 애니메이션처럼 동작하게 만들 수 있어요.
단순한 변화가 아닌 프레임 단위의 움직임을 제어하죠.

@keyframes slide {
  0% { transform: translateX(0); }
  100% { transform: translateX(100px); }
}

.box {
  width: 100px;
  height: 100px;
  background-color: salmon;
  animation: slide 1s infinite alternate;
}

• @keyframes: 애니메이션의 흐름 정의
• animation: 이름, 지속시간, 반복 등 지정 가능

🎯 핵심 포인트

• 이벤트 없이도 자동 실행 가능
• 반복 여부, 방향 등을 설정 가능
• 여러 단계의 변화를 표현할 수 있음

---

 

🧪 실습 비교: transition vs animation

항목	transition	animation
작동 조건	이벤트 필요 (ex. hover)	자동 재생 가능
단계 표현	시작 → 끝	여러 단계(keyframes)
반복 설정	불가	가능 (infinite)
속도 제어	ease, linear 등	animation-timing-function

 

---

 

🚧 자주 하는 실수들

• transition은 상태 변화가 없으면 작동하지 않음
• animation에 @keyframes 없으면 아무 일도 안 일어남
• hover 상태에서 animation 설정하면, 마우스를 떼면 멈춤

---

 

✅ 언제 어떤 걸 써야 할까?

• 버튼 hover 시 색상 변화 → transition
• 로딩 중 원이 빙글 도는 애니메이션 → animation
• 스크롤에 따라 동작 → JS와 animation 조합

---

 

📌 정리 포인트

상황	추천 속성
마우스 올렸을 때 변화	transition
자동 반복 동작	animation
복잡한 시퀀스	animation + keyframes
간단한 스타일 변화	transition