anime.js

대상(Targets)

CSS 선택자(Selector)

모든 CSS 선택자 사용 가능

단, 가상 요소는 JavaScript를 사용해 타겟팅 할 수 없습니다.

유형(Type)	기본값(Default)	예제(Example)
String	`null`	`targets: '.anime'`

DOM 노드 / 노드리스트

DOM 노드(Node) 또는 노드리스트(NodeList)에 사용 가능

유형(Type)	기본값(Default)	예제(Example)
DOM Node	`null`	`targets: el.querySelector('.anime')`
NodeList	`null`	`targets: el.querySelectorAll('.anime')`

JavaScript 객체

숫자 값을 포함하는 속성이 하나 이상 있는 JavaScript 객체를 사용해 애니메이션

유형(Type)	기본값(Default)	예제(Example)
Object	`null`	`targets: myObjectProp`

{"charged":"0%","cycles":120}

배열(Array)

여러 대상을 포함하는 배열을 타겟으로 설정

혼합 유형을 허용 (예) [ '.anime', domNode, jsObject ]

유형(Type)	기본값(Default)	예제(Example)
Array	`null`	`targets: ['.anime', el.getElementById('#thing')]`

속성(Properties)

CSS 속성(Properties)

모든 CSS 속성 애니메이션 가능

대부분의 CSS 속성은 레이아웃을 변경하거나 다시 페인트 하여
애니메이션이 고르지 않게 하므로 Opacity와 CSS Transforms 속성을
가능한 한 우선 설정합니다.

적용 가능한 값에 대한 보다 자세한 정보는 값(values) 섹션 참고.

속성(Property)	값(value)
`opacity`	`0.5`
`left`	`'100px'`

CSS 트랜스폼(Transforms)

CSS 트랜스폼 애니메이션은 각 속성을 개별적으로 설정

각 트랜스폼 속성에 대해 다른 타이밍을 설정 가능합니다.
특정 속성 매개변수(specific property parameters) 섹션에서 자세한 내용을 참고하세요.

적용 가능한 값에 대한 보다 자세한 정보는 값(values) 섹션 참고.

유효 속성(Valid properties)	기본 단위(Default unit)
`'translateX'`	`'px'`
`'translateY'`	`'px'`
`'translateZ'`	`'px'`
`'rotate'`	`'deg'`
`'rotateX'`	`'deg'`
`'rotateY'`	`'deg'`
`'rotateZ'`	`'deg'`
`'scale'`	`—`
`'scaleX'`	`—`
`'scaleY'`	`—`
`'scaleZ'`	`—`
`'skew'`	`'deg'`
`'skewX'`	`'deg'`
`'skewY'`	`'deg'`
`'perspective'`	`'px'`

객체 속성(Object properties)

숫자 값을 포함하는 모든 객체 속성에 애니메이션을 적용 할 수 있습니다.
적용 가능한 값에 대한 보다 자세한 정보는 값(values) 섹션 참고.

예제(Example)	값(value)
`prop1`	`50`
`'prop2'`	`'100%'`

{"prop1":0,"prop2":"0%"}

DOM 속성(Attributes)

숫자 값을 포함하는 모든 DOM 속성(Attributes)에 애니메이션을 적용 할 수 있습니다.
적용 가능한 값에 대한 보다 자세한 정보는 값(values) 섹션 참고.

예제(Example)	값(value)
`value`	`1000`
`volume`	`0`
`data-custom`	`'3 dogs'`

SVG 속성(Attributes)

다른 DOM 속성과 마찬가지로 하나 이상의 숫자 값을 포함하는
모든 SVG 속성에 애니메이션을 적용 할 수 있습니다.

적용 가능한 값에 대한 보다 자세한 정보는 값(values) 섹션 참고.
SVG 애니메이션은 SVG 섹션 참고.

예제(Example)	값(value)
`points`	`'64 68.64 8.574 100 63.446 67.68 64 4 64.554 67.68 119.426 100'`
`scale`	`1`
`baseFrequency`	`0`

속성 매개변수(Property parameters)

지속시간(Duration)

애니메이션 지속시간(duration)을 밀리 초(ms) 단위로 설정합니다.

유형(Type)	기본값(Default)	예제(Example)
Number	`1000`	`3000`
anime.stagger	스태거(staggering) 섹션 참고	`anime.stagger(150)`
Function	함수 매개변수(function based parameters) 섹션 참고	`function (el, i) { return i * 150 }`

3000 ms

지연시간(Delay)

애니메이션 시작 시간을 밀리 초(ms) 단위로 지연합니다.

유형(Type)	기본값(Default)	예제(Example)
Number	`0`	`1000`
anime.stagger	스태거(staggering) 섹션 참고	`anime.stagger(150)`
Function	함수 매개변수(function based parameters) 섹션 참고	`function (el, i) { return i * 150 }`

1000 ms

종료 지연(end delay)

애니메이션 종료 시간을 밀리 초(ms) 단위로 지연합니다.

유형(Type)	기본값(Default)	예제(Example)
Number	`0`	`1000`
anime.stagger	스태거(staggering) 섹션 참고	`anime.stagger(150)`
Function	함수 매개변수(function based parameters) 섹션 참고	`function(el, i) { return i * 150 }`

1000 ms

이징(Easing)

애니메이션 타이밍 기능을 설정합니다.

사용 가능한 이징(easings) 및 매개 변수 전체 목록은 이징(easings) 섹션 참고

유형(Type)	기본값(Default)	예제(Example)
String	`'easeOutElastic(1, .5)'`	`easing: 'easeInOutQuad'`

easeInOutBack

반올림(Round)

값을 x 소수(decimals)로 반올림(round) 합니다.

유형(Type)	기본값(Default)	예제(Example)
Number	`0`	`round: 10`

특정 속성 매개변수(Specific property parameters)

객체를 값으로 사용하여 애니메이션의 각 속성에 특정 매개변수를 설정합니다.
객체에 설정되지 않은 다른 속성은 기본 애니메이션 설정이 상속됩니다.

유형(Type)	예제(Example)
Object	`rotate: { value: 360, duration: 1800, easing: 'easeInOutSine' }`

함수 매개변수(Function based parameters)

애니메이션의 모든 대상과 속성에 대해 다른 값을 가져옵니다.
이 함수는 3개의 인자를 허용합니다.

⬇︎

전달인자(Arguments)	정보(Info)
`target`	현재 애니메이션 대상 요소
`index`	애니메이션 대상 요소의 인덱스
`targetsLength`	애니메이션 대상의 총 개수

보다 쉬운 값 조작 설정은 스태거(staggering) 섹션 참고.

delay = 0 * 100 / endDelay = 3 * 100
delay = 1 * 100 / endDelay = 2 * 100
delay = 2 * 100 / endDelay = 1 * 100

애니메이션 매개변수(Animation parameters)

방향(Direction)

애니메이션의 방향을 설정합니다.

수용(Accepts)	정보(Info)
`'normal'`	애니메이션 순방향 재생 (0% → 100%)
`'reverse'`	애니메이션 역방향 재생 (100% → 0%)
`'alternate'`	애니메이션 번갈아 재생 (0% → 100% → 0% 순)

normal
reverse
alternate

반복(Loop)

애니메이션 반복 횟수를 설정합니다.

수용(Accepts)	정보(Info)
`Number`	반복 횟수
`true`	무한 반복

순방향(normal) 재생 → 3회 반복
역방향(reverse) 재생 → 3회 반복
번갈아(alternate) 재생 → 3회 반복
 
순방향(normal) 재생 → 무한 반복
역방향(reverse) 재생 → 무한 반복
번갈아(alternate) 재생 → 무한 반복
 

자동 재생(Autoplay)

애니메이션 자동 시작 여부를 설정합니다.

수용(Accepts)	정보(Info)
`true`	애니메이션 자동 시작 ⭕️
`false`	애니메이션 자동 시작 ❌

autoplay: true

autoplay: false

값(Values)

단위 없음(Unitless)

애니메이션 설정 값에 단위를 설정하지 않더라도,
원래 값에 단위가 필요한 경우 자동으로 추가됩니다.

유형(Type)	예제(Example)
Number	`translateX: 250`

특정 단위(Specific unit)

애니메이션이 특정 단위(certain unit)를 사용하도록 하고,
초기 대상 값을 자동으로 변환(convert) 합니다.

변환 정확도(Conversion accuracy)는 사용된 단위(unit)에 따라 달라질 수 있습니다.
배열을 사용하여 애니메이션의 초기 값을 직접 정의 할 수도 있습니다.
자세한 내용은 from to values 섹션 참고

유형(Type)	예제(Example)
String	`width: '100%'`

상대(Relative) 값

원래 값에 더하거나, 빼거나, 곱합니다.

수용(Accepts)	효과(Effect)	예제(Example)
`'+='`	Add	`'+=100'`
`'-='`	Substract	`'-=2turn'`
`'*='`	Multiply	`'*=10'`

색상(Colors)

16진수(Hexcode), RGB, RGBA, HSL 또는 HSLA 색상 값을 허용하고 변환합니다.

CSS 컬러 코드( 예: 'red', 'yellow', 'aqua' )는 미지원.

수용(Accepts)	예제(Example)
Hexcode	`'#FFF'` or `'#FFFFFF'`
RGB	`'rgb(255, 255, 255)'`
RGBA	`'rgba(255, 255, 255, .2)'`
HSL	`'hsl(0, 100%, 100%)'`
HSLA	`'hsla(0, 100%, 100%, .2)'`

HEX
RGB
HSL
RGBA
HSLA

시작, 끝(From To)

애니메이션이 지정된 값에서 시작하도록 설정합니다.

유형(Type)	예제(Example)
`Array`	`[ '50%', '100%' ]`

함수 기반 값(Function based values)

애니메이션의 모든 대상과 속성에 대해 다른 값을 설정합니다.
이 함수는 3개의 인자를 허용합니다.

⬇︎

전달인자(Arguments)	정보(Info)
`target`	현재 애니메이션 대상 요소
`index`	애니메이션 대상 요소 인덱스
`targetsLength`	애니메이션 대상의 총 개수

키프레임(Keyframes)

애니메이션 키프레임(Animation keyframes)

애니메이션 키프레임은 keyframes 속성 값으로 배열을 사용하여 정의합니다.

키프레임 값으로 설정된 속성 중 duration이 없으면, 각 키프레임 duration은
애니메이션의 전체 duration을 키프레임 수로 나눈 것과 같이 설정됩니다.

유형(Type)	예제(Example)
`Array`	`[ { value: 100, easing: 'easeOutExpo' }, { value: 200, delay: 500 }, { value: 300, duration: 1000 } ]`

속성 키프레임(Property keyframes)

애니메이션 키프레임(animation keyframes)과 마찬가지로, 속성 키프레임(property keyframes)은
속성 값으로 배열을 사용해 설정합니다. 각 속성에 고유한 키프레임 배열이 제공되므로 속성 키프레임은
겹치는(overlapping) 애니메이션을 허용합니다.

키프레임 값으로 설정된 속성 중 duration이 없으면, 각 키프레임 duration은
애니메이션의 전체 duration을 키프레임 수로 나눈 것과 같이 설정됩니다.

유형(Type)	예제(Example)
`Array`	`[ { value: 100, easing: 'easeOutExpo' }, { value: 200, delay: 500 }, { value: 300, duration: 1000 } ]`

스태거(Staggering)

스태거 기초(Staggering basics)

스태거를 통해 뒤 따르는 것과 겹치는 액션(follow through and overlapping action)을
여러 요소에 애니메이션 할 수 있습니다.

anime.stagger(value, options)

전달인자(Arguments)	유형(Type)	정보(Info)	필수(Required)
값 (Value)	`Number`, `String`, `Array`	스태거 설정 할 값	네 (Yes)
옵션 (Options)	`Object`	스태거 매개변수	아니오 (No)

delay = (100 * 0) ms
delay = (100 * 1) ms
delay = (100 * 2) ms
delay = (100 * 3) ms
delay = (100 * 4) ms
delay = (100 * 5) ms

시작 값(Start value)

특정 값에서 스태거 효과를 시작합니다. (모든 설정 요소에 지연 시간 추가)

anime.stagger( value, { start: startValue } )

유형(Types)	정보(Info)
`Number`, `String`	속성 값과 동일, 값(values) 섹션 참조

delay = 500 + (100 * 0) ms
delay = 500 + (100 * 1) ms
delay = 500 + (100 * 2) ms
delay = 500 + (100 * 3) ms
delay = 500 + (100 * 4) ms
delay = 500 + (100 * 5) ms

범위 값(Range value)

두 숫자 사이에 값을 고르게 분배합니다.

anime.stagger( [ startValue, endValue ] )

유형(Type)	정보(Info)
`startValue`	범위 시작 값
`endValue`	범위 종료 값

rotate = ((360 - (-360)) / 5) * 0 → -360deg
rotate = ((360 - (-360)) / 5) * 1 → -216deg
rotate = ((360 - (-360)) / 5) * 2 → -72deg
rotate = ((360 - (-360)) / 5) * 3 → 72deg
rotate = ((360 - (-360)) / 5) * 4 → 216deg
rotate = ((360 - (-360)) / 5) * 5 - 360 → 360deg

From 값(value)

특정 위치에서 스태거 효과를 시작합니다.

anime.stagger(value, { from: startingPosition })

옵션(Options)	유형(Type)	정보(Info)
`'first'` (기본 값)	`String`	첫 번째 요소에서 스태거 효과 시작
`'last'`	`String`	마지막 요소부터 스태거 효과 시작
`'center'`	`String`	중앙 요소부터 스태거 효과 시작
`index`	`number`	설정된 인덱스에서 스태거 효과 시작

방향(Direction)

스태거 작동 순서를 변경합니다.

anime.stagger(value, { direction: 'reverse' })

옵션(Options)	정보(Info)
`'normal'` (기본 값)	첫 번째 요소 → 마지막 요소까지 순방향으로 스태거
`'reverse'`	마지막 요소 → 첫 번째 요소까지 역방향으로 스태거

이징(Easing)

이징(easing) 함수를 사용하여 값을 스태거 합니다.

anime.stagger( value, { easing: 'easingName' } )

유형(Type)	정보(Info)
`String`	유효한 모든 이징(easing) 이름 허용. 이징(easing) 섹션 참고
`function(i) { ... }`	사용자 정의 이징(easing) 함수, 사용자 정의 이징(easing) 섹션 참고

그리드(Grid)

"ripple" 효과를 허용하는 2D 배열을 기반으로 하는 놀라운 설정!

anime.stagger(value, { grid: [ columns, rows ] })

유형(Type)	정보(Info)
`Array`	2개의 값을 갖는 배열로 첫 번째 값은 열(columns) 개수, 두 번째 값은 행(rows) 개수

축(Axis)

그리드 스태거(grid staggering) 효과의 방향을 강제로 설정합니다.

anime.stagger(value, { grid: [ columns, rows ], axis: 'x' })

매개변수(Parameters)	정보(Info)
`'x'`	X축 설정
`'y'`	Y축 설정

타임라인(Timeline)

타임라인 기초(Timeline basics)

여러 애니메이션을 일괄적으로 컨트롤 하고자 할 경우, 타임라인을 사용합니다.
기본적으로 타임라인에 추가 된 각 애니메이션은 이전 애니메이션이 종료된 후 시작됩니다.

타임 라인 만들기

var myTimeline = anime.timeline( parameters );

전달인자(Argument)	유형(Type)	정보(Info)	필수(Required)
`parameters`	`Object`	타임라인에 속한 애니메이션이 상속하는 기본 매개변수	아니오 (No)

타임라인에 애니메이션 추가

myTimeline.add( parameters, offset );

전달인자(Argument)	유형(Types)	정보(Info)	필수(Required)
`parameters`	`Object`	자식 애니메이션에 설정된 매개변수는 타임라인 기본 매개변수를 덮어씀	네 (Yes)
`time offset`	`String` 또는 `Number`	타임라인 옵셋(Timeline offsets) 섹션을 참고	아니오 (No)

타임라인 옵셋(Timeline Offsets)

타임라인에 애니메이션을 추가하는 .add() 메서드의 두 번째 전달인자(옵션)로 시간 옵셋을 설정할 수 있습니다.
옵셋은 타임라인에서 애니메이션이 시작되는 시점을 설정하는 것을 말하며, 별도 설정하지 않을 경우
이전 애니메이션이 끝난 후 애니메이션이 시작됩니다.

옵셋은 마지막 애니메이션에 상대적(relative)이거나, 또는 전체 타임라인에 절대적(absolute)으로 설정할 수 있습니다.

유형(Type)	옵셋(Offset)	예제(Example)	정보(Info)
String	`'+='`	`'+=200'`	이전 애니메이션이 끝난 후, 200ms 뒤에서 애니메이션 시작
String	`'-='`	`'-=200'`	이전 애니메이션이 끝나기 전, 200ms 앞에서 애니메이션 시작
Number	`Number`	`100`	타임라인의 애니메이션 위치에 관계없이 100ms에서 바로 시작

옵셋(offset) 없음
상대적인 옵셋 설정 ('-=600')
절대적인 옵셋 설정 (400)

매개변수 상속(Parameters inheritance)

부모 타임라인 인스턴스에 설정된 일부 매개변수는 모든 자식 애니메이션이 상속 할 수 있습니다.

상속 될 수 있는 매개변수
`targets`
`easing`
`duration`
`delay`
`endDelay`
`round`

컨트롤(Controls)

재생(Play) / 일시정지(Pause)

일시정지 된 애니메이션을 재생하거나 autoplay 매개변수가 false인 경우, 애니메이션을 시작합니다.

animation.play();

실행중인 애니메이션을 일시정지 합니다.

animation.pause();

재시작(Restart)

타임라인 애니매이션을 처음부터 다시 시작합니다.

animation.restart();

역재생(Reverse)

애니메이션 진행 방향을 반대로 바꿉니다.

animation.reverse();

탐색(Seek)

특정 시간(밀리 초)으로 탐색 이동합니다.

animation.seek( timeStamp );

스크롤하는 동안 애니메이션을 제어하는데 사용할 수도 있습니다.

animation.seek( (scrollPercent / 100) * animation.duration );

타임라인 컨트롤(Timeline controls)

타임라인은 다른 anime.js 인스턴스와 같이 컨트롤 할 수 있습니다.

// 타임라인 재생
timeline.play();

// 타임라인 일시정지
timeline.pause();

// 타임라인 애니메이션 재시작
timeline.restart();

// 타임라인 탐색(특정 시간(ms))
timeline.seek(timeStamp);

콜백(Callbacks) & 프로미스(Promises)

업데이트(Update)

애니메이션 재생이 시작되는 즉시 모든 프레임에서 콜백 함수가 트리거(실행) 됩니다.

유형(Type)	매개변수(Parameters)	정보(Info)
Function	animation	현재 애니메이션 중인 객체를 반환

시작(Begin) & 완료(Complete)

begin() 콜백 함수는 애니메이션이 시작할 때 1번 실행됩니다.

complete() 콜백 함수는 애니메이션이 종료될 때 1번 실행됩니다.

애니메이션 duration 값이 0일 경우, begin(), complete() 콜백 함수가 동시에 실행됩니다.

유형(Type)	매개변수(Parameters)	정보(Info)
Function	animation	현재 재생 중인 애니메이션 객체 반환

반복 시작(loopBegin) & 반복 종료(loopComplete)

애님메이션이 반복 시작될 때마다 loopBegin() 콜백 함수가 실행됩니다.

애님메이션이 반복 종료될 때마다 loopComplete() 콜백 함수가 실행됩니다.

유형(Type)	매개변수(Parameters)	정보(Info)
Function	animation	현재 애니메이션 중인 객체 반환

체인지(Change)

지연 시간(delay, endDelay)을 제외한 진행 중인 애니메이션 프레임에서 콜백 함수가 실행됩니다.

유형(Type)	매개변수(Parameters)	정보(Info)
Function	animation	현재 애니메이션 중인 객체 반환

체인지 시작(changeBegin) & 체인지 종료(changeComplete)

애니메이션이 변경되어 시작될 때마다 changeBegin() 콜백 함수가 실행됩니다.

애니메이션이 변경되어 종료될 때마다 changeComplete() 콜백 함수가 실행됩니다.

애니메이션 방향(direction)은 changeBegin(), changeComplete()가 실행되는 순서에 영향을 줍니다.

유형(Type)	매개변수(Parameters)	정보(Info)
Function	animation	현재 애니메이션 중인 객체 반환

finished 프로미스(Finished promise)

모든 애니메이션 인스턴스는 애니메이션이 종료되면 finished 프로미스 객체를 반환합니다.

animation.finished.then(function() {
  // 반환된 프로미스 객체 finished의 then() 메서드를 통해 뭔가를 수행
});

프로미스(Promises)를 IE 브라우저는 지원하지 않습니다.

벡터 그래픽(SVG)

모션 패스(Motion path)

SVG <path> 요소의 x, y 및 angle 값을 기준으로 요소를 애니메이션 합니다.

var myPath = anime.path( 'svg path' );

path() 함수는 지정된 특정 속성을 반환하는 새로운 함수를 반환합니다. (클로저 함수 실행 → 함수 반환)

모션 패스(Motion path) 애니메이션은 v3부터 작동합니다.

SVG 경로의 'px'에 현재 x 값을 반환

매개변수(Parameters)	예제(Example)	정보(Info)
`'x'`	`myPath('x')`	SVG 패스(path)의 `'px'`에 해당하는 현재 x 값을 반환
`'y'`	`myPath('y')`	SVG 패스(path)의 `'px'`에 해당하는 현재 y 값을 반환
`'angle'`	`myPath('angle')`	SVG 패스(path)의 `'degrees'`에 해당하는 현재 angle 값을 반환

몰핑(Morphing)

2개의 SVG 도형(Shapes) 사이 전환(transition) 애니메이션을 생성합니다.

주의! SVG 도형(Shapes)의 포인트(points) 개수가 동일해야 합니다.

SVG 도형 몰핑 애니메이션 참고

라인 드로잉(Line drawing)

'stroke-dashoffset' 속성을 사용하여 패스 드로잉(path drawing) 애니메이션을 만듭니다.
'anime.setDashoffset'을 사용하여 'dash-offset' 패스(path) 값을 정해진 from to 값으로 설정합니다.

strokeDashoffset: [ anime.setDashoffset, 0 ]

라인 드로잉(line drawing) 애니메이션 참고

이징(Easings)

리니어(Linear)

애니메이션에 이징 함수를 설정하지 않습니다.
불투명도(opacity) 또는 색상(colors) 전환에 유용합니다.

easing: 'linear'

Penner의 함수(functions)

Robert Penner의 이징 함수 내장

이징 함수 별 움직임은 easings.net 참고

easing: 'easeInOutSine'

사용 가능한 이징(Easings) 키워드

시작점(in)	끝점(out)	시작 & 끝점(in-out)
`'easeInQuad'`	`'easeOutQuad'`	`'easeInOutQuad'`
`'easeInCubic'`	`'easeOutCubic'`	`'easeInOutCubic'`
`'easeInQuart'`	`'easeOutQuart'`	`'easeInOutQuart'`
`'easeInQuint'`	`'easeOutQuint'`	`'easeInOutQuint'`
`'easeInSine'`	`'easeOutSine'`	`'easeInOutSine'`
`'easeInExpo'`	`'easeOutExpo'`	`'easeInOutExpo'`
`'easeInCirc'`	`'easeOutCirc'`	`'easeInOutCirc'`
`'easeInBack'`	`'easeOutBack'`	`'easeInOutBack'`
`'easeInBounce'`	`'easeOutBounce'`	`'easeInOutBounce'`

큐빅 베지어 커브(Cubic Bézier Curve)

cubicBezier(x1, y1, x2, y2) 함수를 사용해 사용자가 직접 '큐빅 베지어 커브'를 만들 수 있습니다.

easing: 'cubicBezier(.5, .05, .1, .3)'

Ceaser 커브 제너레이터를 사용해 손쉽게 베지어 커브(곡선 좌표)를 생성 할 수 있습니다.

스프링(Spring)

스프링(Spring) 물리 기반 이징

easing: 'spring( mass, stiffness, damping, velocity )'

스프링 애니메이션의 지속시간(duration)은 spring 매개변수에 의해 설정됩니다.
애니메이션 duration 매개변수는 고려되지 않습니다.

매개변수(Parameter)	기본값(Default)	최솟값(Min)	최댓값(Max)
Mass (질량)	`1`	`0`	`100`
Stiffness (강도)	`100`	`0`	`100`
Damping (제동)	`10`	`0`	`100`
Velocity (속도)	`0`	`0`	`100`

탄력(Elastic)

탄력 이징(Elastic Easing)

easing: 'easeOutElastic( amplitude, period )'

시작점(in)	끝점(out)	시작 & 끝점(in-out)
`'inElastic'`	`'outElastic'`	`'inOutElastic'`

매개변수(Parameter)	기본값(Default)	최솟값(Min)	최댓값(Max)	정보(Info)
Amplitude (진폭)	`1`	`1`	`10`	커브(curve)의 오버슈트(overshoot)를 컨트롤
Period (기간)	`0.5`	`0.1`	`2`	커브(curve)가 몇 번이고 앞, 뒤로 이동하는지 컨트롤

스텝(Steps)

애니메이션이 최종 값에 도달하는데 걸리는 단계(Step) 수를 정의합니다.

easing: 'steps( numberOfSteps )'

매개변수(Parameter)	기본값(Default)	최솟값(Min)	최댓값(Max)
스텝 (단계)	`10`	`1`	`∞`

사용자 정의 이징 함수(Custom easing function)

사용자 정의 이징 함수는 함수 기반 값(function based value)으로 반환해야 합니다.

easing: function() { return function(time) { return time * i } }

매개변수(Parameter)	정보(Info)
Time (시간)	애니메이션의 현재 시간을 반환

헬퍼(Helpers)

제거(remove)

실행중인 애니메이션 또는 타임라인에서 대상(targets)을 제거합니다.
targets 매개변수는 targets 속성과 동일한 값을 허용합니다.

anime.remove( targets )

가져오기(get)

요소의 원래 값(original value)을 반환합니다.

anime.get( target, propertyName, unit );

anime.js는 getComputedStyle을 사용하여 원본 CSS에 접근하므로 도출되는 값은
대부분 'px' 단위 값으로 반환되며 3번째(옵션) 인자는 원하는 단위로 값을 변환합니다.

anime.get( domNode, 'width', 'rem' );

매개변수(Parameter)	유형(Type)	정보(Info)
target	`String`, `var`	유효한 모든 대상을 사용할 수 있습니다.

주의! CSS 트랜스폼(transforms) 속성의 경우, 인라인 스타일 속성 값만 접근 할 수 있습니다.

설정하기(set)

지정된 대상에 값을 즉시 설정합니다.

anime.set( targets, { property: value } );

매개변수(Parameters)	유형(Types)	정보(Info)
target(s)	`String`, `var`	유효한 모든 대상(targets)을 사용할 수 있습니다.
values	`Object`	유효한 모든 속성(properties)을 사용할 수 있습니다.

랜덤(random)

특정 범위 내에서 임의의 정수를 반환합니다.

anime.random( minValue, maxValue );

틱(tick)

requestAnimationFrame 루프(loop)를 사용하여 애니메이션을 재생합니다.

animation.tick( time )

anime.js에 내장된 requestAnimationFrame 루프가 시작되지 않도록
autoplay 매개변수를 false로 설정하는 것을 잊지 마세요.

러닝(running)

현재 실행중인 모든 활성화 된 anime.js 인스턴스의 배열을 반환합니다.

anime.running