SVG를 이용하여 Animation 만들기

Figma에서 디자인한 SVG를 추출해 CSS 애니메이션으로 구현하는 실습 튜토리얼이다. 삼각형 도형의 hover/click 인터랙션 애니메이션과 Phone Skeleton Loading 순차 애니메이션 두 가지 예제를 단계별로 다루며, CSS 커스텀 변수로 요소마다 딜레이를 자동 계산하는 패턴을 소개한다.

핵심 포인트

Figma → SVG 추출 시 레이어 이름 지정 + ID 속성 포함으로 CSS 선택자 연결 편의성 확보
CSS transition + transform(translateX/Y)으로 hover 시 이동·페이드 동작 구현
@keyframes dropIn으로 요소가 위(-20px)에서 제자리로 떨어지는 등장 애니메이션 제작
CSS 커스텀 변수 `--order`로 여러 요소의 순차적 animation-delay 자동 계산
animation-fill-mode: forwards로 애니메이션 종료 후 최종 상태 유지

상세 정리

Animation 1 — 삼각형 Shape: Figma 색상 팔레트 선택 → SVG 추출 → CSS transition + hover 이동/페이드 → 클릭 시 JavaScript로 색상 동적 변경
Animation 2 — Phone Skeleton Loading: fade-in 기본 효과 + dropIn @keyframes 순차 등장 구현
@keyframes dropIn 구조: `from { transform: translateY(-20px); opacity: 0; }` → `to { transform: translateY(0); opacity: 1; }`
CSS 커스텀 변수 딜레이: `animation-delay: calc(var(--order) * 0.1s)` — 요소마다 --order 값 지정으로 타이밍 자동 분산
animation-fill-mode: forwards 설정: 애니메이션 완료 후 마지막 프레임 상태를 유지해 초기 위치로 되돌아가지 않음
animation-iteration-count 설정으로 반복 횟수 제어 가능
Figma에서 레이어 ID를 명시하면 SVG 추출 후 CSS에서 `#layerName` 선택자로 바로 타게팅 가능

왜 읽나Figma 디자인에서 SVG 코드 추출 → CSS @keyframes 애니메이션까지 전체 흐름을 두 가지 실용 예제(hover 인터랙션, 스켈레톤 로딩)로 직접 따라 만들 수 있는 프론트엔드 입문 가이드다.

씨앤텍시스템즈 블로그

원문은 여기서 이어서 읽을 수 있어요

원문 읽기

읽음 (0)

·takedown 요청