Anime.js (/ˈæn.ə.meɪ/)는 간단하지만 강력한 API를 제공하는 가볍고 빠른 JavaScript 애니메이션 라이브러리입니다. CSS 속성, SVG, DOM 속성 그리고 JavaScript 객체를 조작해 애니메이션을 구현합니다.

시작하기

Staggering

객체가 출렁거리듯 움직이는 모션을 구현할 수 있습니다.

forward
from index
from center
easing
reversed
ripple

Anime의 스태거(staggering) 시스템은 복잡한 시퀀스 애니메이션과 겹치는 애니메이션을 간단하게 구현합니다. 타이밍(timings)과 속성(properties) 모두 조정 가능합니다.

스태거 사용법 학습

Layered CSS transforms

키프레임을 사용하여 여러 객체에 각기 다른 애니메이션을 설정할 수 있습니다.

translateX
translateY
rotate
scale

DOM 객체(HTML 요소)에 하나 이상의 CSS Transforms 속성을 각기 다른 타이밍으로 애니메이션 설정하여 풍부한 모션을 구현할 수 있습니다.

키프레임 사용법 학습

Controls & callbacks

애니메이션은 '타이밍'이 전부입니다.

애니메이션 시작
반복 1 시작
변경 시작
변경 완료
반복 1 완료
역재생
반복 2 시작
변경 시작
변경 완료
반복 2 완료
역재생
반복 3 시작
변경 시작
변경 완료
반복 3 완료
애니메이션 종료
지연(delay)
종료 지연(end-delay)
변경(change)

콜백(callbacks) 및 컨트롤(control) 기능을 사용하여 이벤트(Events)를 재생(Play), 일시 정지(Pause), 컨트롤(Control), 역재생(Reverse) 및 트리거(Trigger) 합니다.

콜백(callbacks)에 대해 학습

Animate anything

HTML 요소 / JavaScript 객체 / CSS 속성 / SVG 도형

Anime.js는 CSS 속성, SVG 도형&속성, DOM 객체, JavaScript 객체를 애니메이션 하는 단 하나의 API를 제공합니다.

애니메이션 가능한 속성에 대한 학습

시작하기

리소스 & 사용 설명서