[웹 애니메이션] 웹 애니메이션 기초

1. 웹 애니메이션을 구현하는 4가지 방법

• 사용 예시는 참고 문서를 활용

1) CSS transition

• 가장 많이 사용하고, 쉽고 간단한 방식
• 러닝커브가 높지 않아 특별한 지식 없이도 충분히 사용 가능

2) CSS animation

• transition과 용도가 조금 다르다.
• 여러 효과를 혼합하거나 연쇄적 동작처럼 더 복잡한 인터랙션을 구현할 떄 유용

3) SVG animaition

• SVG(Scalable Vector Graphics)는 2차원 벡터 그래픽을 표현하기 위한 XML 마크업 언어
  • JPEG나 PNG에 비해 다음과 같은 장점이 있음
  • W3C 표준과 호환되기 때문에, HTML 문서에 그래도 사용 가능
  • JPEG, PNG 보다 용량이 작다.
  • 확대하더라도 깨짐 없이 선명하다.

4) animation API

• JS로 애니메이션을 구현한다.
• JS에서 직접 핸들링 하기 때문에 CSS 대비 자유도가 높아 복잡한 인터랙션이 가능

5) Canvas 애니매이션

• HTML5의 <canvas>요소를 이용해 픽셀단위로 그래픽을 그리는 방식으로도 가능하다.

 

2. 참조

1)웹 애니매이션 구현 4가지 방법 : https://fe-developers.kakaoent.com/2022/220630-four-ways-web-animation/

웹 애니메이션을 구현하는 4가지 방법 (feat. animation API) | 카카오엔터테인먼트 FE 기술블로그