CSS 애니메이션과 트랜지션 완전 가이드 — 웹에 생동감을 더하는 기술

왜 애니메이션이 중요한가?

사용자는 부드럽게 움직이는 UI에 신뢰감을 느낍니다. 구글의 연구에 따르면 적절한 애니메이션이 적용된 인터페이스는 사용자 만족도가 30% 이상 높았습니다. CSS의 transition과 animation을 사용하면 JavaScript 없이도 프로페셔널한 효과를 줄 수 있습니다.

Transition — 상태 변화를 부드럽게

transition은 CSS 속성이 변할 때 부드러운 전환 효과를 줍니다. hover, focus, active 같은 상태 변화에 주로 사용됩니다.

기본 문법과 실전 예제

버튼에 고급스러운 호버 효과를 주는 예제입니다. transition: all 0.3s ease 한 줄이면 배경색, 그림자, 위치 변화가 모두 부드럽게 전환됩니다. 0.3초가 사람이 가장 자연스럽다고 느끼는 전환 시간입니다.

핵심 속성 4가지

transition-property — 어떤 속성을 전환할지 (all, background, transform, opacity 등). 성능을 위해 특정 속성만 지정하는 것이 좋습니다.

transition-duration — 전환 시간. 0.2~0.4초가 UI에서 가장 자연스러운 범위입니다.

transition-timing-function — 가속 곡선. ease(기본), ease-in-out(부드러운 시작과 끝), linear(일정 속도), cubic-bezier(커스텀).

transition-delay — 전환 시작 전 대기 시간. 순차적 애니메이션에 활용합니다.

Animation — 자동으로 반복하는 움직임

@keyframes로 각 단계의 상태를 정의하고, animation 속성으로 적용합니다. transition과 달리 자동으로 실행되며, 반복, 역재생 등 다양한 옵션이 있습니다.

페이드인 애니메이션 예제

페이지 로딩 시 콘텐츠가 아래에서 위로 서서히 나타나는 효과입니다. from에서 opacity: 0, translateY(20px)을 주고 to에서 opacity: 1, translateY(0)으로 전환하면 됩니다. 모던 웹사이트에서 가장 많이 쓰이는 애니메이션 패턴입니다.

animation 주요 속성

animation-iteration-count — 반복 횟수. infinite면 무한 반복.

animation-direction — alternate면 왕복 운동.

animation-fill-mode — forwards면 애니메이션 끝 상태 유지.

성능 최적화 — 60fps를 유지하는 법

핵심 원칙: transform과 opacity만 애니메이션하세요. 이 두 속성은 GPU 가속을 받아 메인 스레드를 차단하지 않고 60fps로 부드럽게 렌더링됩니다.

반면 width, height, margin, padding, top, left 같은 속성은 레이아웃을 다시 계산(reflow)해야 하므로 성능이 크게 떨어집니다. 위치 변경은 transform: translate()로, 크기 변경은 transform: scale()로 대체하세요.

will-change: transform 속성을 추가하면 브라우저가 미리 GPU 레이어를 생성하여 애니메이션을 더 부드럽게 처리합니다.