SVG에서 CSS Transform 애니메이션: Scale, Rotate, Translate

Source: Dev.to

CSS + SVG 애니메이션을 사용하는 이유

현대 브라우저에는 강력하고 아직 충분히 주목받지 못한 애니메이션 시스템이 내장되어 있습니다: SVG + CSS 키프레임. 런타임도, 번들러 매직도 필요 없습니다 — 브라우저가 자동으로 하드웨어 가속하는 마크업과 스타일만 있으면 됩니다. SVG 형태는 DOM에 존재하므로 CSS가 다른 요소와 똑같이 애니메이션을 적용할 수 있습니다. 컴포지터 스레드가 부드러운 60 fps로 작업을 처리하고, 사용자에게 추가 바이트를 전송하지 않아도 됩니다.

기본 변형 애니메이션 예시

@keyframes example {
  0%   { opacity: 0; transform: scale(0.8); }
  50%  { opacity: 1; transform: scale(1.05); }
  100% { opacity: 1; transform: scale(1); }
}

.my-shape {
  animation: example 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

<svg>, <path>, <circle>, <rect> 등 모든 SVG 요소에 클래스를 부여하고 일반 HTML 요소처럼 애니메이션을 적용할 수 있습니다.

Transform + opacity

transform과 opacity 모두 GPU 컴포지팅을 트리거합니다 — 레이아웃 재계산이나 재페인트가 일어나지 않으며, 부드러운 애니메이션을 위한 첫 번째 선택이 되어야 합니다.

animation-delay 로 계단식 애니메이션 만들기

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

점진적인 딜레이를 사용해 추가 JavaScript 없이도 연속적인 효과를 만들 수 있습니다.

완전한 자체 포함 SVG + CSS 애니메이션

  @keyframes orbit {
    from { transform: rotate(0deg) translateX(60px) rotate(0deg); }
    to   { transform: rotate(360deg) translateX(60px) rotate(-360deg); }
  }
  .dot { animation: orbit 2s linear infinite; transform-origin: center; }

이 스니펫을 HTML, React, Vue, Svelte 파일 어디에든 붙여넣기만 하면 바로 동작합니다.

시각적 타임라인 편집기

키프레임 수식을 직접 작성하지 않고 시각적으로 모션을 디자인하고 싶다면 CSSVG 를 사용해 보세요. 깔끔한 SVG + CSS 코드를 내보내어 프로젝트에 바로 넣을 수 있습니다.

정리

• SVG 형태는 DOM 요소이므로 CSS가 네이티브하게 애니메이션을 적용할 수 있습니다.
• @keyframes + transform/opacity = GPU‑컴포지팅, JavaScript 없이 구현되는 애니메이션.
• 결과물은 포터블 마크업이며, React, Vue, Svelte 혹은 일반 HTML 어디서든 동작합니다.

다음에 다루었으면 하는 특정 애니메이션 기법이 있다면 댓글로 알려 주세요!