프론트엔드
SVG를 이용하여 Animation 만들기
두줄요약
SVG 도형을 추출해 ID와 그룹 단위로 CSS 애니메이션을 적용하는 방법을 정리했습니다. hover 이동, 클릭 색상 변경, 순차 등장 애니메이션까지 구현 과정을 소개했습니다.
핵심 내용
- SVG 도형을 Figma로 추출한 뒤 ID와 그룹 구조를 활용해 CSS 애니메이션을 적용하는 방법 정리
- hover 상태에서 transform, opacity, transition을 조합해 도형이 부드럽게 이동하는 애니메이션 구성
- 클릭 시 CSS 변수 값을 JavaScript로 갱신해 도형 색상을 랜덤 팔레트로 변경
@keyframes,animation-delay,animation-fill-mode를 이용해 여러 SVG 요소가 순차적으로 등장하는 애니메이션 구현