Part 9: 애니메이션과 View Transitions

Part 9: 애니메이션과 View Transitions

CSS 애니메이션은 단순히 요소를 움직이게 하는 것을 넘어, 사용자 경험을 크게 향상시키는 중요한 도구가 되었습니다. 2026년 현재는 기본적인 @keyframes부터 페이지 간 부드러운 전환을 가능하게 하는 View Transitions API까지, CSS만으로도 상당히 정교한 애니메이션을 구현할 수 있게 되었습니다.

이번 파트에서는 실무에서 자주 사용하는 애니메이션 기법과 View Transitions에 대해 자세히 알아보겠습니다.

1. 기본 애니메이션 구조

AD

제휴 광고 · 일부 링크는 수수료를 받을 수 있습니다

2026 최단기간 한번에 합격하는 정보보안기사

₩39,000

크몽

[타임특가] [6장세트] 풋조이 NEW 웨더소프 레볼루션 골프장갑 Weather Sof

₩59,800

₩120,000

딜팡

기준봉 매매 전성시대 드립니다.

₩600,000

크몽

CSS 애니메이션의 기본은 @keyframes를 정의하고, animation 속성을 통해 적용하는 것입니다.

.fade-in {
  animation: fadeIn 0.4s ease forwards;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

여러 속성을 조합해서 더 자연스러운 움직임을 만들 수 있습니다.

.slide-up {
  animation: slideUp 0.5s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

2. Transition vs Animation

많은 사람들이 transition과 animation을 혼동합니다.

• transition: 상태 변화(예: hover, focus) 시 부드럽게 전환할 때 사용. 간단한 효과에 적합.
• animation: 더 복잡하고 반복적인 움직임, 또는 자동으로 실행되는 효과에 적합.

.button {
  transition: all 0.2s ease;
}

.button:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 15px rgb(0 0 0 / 0.15);
}

3. View Transitions API

AD

제휴 광고 · 일부 링크는 수수료를 받을 수 있습니다

애드픽 쇼핑메이트 회원가입

쇼핑정보로 재테크하는 꿀팁! 애드픽 쇼핑메이트

View Transitions API는 페이지 이동이나 DOM 변경 시 부드러운 전환 효과를 쉽게 구현할 수 있게 해주는 최신 기능입니다. SPA(싱글 페이지 애플리케이션)에서 페이지 전환을 자연스럽게 만들고 싶을 때 특히 유용합니다.

// 페이지 전환 시 부드러운 효과 적용
document.startViewTransition(() => {
  // 실제 DOM 변경 코드
  document.body.innerHTML = newContent;
});

CSS에서는 다음과 같이 전환 효과를 정의할 수 있습니다.

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.4s;
  animation-timing-function: ease;
}

::view-transition-old(root) {
  animation-name: fade-out;
}

::view-transition-new(root) {
  animation-name: fade-in;
}

@keyframes fade-out {
  to { opacity: 0; }
}

@keyframes fade-in {
  from { opacity: 0; }
}

4. 실무에서 자주 쓰이는 애니메이션 패턴

/* 리스트 아이템 등장 애니메이션 */
.list-item {
  opacity: 0;
  transform: translateY(20px);
  animation: fadeInUp 0.4s ease forwards;
}

.list-item:nth-child(1) { animation-delay: 0.1s; }
.list-item:nth-child(2) { animation-delay: 0.2s; }
.list-item:nth-child(3) { animation-delay: 0.3s; }

@keyframes fadeInUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 모달 등장 애니메이션 */
.modal {
  animation: modalEnter 0.3s cubic-bezier(0.32, 0.72, 0, 1) forwards;
}

@keyframes modalEnter {
  from {
    opacity: 0;
    transform: scale(0.96) translateY(20px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

5. 정리

AD

제휴 광고 · 일부 링크는 수수료를 받을 수 있습니다

[산지직송] 최종가 12,740원 / 고당도 하우스 수박 5kg~7kg 정품 / 실속형

₩14,900

₩24,900

오늘의집

소문난삼부자 올리브유 도시락김 4g 48봉

₩14,900

₩18,900

11번가

6/4 시선집중 뉴트키즈타민 30포 어린이비타민 종합영양제

₩25,880

₩28,750

11번가

CSS 애니메이션은 사용자 경험을 크게 향상시키는 중요한 도구입니다. 기본 transition과 @keyframes를 잘 활용하는 것만으로도 충분히 좋은 효과를 낼 수 있으며, View Transitions API를 사용하면 페이지 전환까지 부드럽게 만들 수 있습니다.

이제 마지막 파트로 넘어가겠습니다.