인수에 정의된 값에 따라 요소에게 애니메이션을 구현하며 애니메이션을 제어할 수 있는 Animation
객체를 반환한다.
element.animate(keyframes, duration)
element.animate(keyframes, optional)
애니메이션 키프레임을 가지고 있는 배열이며 각 키프레임을 객체로 구현한다. 그리고 객체의 프로퍼티로 애니메이션이 적용될 속성을 정의한다.
이 방식은 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);
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);
애니메이션의 지속 시간을 밀리초(milliseconds)로 설정한다.
하나 이상의 옵션 속성을 가지고 있는 객체를 지정한다. 다음 아래와 같은 옵션을 사용할 수 있다.
id
delay
direction
normal
(정방향), reverse
(역방향), alternate
(정방향후 역방향), alternate-reverse
(역방향후 정방향)로 설정할 수 있다. 기본 값은 normal
이다.duration
easing
linear
, ease
, ease-in
, ease-out
, ease-in-out
로 지정할 수 있으며 cubic-bezier()
함수도 사용이 가능한다. 생략할 수 있으며 기본 값은 linear
이다.endDelay
fill
backwards
로 설정하면 바로 첫 키프레임의 style을 가지고 애니메이션이 시작되며 애니메이션이 완료되면 원래의 정의된 style로 돌아오지만 forwards
로 설정하면 원래의 style을 유지하다가 애니메이션이 시작되며 애니메이션이 종료된 후 마지막 키프레임의 style을 유지한다. both
는 시작 키프레임으로 style을 가지고 애니메이션을 시작하며 끝나면 마지막 키프레임의 style을 유지한다. 키프레임에 의해 유지된 값은 외부의 CSS 적용으로 재정의해도 그 값을 그대로 유지한다. 기본 값은 원래의 style을 가지고 애니메이션을 시작하고 끝나면 원래의 style로 돌아오는 none
이다.iterationStart
0.5
는 첫번째 반복의 중간에서 시작을 나타내며 이 값을 설정하면 두번 반복하는 애니메이션이 세번째 반복 중 중간에서 종료된다. 생략이 가능하며 기본 값은 0.0
이다.iterations
Infinity
키워드를 사용할 수도 있다.새로운 Animation
인스턴스를 반환한다.