DOM

settings_applicationsEventTarget  >   settings_applicationsNode  >   settings_applicationsElement  >   settings_applications[[Prototype]]

DOM

Editing
  • account_tree
  • bug_report

Animationanimationanimate(Arraykeyframes | Objectkeyframes, intduration | Objectoptions)

인수에 정의된 값에 따라 요소에게 애니메이션을 구현하며 애니메이션을 제어할 수 있는 Animation 객체를 반환한다.

설명

CSS와 별개의 독립적인 애니메이션을 구현할 수 있으며 Animation 객체의 인스턴스를 반환한다. 반환된 Animation 객체는 애니메이션을 세밀하게 다룰 수 있는 프로퍼티와 메소드 그리고 이벤트를 제공한다.

상황과 상태에 따른 정밀한 애니메이션 동작을 구현하고자 한다면 이 메소드를 사용하는 것이 좋다.

구문

형식
element.animate(keyframes, duration)
형식
element.animate(keyframes, optional)

매개 변수

Arraykeyframes필수

애니메이션 키프레임을 가지고 있는 배열이며 각 키프레임을 객체로 구현한다. 그리고 객체의 프로퍼티로 애니메이션이 적용될 속성을 정의한다.

키 프레임을 정의한 객체(속성 명과 값으로 구성)를 원소로 가지고 있는 배열

이 방식은 getKeyframes() 메소드가 반환한 표준 형식이다.

document.querySelector(".demo").animate([
    // from keyframe
    {
        opacity: 0,
        backgroundColor: "#FFF"
    },
    // to keyframe
    {
        opacity: 1,
        backgroundColor: "#CCC"
    }
], 1000);

오프셋 값을 설정하여 각 키프레임에 대한 오프셋을 지정할 수 있다. 오프셋은 타임라인상에서 구간을 설정하는 것이며 0~1사이의 값을 지정한다. 첫번째와 마지막 속성에서는 정의할 수 없다.

document.querySelector(".demo").animate([
    { transform: "translateX(0px)" },
    { transform: "translateX(200px)", offset: 0.7 },
    { transform: "translateY(400px)", offset: 0.8 },
    { transform: "translateX(600px)" }
], 2000);

키프레임 사이에 easing을 적용할 수 있다. 설정된 키프레임에서 다음 키프레임까지만 적용된다.

document.querySelector(".demo").animate([
  	{ transform: "translateX(0px)" },
    { transform: "translateX(200px)", easing: "ease-out" },
    { transform: "translateY(400px)", easing: "ease-in" },
    { transform: "translateX(600px)" }
], 2000);
또는 다른 타입
Objectkeyframes필수
속성과 값이 배열로 구성된 key-value 쌍을 포함하는 객체
document.querySelector(".demo").animate({
  	backgroundColor: ["#FFF", "#FFFF00"], // [from, to]
    color: ["#000", "#0000FF"] // [from, to]
}, 2000);

이 형식의 경우에는 다음 아래의 샘플 코드처럼 각 배열의 원소 수가 같을 필요는 없다. 지정된 값은 독립적으로 배치된다.

document.querySelector(".demo").animate({
  	backgroundColor: ["#FFF", "#FFFF00", "#00FF00"], // offset: 0, 0.5, 1
    color: ["#000", "#0000FF"] // offset: 0, 1
}, 2000);

다음의 경우는 애니메이션 속성에 대한 단계의 값과 오프셋, easing을 원소로 갖는 배열로 설정했다.

document.querySelector(".demo").animate({
  	backgroundColor: ["#FFF", "#FFFF00", "#00FF00"],
    offset: [0, 0.3, 1],
    easing: ["ease-in", "ease-out"]
}, 2000);
intduration필수

애니메이션의 지속 시간을 밀리초(milliseconds)로 설정한다.

또는 다른 타입
Objectoptions필수

하나 이상의 옵션 속성을 가지고 있는 객체를 지정한다. 다음 아래와 같은 옵션을 사용할 수 있다.

  • id
    • 생략 가능하며 고유 식별키를 DOMString 으로 지정
  • delay
    • 애니메이션을 지연시키는 시간을 밀리초(milliseconds)로 설정한다. 생략 가능하며 기본 값은 0이다.
  • direction
    • 애니메이션의 실행 방향을 normal(정방향), reverse(역방향), alternate(정방향후 역방향), alternate-reverse(역방향후 정방향)로 설정할 수 있다. 기본 값은 normal 이다.
  • duration
    • 애니메이션이 완료되는 시간을 밀리초(milliseconds)로 설정한다. 선택사항이지만 기본값은 0이므로 설정하지 않는다면 애니메이션이 실행되지 않는다.
  • easing
    • 애니메이션의 속도 변화를 지정한다. 사전에 정의된 값은 linear, ease, ease-in, ease-out, ease-in-out로 지정할 수 있으며 cubic-bezier() 함수도 사용이 가능한다. 생략할 수 있으며 기본 값은 linear이다.
  • endDelay
    • 애니메이션이 끝난 후 지연되는 시간을 밀리초(milliseconds)로 설정할 수 있다. 다른 애니메이션의 종료 시간을 기준으로 애니메이션을 시퀀싱할 때 주로 사용한다. 생략이 가능하며 기본 값은 0이다.
  • fill
    • 요소가 기본적으로 가지고 있는 style과 키프레임에 정의된 style과의 관계를 설정한다. backwards로 설정하면 바로 첫 키프레임의 style을 가지고 애니메이션이 시작되며 애니메이션이 완료되면 원래의 정의된 style로 돌아오지만 forwards로 설정하면 원래의 style을 유지하다가 애니메이션이 시작되며 애니메이션이 종료된 후 마지막 키프레임의 style을 유지한다. both는 시작 키프레임으로 style을 가지고 애니메이션을 시작하며 끝나면 마지막 키프레임의 style을 유지한다. 키프레임에 의해 유지된 값은 외부의 CSS 적용으로 재정의해도 그 값을 그대로 유지한다. 기본 값은 원래의 style을 가지고 애니메이션을 시작하고 끝나면 원래의 style로 돌아오는 none이다.
  • iterationStart
    • 반복의 어느 시점에서 애니메이션을 시작해야 하는지를 설정한다. 예를 들어 0.5는 첫번째 반복의 중간에서 시작을 나타내며 이 값을 설정하면 두번 반복하는 애니메이션이 세번째 반복 중 중간에서 종료된다. 생략이 가능하며 기본 값은 0.0이다.
  • iterations
    • 애니메이션이 반복되는 횟수를 지정한다. 기본 값은 1이며 요소가 존재하는 한 반복될 수 있도록 Infinity 키워드를 사용할 수도 있다.

반환

Animationanimation

새로운 Animation 인스턴스를 반환한다.

버전 명세

Web Animations API
#dom-animatable-animate

지원 웹브라우저