CSS Transition으로 부드러운 애니메이션 만들기

CSS Transition은 요소의 스타일이 변할 때 그 변화를 즉시가 아닌 부드럽게 진행되도록 만드는 기능이다. 버튼 호버 효과, 배경색 변화, 크기 변경 등 다양한 상황에서 사용자 경험을 한 단계 업그레이드할 수 있다.

---

1. Transition이란?

기본적으로 CSS에서 스타일을 변경하면 즉시 적용된다. 예를 들어 버튼의 배경색을 파란색에서 빨간색으로 변경하면 순간적으로 색이 바뀐다. 하지만 transition을 사용하면 그 변화가 일정 시간에 걸쳐 부드럽게 진행된다.

---

2. Transition의 핵심 속성 4가지

1) transition-property

변화를 적용할 CSS 속성을 지정한다.

.button {
  transition-property: background-color;
}

자주 사용되는 값들:

• background-color: 배경색 변화
• color: 글자색 변화
• width, height: 크기 변화
• opacity: 투명도 변화
• transform: 회전, 스케일, 이동
• all: 모든 속성의 변화에 적용

2) transition-duration

변화가 얼마나 오래 진행될지를 지정한다. 단위는 초(s) 또는 밀리초(ms)이다.

.button {
  transition-duration: 0.3s;  /* 300밀리초 */
}

3) transition-timing-function

변화의 속도 패턴을 지정한다. 어떤 속도로 부드럽게 진행될 것인지 결정한다.

.button {
  transition-timing-function: ease-in-out;
}

주요 값들:

• linear: 처음부터 끝까지 같은 속도
• ease: 천천히 시작, 빨라졌다가 천천히 끝남 (기본값)
• ease-in: 처음에는 천천히, 나중에 빠름
• ease-out: 처음에는 빠르고, 나중에 천천히
• ease-in-out: ease와 비슷하지만 더 자연스러움
• cubic-bezier(n,n,n,n): 커스텀 속도 곡선

4) transition-delay

애니메이션 시작을 지연시킨다.

.button {
  transition-delay: 0.1s;  /* 100밀리초 후 시작 */
}

---

3. 단축 속성(Shorthand)

네 가지 속성을 한 줄로 작성할 수 있다.

.button {
  transition: [property] [duration] [timing-function] [delay];
  transition: background-color 0.3s ease-in-out 0.1s;
}

---

4. 여러 속성에 따른 transition 적용하기

.element {
  transition: background-color 0.3s ease,
              transform 0.5s ease-in-out,
              opacity 0.2s linear;
}

이렇게 하면 각 속성마다 다른 속도와 타이밍 함수를 적용할 수 있다.

---

5. 주의사항과 팁

피해야 할 것

• transition: all 남용: 모든 속성을 변화시키면 성능이 떨어질 수 있다. 필요한 속성만 지정하자.
• 과도한 애니메이션: 모든 상호작용에 transition을 주면 오히려 사용자 경험이 떨어진다.
• 너무 긴 duration: 사용자를 답답하게 만들 수 있다.

성능 최적화 팁

• opacity와 transform 변화를 우선적으로 사용하자. 이 두 속성은 브라우저가 효율적으로 처리한다.
• width,height,left,top 변화는 피하자. 레이아웃 재계산이 일어나 성능이 떨어진다.
• GPU 가속을 활용하려면 transform: translateZ(0)을 추가하자.

.optimized-element {
  transition: opacity 0.3s ease, transform 0.3s ease;
  transform: translateZ(0);  /* GPU 가속 활성화 */
}

---

정리

CSS transition은 간단하면서도 매우 강력한 도구다. 올바르게 사용하면:

• 웹사이트가 더 반응성 있고 전문적으로 느껴진다.
• 사용자 경험이 향상된다.
• 복작합 JavaScript 코드 없이 부드러운 애니메이션을 만들 수 있다.