프론트엔드
웹 애니메이션을 구현하는 4가지 방법 (feat. animation API)
두줄요약
CSS transition·animation, SVG, Animation API로 메뉴 전환 애니메이션을 구현했습니다. 복잡한 상호작용에는 Promise와 그룹 관리를 지원하는 Animation API를 제시합니다.
구조와 흐름
- 햄버거 메뉴를 X 버튼으로 전환하는 예제로 CSS transition, CSS animation, SVG animation, Animation API 비교
- 회전·크기 변형과 역방향 재생을 각 방식의 이벤트·상태 관리로 구현
선택 이유
- 단순한 상태 전환에 적합한 CSS transition
- 복합 효과와 연쇄 동작에 활용 가능한 CSS animation
- JavaScript 기반 제어, 변수·함수 재사용, Promise 완료 처리 지원의 Animation API
장단점
- CSS animation의 클릭 기반 상호작용에서 길어지는 키프레임·클래스·이벤트 처리 코드
- SVG 단독 구현의 반복적인 마크업과 낮은 구현 효율
- Animation API의 요소별 애니메이션 반환값 의존과 GroupEffect 기반 그룹 관리 대안
주의할 점
- SVG animateTransform 등 일부 애니메이션 스펙의 브라우저별 지원 여부 확인
- SVG keySplines 사용 시 calcMode="spline" 속성 필요
- GroupEffect·SequenceEffect 사용을 위한 별도 모듈 필요 가능성
