웹 애니메이션

1. 소개

// 애니메이션 중간 지점으로 이동한 뒤 opacity가 50%인지 확인
for (const animation of elem.getAnimations()) {
  const { delay, activeDuration } = animation.effect.getComputedTiming();
  animation.currentTime = delay + activeDuration / 2;
}
assert.strictEqual(getComputedStyle(elem).opacity, '0.5');

// 애니메이션이 끝난 후 로딩 화면이 숨겨지는지 확인
for (const animation of elem.getAnimations()) {
  animation.finish();
}
// 이벤트 핸들러가 실행될 수 있도록 한 프레임 대기
requestAnimationFrame(() => {
  assert.strictEqual(
    getComputedStyle(document.querySelector('#loading')).display, 'none');
});

2. 명세 규약

이 명세서는 애니메이션과 애니메이션 효과 등과 같은 추상 개념과, 그에 속한 재생 속도나 반복 지속 시간과 같은 속성들을 먼저 설명합니다. 이러한 속성 외에도, 재생 속도 설정이나 시작 시간 설정과 같이, 이러한 속성을 업데이트하는 구체적인 절차가 자주 존재합니다.

이 명세서가 특정 절차에 연결하지 않은 경우, 예를 들어 "make animation’s start time unresolved"과 같이 사용자 에이전트가 속성을 업데이트해야 하는 텍스트는 관련 절차를 호출하지 않고 직접적으로 해당 속성을 업데이트하는 것을 의미합니다.

이 명세에 국한되지 않는 추가적인 문서 규약은 문서 규약에서 설명합니다.

3. 웹 애니메이션 모델 개요

이 섹션은 규범적이지 않습니다

웹 애니메이션 모델은 크게 두 가지 독립적인 부분, 즉 타이밍 모델과 애니메이션 모델로 구성됩니다. 각 부분의 역할은 다음과 같습니다:

타이밍 모델

어떤 순간의 시간을 받아서, 반복 진행도라 불리는 애니메이션의 한 반복 내 비례적 거리를 계산합니다. 또한 반복 인덱스도 기록하는데, 이는 일부 애니메이션이 반복될 때마다 달라질 수 있기 때문입니다.

애니메이션 모델

타이밍 모델에서 생성된 반복 진행도 값과 반복 인덱스를 받아서, 대상 속성에 적용할 일련의 값들로 변환합니다.

이 흐름은 그래픽적으로 다음과 같이 표현할 수 있습니다:

예를 들어, 다음과 같은 애니메이션을 생각해봅시다:

• 3초 후에 시작

• 두 번 반복

• 매번 2초 소요

• 사각형의 너비를 50픽셀에서 100픽셀로 변경

첫 세 항목은 타이밍 모델에 적용됩니다. 6초 시점에는 애니메이션이 두 번째 반복의 중간 지점임을 계산하고 결과값 0.5를 생성합니다. 애니메이션 모델은 이 정보를 사용하여 너비를 계산합니다.

이 명세서는 타이밍 모델부터 시작해 애니메이션 모델로 이어집니다.

4. 타이밍 모델

이 섹션에서는 웹 애니메이션 타이밍 모델의 동작을 설명하고 정의합니다.

4.1. 타이밍 모델 개요

이 섹션은 규범적이지 않습니다

웹 애니메이션 타이밍 모델의 특징은 무상태와 계층적이라는 두 가지입니다.

4.1.1. 무상태

웹 애니메이션 타이밍 모델은 입력된 시간을 받아서 반복 진행도를 출력합니다. 출력은 오직 입력 시간만을 기준으로 이전 입력과는 무관하게 결정되므로, 이 모델은 무상태로 설명할 수 있습니다. 이는 모델에 다음과 같은 특성을 부여합니다:

프레임 속도 독립적

출력이 이전 입력에 독립적이기 때문에, 모델의 업데이트 속도는 진행도에 영향을 미치지 않습니다. 입력 시간이 실제 시간의 진행에 비례한다면, 애니메이션은 실행되는 기기의 성능과 관계없이 동일한 속도로 진행됩니다.

방향 무관

입력의 순서가 중요하지 않기 때문에, 모델은 방향성이 없습니다. 즉, 모델을 임의의 시점으로 업데이트해도 별도의 처리가 필요하지 않습니다.

상수 시간 탐색

각 입력이 이전 입력과 독립적이므로, 탐색(seek) 연산을 수행하는 데 필요한 처리는 먼 미래라도 최소한 상수 시간으로 가능할 수 있습니다.

타이밍 모델의 무상태 동작에는 몇 가지 예외가 있습니다.

첫째, 모델의 프로그래밍 인터페이스에서 정의된 여러 메서드는 애니메이션 일시정지 등 재생 제어를 제공합니다. 이러한 메서드는 호출된 시점의 시간에 따라 동작하므로 상태성을 가집니다. 이 메서드들은 편의를 위해 제공되는 것이며 핵심 타이밍 모델의 일부가 아니라 그 위에 계층적으로 추가된 것입니다.

마찬가지로, 애니메이션의 완료 동작은 애니메이션의 미디어(연관 효과)의 종료 시간을 동적으로 변경할 경우, 변경 시점에 따라 결과가 달라질 수 있습니다. 이 동작은 다소 아쉽지만 직관적이고 HTML과 일관되기 때문에 채택되었습니다. 따라서 모델은 타이밍 속성에 동적 변경이 없을 때에만 무상태로 설명될 수 있습니다.

마지막으로, 모델이 업데이트될 때마다 일시적 상태가 형성된다고 볼 수 있습니다. 이 일시적 상태는 프로그래밍 인터페이스에서 반환되는 값에 영향을 주지만, 이후 업데이트에는 영향을 미치지 않으므로 앞서 설명한 무상태 특성과 충돌하지 않습니다.

4.1.2. 계층적

타이밍 모델의 또 다른 특징은 시간이 상속된다는 점입니다. 시간은 타임라인에서 시작하여 여러 단계에 걸쳐 각 애니메이션 효과로 전달됩니다. 각 단계에서 시간은 뒤로 또는 앞으로 이동, 스케일 조정, 반전, 일시정지, 반복될 수 있습니다.

이 명세서의 이 단계에서는 계층 구조가 얕습니다. 이후 단계에서 그룹 효과 개념이 도입되어 더 깊은 타이밍 계층 구조가 가능해집니다.

4.2. 시간 값

타이밍은 타이밍 노드 간의 시간 관계 계층 구조에 기반합니다. 부모 노드는 자식 노드에 시간 값의 형태로 타이밍 정보를 제공합니다.

시간 값은 일반적으로 어떤 시점부터 경과한 밀리초 수를 의미하는 실수입니다. 시간 값과 실제 벽시계 밀리초와의 연결은 시간 계층을 거치며 적용되는 다양한 변환에 의해 흐려질 수 있습니다.

앞으로 스크롤 위치나 UI 제스처를 기반으로 한 타임라인이 도입될 수 있으며, 이 경우 시간 값과 밀리초의 연결은 더욱 약해질 수 있습니다.

시간 값은 또한 미해결일 수도 있습니다. 예를 들어, 타이밍 노드가 시간 값을 생성할 수 없는 상태일 때 그렇습니다.

4.3. 타임라인

타임라인은 동기화 목적을 위한 시간 값의 소스를 제공합니다.

어느 한 순간에, 타임라인은 단일 현재 시간 값을 가지며, 이를 단순히 타임라인의 현재 시간이라고 합니다.

타임라인은 항상 의미 있는 시간 값을 반환할 수 있는 것은 아니며, 때로는 미해결 시간 값만 반환할 수 있습니다. 예를 들어, 아직 발생하지 않은 순간(예: 문서의 load 이벤트 발생 등)을 기준으로 정의될 수 있습니다. 타임라인은 비활성 타임라인으로 간주되며, 시간 값이 미해결일 때입니다.

타임라인은, 그 현재 시간이 항상 이전에 보고된 현재 시간과 같거나 클 때 단조 증가 타임라인입니다.

특정 종류의 타임라인은 타임라인 시간을 원점 기준 시간으로 변환하는 절차를 시간 값 time에 대해 정의할 수 있으며, 벽시계 기반 타임라인에서 생성된 시간 값을 비교할 수 있도록 합니다.

타임라인은 문서에 연결된 타임라인일 수 있습니다.

애니메이션을 업데이트하고 이벤트를 전송할 때, Document doc에서 timestamp now에 대해 아래 단계들을 실행합니다:

1. 문서에 연결된 모든 타임라인의 현재 시간을 now를 timestamp로 전달하여 업데이트합니다.

   타이밍 모델의 계층적 특성 때문에, 타임라인의 현재 시간을 업데이트하면 다음도 포함됩니다:

   • 타임라인에 연결된 모든 애니메이션의 현재 시간을 업데이트합니다.

   • 현재 시간이 업데이트된 애니메이션에 대해 애니메이션의 완료 상태를 업데이트 절차를 실행합니다.

   • 해당 애니메이션에 대해 애니메이션 이벤트를 큐에 추가합니다.

2. 교체된 애니메이션 제거를 doc에 대해 실행합니다.

3. 마이크로태스크 체크포인트 실행를 합니다.

   참고: 이는 이전 단계에서 타임라인 업데이트의 일부로 Promise 객체를 해결하거나 거부한 결과로 큐에 추가된 마이크로태스크가 애니메이션 이벤트 디스패치 이전에 콜백을 실행할 수 있도록 하는 것입니다.

4. events to dispatch를 doc의 대기 중인 애니메이션 이벤트 큐의 복사본으로 설정합니다.

5. doc의 대기 중인 애니메이션 이벤트 큐를 비웁니다.

6. events to dispatch 내의 애니메이션 이벤트를 다음 방식으로 안정적으로 정렬합니다:

   1. 이벤트의 예정 이벤트 시간 기준으로, 먼저 발생해야 하는 이벤트가 뒤에 발생하는 이벤트보다 앞에 오도록 정렬합니다. 그리고 예정 이벤트 시간이 미해결인 이벤트가 해결됨인 이벤트보다 앞에 오도록 정렬합니다.

   2. 예정 이벤트 시간이 동일한 이벤트 내에서는, 합성 순서로 정렬합니다.

   참고: 이벤트 정렬 목적은, 기기별 프레임률이 달라도 이벤트가 일관된 순서로 디스패치되도록 최대한 보장하기 위함입니다.

   참고: 정렬이 안정적이어야 하는 이유는, 동일한 예정 이벤트 시간으로 이벤트가 큐에 추가될 수 있기 때문입니다. 예를 들어, 0초짜리 CSS 애니메이션은 animationstart와 animationend 이벤트를 모두 디스패치할 수 있으며, 이 두 이벤트의 순서는 유지되어야 합니다.

7. 이벤트 디스패치를 events to dispatch의 각 이벤트에 대해 해당 타겟에서, 앞 단계에서 정해진 순서대로 실행합니다.

이 절차가 호출될 때마다 새로운 애니메이션 프레임이 생성된다고 설명하는 것이 편리할 때가 많습니다. 애니메이션이나 애니메이션 효과의 타이밍 속성 변경, 객체 추가 및 제거 등은 타이밍 또는 애니메이션 모델의 출력을 변경할 수 있지만, 이러한 작업 자체가 새로운 애니메이션 프레임을 생성하는 것은 아니며, 단지 현재 애니메이션 프레임을 업데이트할 뿐입니다.

4.3.1. 문서 타임라인

문서 타임라인은 타임라인의 한 종류로, 문서에 연결되어 있으며, 현재 시간은 애니메이션을 업데이트하고 이벤트를 전송 절차가 실행될 때마다 제공되는 now timestamp로부터 고정 오프셋을 계산하여 결정됩니다. 이 고정 오프셋을 문서 타임라인의 원점 시간이라고 합니다.

"origin time"보다 더 나은 용어가 필요합니다— "time origin"과 너무 유사합니다. [Issue #2079]

연결된 문서의 시간 원점이 설정되기 전에는, 문서 타임라인은 비활성 상태입니다.

문서 타임라인이 활성이 된 후에는 단조 증가합니다.

문서 타임라인이 Document 에 연결되어 있고, 해당 문서가 활성 문서가 아니라면 비활성으로 간주됩니다.

타임라인 시간 timeline time을 원점 기준 시간으로 변환하려면, 문서 타임라인 timeline에서 timeline time과 timeline의 원점 시간을 합산하여 반환합니다. timeline이 비활성 상태라면, 미해결 시간 값을 반환합니다.

4.3.2. 문서 기본 타임라인

각 Document 는 문서 타임라인을 가지며, 이를 기본 문서 타임라인이라고 합니다. 기본 문서 타임라인은 각 문서에 대해 고유하며, document.open() [HTML] 호출을 포함하여 문서의 생명주기 동안 유지됩니다.

기본 문서 타임라인의 원점 시간은 0입니다.

4.4. 애니메이션

애니메이션은 하나의 애니메이션 효과(이를 연관 효과라 함)를 타임라인에 연결하고, 재생 제어를 제공합니다. 이 두 연결은 모두 선택적이며 구성 가능하므로, 애니메이션은 특정 시점에 연관 효과나 타임라인이 없을 수도 있습니다.

애니메이션의 타이밍용 문서는 Document 이며, 해당 타임라인이 문서에 연결되어 있을 때 해당됩니다. 애니메이션이 타임라인에 연결되어 있지 않거나, 타임라인이 문서와 연결되어 있지 않으면, 타이밍용 문서가 없습니다.

애니메이션의 시작 시간은 타임라인의 시간 값이며, 연관 효과가 재생 시작으로 예약될 때의 값입니다. 애니메이션의 시작 시간은 처음에는 미해결 상태입니다.

애니메이션은 또한 홀드 시간 시간 값도 유지하며, 일시정지 등 상황에서 애니메이션의 출력 시간 값(현재 시간이라 함)을 고정할 때 사용됩니다. 홀드 시간 역시 처음에는 미해결입니다.

상충하는 애니메이션들의 상대적 순서를 정하기 위해, 애니메이션들은 생성된 순서대로 글로벌 애니메이션 리스트에 추가됩니다. 하지만 특정 애니메이션 클래스에서는 다른 정렬 방식도 제공할 수 있습니다 (§ 5.4.1 애니메이션 클래스 참고).

4.4.1. 애니메이션의 타임라인 설정

애니메이션의 타임라인 설정 절차(애니메이션 animation을 new timeline으로, null일 수 있음)는 다음과 같습니다:

1. old timeline을 animation의 현재 타임라인(있다면)으로 설정합니다.

2. new timeline이 old timeline과 동일 객체라면, 절차를 중단합니다.

3. animation의 타임라인을 new timeline으로 설정합니다.

4. animation의 시작 시간이 해결됨이라면, animation의 홀드 시간을 미해결로 설정합니다.

   참고: 이 단계는 animation의 완료 상태가 "고착"되지 않고, 갱신된 현재 시간 기준으로 재평가되도록 보장합니다.

5. animation에 대해 애니메이션 완료 상태 업데이트 절차를 실행합니다. did seek 플래그는 false, synchronously notify 플래그도 false로 설정합니다.

4.4.2. 애니메이션의 연관 효과 설정

애니메이션의 연관 효과 설정 절차(애니메이션 animation을 new effect로, null일 수 있음)는 다음과 같습니다:

1. old effect를 animation의 현재 연관 효과(있다면)로 설정합니다.

2. new effect가 old effect와 동일 객체라면, 절차를 중단합니다.

3. animation에 대기 중인 일시정지 작업이 있다면, animation이 준비됨 상태가 되자마자 해당 작업을 실행하도록 다시 예약합니다.

4. animation에 대기 중인 재생 작업이 있다면, animation이 준비됨 상태가 되고 new effect로 재생할 수 있을 때 실행하도록 다시 예약합니다.

5. new effect가 null이 아니고, new effect가 다른 애니메이션(previous animation)의 연관 효과라면, previous animation에 대해 본 절차(애니메이션의 연관 효과 설정)를 null을 new effect로 넘겨 실행합니다.

6. animation의 연관 효과를 new effect로 설정합니다.

7. animation에 대해 애니메이션 완료 상태 업데이트 절차를 실행합니다. did seek 플래그는 false, synchronously notify 플래그도 false로 설정합니다.

4.4.3. 애니메이션의 현재 시간

애니메이션은 연관 효과에 시간 값을 제공하며, 이를 현재 시간이라고 합니다.

현재 시간은 아래 조건들 중 처음으로 일치하는 조건에 따라 계산됩니다:

4.4.4. 애니메이션의 현재 시간 설정

애니메이션의 현재 시간은 새로운 값으로 설정되어 탐색할 수 있습니다. 현재 시간을 설정하는 절차는 두 부분으로 정의됩니다.

현재 시간 조용히 설정 절차(애니메이션 animation을 seek time으로)는 다음과 같습니다:

1. seek time이 미해결 시간 값이라면, 아래 단계를 실행합니다.

   1. 현재 시간이 해결됨이라면, TypeError를 throw합니다.

   2. 이 단계들을 중단합니다.

2. animation의 홀드 시간 또는 시작 시간을 아래와 같이 업데이트합니다:

   다음 조건 중 하나라도 참이면:

   • animation의 홀드 시간이 해결됨이거나,

   • animation의 시작 시간이 미해결이거나,

   • animation에 연관된 타임라인이 없거나, 해당 타임라인이 비활성인 경우,

   • animation의 재생 속도가 0인 경우,

   animation의 홀드 시간을 seek time으로 설정합니다.

   그 밖의 경우,

   animation의 시작 시간을 아래 식의 결과로 설정합니다: timeline time - (seek time / 재생 속도) 여기서 timeline time은 animation과 연관된 타임라인의 현재 시간 값입니다.

3. animation에 연관된 타임라인이 없거나, 해당 타임라인이 비활성이면, animation의 시작 시간을 미해결로 설정합니다.

   이 불변식은 활성 타임라인이 없는 경우 시작 시간 또는 애니메이션의 현재 시간만 설정할 수 있음을 보장합니다.

4. animation의 이전 현재 시간을 미해결로 설정합니다.

현재 시간 설정 절차(애니메이션 animation을 seek time으로)는 다음과 같습니다:

1. animation의 현재 시간 조용히 설정 단계를 seek time으로 실행합니다.

2. animation에 대기 중인 일시정지 작업이 있다면, 동기적으로 일시정지 작업을 완료합니다. 아래 단계를 실행하세요:

   1. animation의 홀드 시간을 seek time으로 설정합니다.

   2. 대기 중인 재생 속도 적용을 animation에 실행합니다.

   3. animation의 시작 시간을 미해결로 설정합니다.

   4. 대기 중인 일시정지 작업을 취소합니다.

   5. resolve animation의 현재 ready promise를 animation으로 해결합니다.

3. animation에 대해 애니메이션 완료 상태 업데이트 절차를 실행합니다. did seek 플래그는 true, synchronously notify 플래그는 false로 설정합니다.

4.4.5. 애니메이션의 시작 시간 설정

시작 시간 설정 절차는 animation, animation을 new start time으로 설정할 때 다음과 같습니다:

1. timeline time을 animation이 연결된 타임라인의 현재 시간 값으로 설정합니다. animation에 연결된 타임라인이 없거나, 연결된 타임라인이 비활성 상태라면, timeline time을 미해결로 설정합니다.

2. timeline time이 미해결이고 new start time이 해결됨이라면, animation의 홀드 시간을 미해결로 설정합니다.

   이 단계는 활성 타임라인이 없을 때 시작 시간 또는 애니메이션의 현재 시간만 설정할 수 있음을 보장합니다.

3. previous current time을 animation의 현재 시간으로 설정합니다.

   참고: 이는 앞 단계의 변경이 적용된 이후의 현재 시간으로, 이로 인해 현재 시간이 미해결이 될 수 있습니다.

4. 대기 중인 재생 속도 적용을 animation에 실행합니다.

5. animation의 시작 시간을 new start time으로 설정합니다.

6. 다음 중 첫 번째로 일치하는 조건에 따라 animation의 홀드 시간을 업데이트합니다:

   new start time이 해결됨인 경우,

   animation의 재생 속도가 0이 아니라면, animation의 홀드 시간을 미해결로 설정합니다.

   그밖의 경우(new start time이 미해결인 경우),

   animation의 홀드 시간을 previous current time으로 설정합니다. previous current time이 미해결이어도 설정합니다.

7. animation에 대기 중인 재생 작업 또는 대기 중인 일시정지 작업이 있다면, 해당 작업을 취소하고 resolve를 통해 animation의 현재 ready promise를 animation으로 해결합니다.

8. animation에 대해 애니메이션 완료 상태 업데이트 절차를 실행합니다. did seek 플래그는 true, synchronously notify 플래그는 false로 설정합니다.

4.4.6. 연관 효과 대기

애니메이션은 아래 두 조건이 모두 충족되는 최초의 순간에 준비됨 상태가 됩니다:

• 사용자 에이전트가 애니메이션의 연관 효과 재생을 시작하기 위한 모든 준비(키프레임 효과의 첫 프레임 렌더링 등)를 완료한 경우

• 애니메이션이 타임라인에 연결되어 있고 해당 타임라인이 비활성이 아닌 경우

4.4.7. 현재 ready promise

각 애니메이션은 현재 ready promise를 가집니다. 현재 ready promise는 초기에는 Promise 객체로, 애니메이션 자체를 값으로 하여 새로 해결된 Promise 생성 절차를 사용해 생성되며, 애니메이션의 관련 Realm에서 생성됩니다.

이 객체는 애니메이션이 대기 중인 재생 작업 또는 대기 중인 일시정지 작업을 새로 큐에 추가할 때마다, 또는 애니메이션이 취소될 때마다(§ 4.4.14 애니메이션 취소 참고) 새로운 Promise 객체로 대체됩니다.

animation.pause();
animation.ready.then(function() {
  // running이 출력됨
  alert(animation.playState);
});
animation.play();

4.4.8. 애니메이션 재생

애니메이션 재생 절차는 animation에 대해 auto-rewind 플래그가 주어졌을 때 다음과 같습니다:

1. aborted pause를, animation에 대기 중 일시정지 작업이 있으면 true, 아니면 false인 불리언 플래그로 설정합니다.

2. has pending ready promise를 초기값 false인 불리언 플래그로 설정합니다.

3. seek time을 시간 값으로, 초기값은 미해결로 설정합니다.

4. auto-rewind 플래그가 true라면, 아래 조건 중 첫 번째에 해당하는 경우의 단계를 실행합니다:

   animation의 실효 재생 속도가 ≥ 0이고, animation의 현재 시간이 아래 중 하나일 때:

   • 미해결이거나,

   • 0보다 작거나,

   • 연관 효과 종료 이상인 경우

   seek time을 0으로 설정합니다.

   animation의 실효 재생 속도가 < 0이고, animation의 현재 시간이 아래 중 하나일 때:

   • 미해결이거나,

   • 0 이하이거나,

   • 연관 효과 종료 초과인 경우

   연관 효과 종료가 양의 무한대인 경우,

   throw "InvalidStateError" DOMException 예외를 발생시키고, 절차를 중단합니다.

   그 밖의 경우,

   seek time을 animation의 연관 효과 종료로 설정합니다.

5. 다음 세 조건이 모두 참이면:

   • seek time이 미해결이고

   • animation의 시작 시간이 미해결이고

   • animation의 현재 시간이 미해결인 경우

   seek time을 0으로 설정합니다.

   참고: 위 단계는 auto-rewind 플래그 설정과 관계없이 이 절차가 유휴 애니메이션을 재생하도록 보장합니다.

6. has finite timeline을, animation이 타임라인에 연결되어 있고, 그 타임라인이 단조 증가가 아니면 true로 설정합니다.

7. seek time이 해결됨이라면,

   has finite timeline이 true인 경우,

   1. animation의 시작 시간을 seek time으로 설정합니다.

   2. animation의 홀드 시간을 미해결로 설정합니다.

   3. 대기 중 재생 속도 적용을 animation에 실행합니다.

   그 밖의 경우,

   animation의 홀드 시간을 seek time으로 설정합니다.

8. animation의 홀드 시간이 해결됨이면, 시작 시간을 미해결로 설정합니다.

9. animation에 대기 중 재생 작업 또는 대기 중 일시정지 작업이 있다면,

   1. 해당 작업을 취소합니다.

   2. has pending ready promise를 true로 설정합니다.

10. 아래 네 조건이 모두 참이면:

    • animation의 홀드 시간이 미해결이고

    • seek time이 미해결이고

    • aborted pause가 false이고

    • animation에 대기 중 재생 속도가 없는 경우,

    절차를 중단합니다.

11. has pending ready promise가 false라면, animation의 현재 ready promise를 새 promise로, 관련 Realm에서 설정합니다.

12. animation이 준비됨 상태가 되자마자 실행될 작업을 예약합니다. 해당 작업은 다음 단계를 실행합니다:

    1. animation의 시작 시간 또는 홀드 시간 중 적어도 하나가 해결됨임을 assert 합니다.

    2. ready time을 animation이 준비됨 상태가 된 순간의 타임라인의 시간 값으로 설정합니다.

    3. 아래에서 첫 번째로 일치하는 조건의 단계를 실행합니다:

       animation의 홀드 시간이 해결됨인 경우,

       1. 대기 중 재생 속도 적용을 animation에 실행합니다.

       2. new start time을 ready time - 홀드 시간 / 재생 속도로 계산합니다. 재생 속도가 0이면 new start time을 ready time으로 설정합니다.

       3. animation의 시작 시간을 new start time으로 설정합니다.

       4. animation의 재생 속도가 0이 아니면, animation의 홀드 시간을 미해결로 설정합니다.

       animation의 시작 시간 이 해결됨이고 animation에 대기 중 재생 속도가 있는 경우,

       1. current time to match을 (ready time - 시작 시간) × 재생 속도로 계산합니다.

       2. 대기 중 재생 속도 적용을 animation에 실행합니다.

       3. animation의 재생 속도가 0이면, animation의 홀드 시간을 current time to match로 설정합니다.

       4. new start time을 ready time - current time to match / 재생 속도로 계산합니다. 재생 속도가 0이면 new start time을 ready time으로 설정합니다.

       5. animation의 시작 시간을 new start time으로 설정합니다.

    4. resolve animation의 현재 ready promise를 animation으로 해결합니다.

    5. animation에 대해 애니메이션 완료 상태 업데이트 절차를 실행합니다. did seek 플래그는 false, synchronously notify 플래그도 false로 설정합니다.

       위 두 단계의 순서가 중요합니다. 즉, 길이가 0인 연관 효과를 가진 애니메이션은 현재 ready promise가 현재 finished promise보다 먼저 resolve됩니다.

    위 작업이 예약되어 아직 실행되지 않은 동안 animation은 대기 중 재생 작업을 갖는 것으로 간주합니다. 하지만 작업이 실행 중일 때는 animation에 대기 중 재생 작업이 없습니다.

    만약 사용자 에이전트가 animation이 즉시 준비됨이라고 판단하면, 위 작업을 마이크로태스크로 예약해 다음 마이크로태스크 체크포인트에서 실행할 수 있습니다. 하지만 동기적으로 작업을 실행하면 안 됩니다.

    위 요구사항에 따라 대기 중 재생 작업을 비동기로 실행해야 하므로 아래 코드가 구현 간에 일관되게 동작합니다:

    animation.play();
    animation.ready.then(
      () => { console.log('재생 시작'); },
      () => { console.log('재생 취소됨'); }
    );
    // 어떤 조건으로 인해 재생이 취소되어야 한다면...
    animation.cancel();
    // "재생 취소됨"이 콘솔에 출력됩니다.
    

    위 코드에서 대기 중 재생 작업이 동기적으로 실행된다면 현재 ready promise가 reject되지 않을 수 있습니다.

13. animation에 대해 애니메이션 완료 상태 업데이트 절차를 실행합니다. did seek 플래그는 false, synchronously notify 플래그도 false로 설정합니다.

4.4.9. 애니메이션 일시정지

애니메이션에 미해결 시작 시간이 있을 때마다, 현재 시간이 일시적으로 중단됩니다.

애니메이션 재생과 마찬가지로, 일시정지는 즉시 발생하지 않을 수 있습니다(§ 4.4.6 연관 효과 대기 참고). 예를 들어, 애니메이션이 별도의 프로세스에서 수행되는 경우, 애니메이션 프로세스가 그린 상태를 반영하도록 현재 시간을 동기화해야 할 수도 있습니다.

애니메이션 일시정지 절차(animation)는 다음과 같습니다:

1. animation에 대기 중 일시정지 작업이 있으면 이 단계를 중단합니다.

2. animation의 재생 상태가 일시정지됨이면, 이 단계를 중단합니다.

3. seek time을 시간 값으로, 초기값은 미해결로 설정합니다.

4. has finite timeline을, animation에 연결된 타임라인이 단조 증가가 아니면 true로 설정합니다.

5. animation의 현재 시간이 미해결이면, 아래에서 첫 번째로 일치하는 조건의 단계를 수행합니다:

   animation의 재생 속도가 ≥ 0일 때,

   seek time을 0으로 설정합니다.

   그 밖의 경우,

   연관 효과 종료가 양의 무한대인 경우,

   throw "InvalidStateError" DOMException 예외를 발생시키고 이 단계를 중단합니다.

   그 밖의 경우,

   seek time을 animation의 연관 효과 종료로 설정합니다.

6. seek time이 해결됨이면,

   has finite timeline이 true라면,

   animation의 시작 시간을 seek time으로 설정합니다.

   그 밖의 경우,

   animation의 홀드 시간을 seek time으로 설정합니다.

7. has pending ready promise를 초기값 false인 불리언 플래그로 설정합니다.

8. animation에 대기 중 재생 작업이 있으면, 해당 작업을 취소하고 has pending ready promise를 true로 설정합니다.

9. has pending ready promise가 false라면, animation의 현재 ready promise를 새 promise로 관련 Realm에 설정합니다.

10. 아래 두 조건이 모두 충족되는 최초의 순간에 작업을 예약합니다:

    • 사용자 에이전트가 animation의 연관 효과 재생을 일시정지시키기 위한 모든 처리를 완료했을 때

    • 애니메이션이 타임라인에 연결되어 있고, 해당 타임라인이 비활성이 아닌 경우

    해당 작업은 아래 단계를 수행합니다:

    1. ready time을 animation이 연결된 타임라인의, 사용자 에이전트가 animation의 연관 효과 일시정지 처리를 완료한 순간의 시간 값으로 설정합니다.

    2. animation의 시작 시간이 해결됨이고 홀드 시간이 해결되지 않았다면, animation의 홀드 시간을 (ready time - 시작 시간) × 재생 속도 결과로 설정합니다.

       참고: 홀드 시간은 애니메이션이 완료됨 상태이거나, 대기 중 재생 작업이 있을 때 이미 설정되어 있을 수 있습니다. 두 경우 모두 홀드 시간을 일시정지 상태로 진입할 때 유지해야 합니다.

    3. 대기 중 재생 속도 적용을 animation에 실행합니다.

    4. animation의 시작 시간을 미해결로 만듭니다.

    5. resolve animation의 현재 ready promise를 animation으로 해결합니다.

    6. animation에 대해 애니메이션 완료 상태 업데이트 절차를 실행합니다. did seek 플래그는 false, synchronously notify 플래그도 false로 설정합니다.

    위 작업이 예약되어 아직 실행되지 않은 동안 animation은 대기 중 일시정지 작업을 갖는 것으로 간주합니다. 하지만 작업이 실행 중일 때는 animation에 대기 중 일시정지 작업이 없습니다.

    대기 중 재생 작업과 마찬가지로, 사용자 에이전트는 대기 중 일시정지 작업을 반드시 비동기로 실행해야 하며, 이는 다음 마이크로태스크 체크포인트에서 실행될 수 있습니다.

11. animation에 대해 애니메이션 완료 상태 업데이트 절차를 실행합니다. did seek 플래그는 false, synchronously notify 플래그도 false로 설정합니다.

4.4.10. 끝에 도달

이 섹션은 규범적이지 않습니다

DVD 플레이어나 카세트 플레이어는 일반적으로 미디어의 끝에 도달할 때까지 재생을 계속하다가 멈춥니다. 이러한 플레이어가 역재생이 가능하다면, 미디어의 시작점에 도달하면 재생이 멈춥니다. 이 동작을 모방하고, HTML의 미디어 요소 [HTML]와 일관성을 제공하기 위해, 웹 애니메이션의 애니메이션들은 연관 효과의 종료 시간을 넘어서 앞으로 재생되지 않고, 0초 이전으로 역재생되지 않습니다.

애니메이션이 재생 범위의 자연스러운 경계에 도달하면 완료됨 상태가 되었다고 합니다.

현재 시간을 제한하는 효과는 아래 그림과 같습니다.

하지만 애니메이션의 현재 시간을 연관 효과의 끝을 넘는 시간으로 탐색하는 것도 가능합니다. 이 경우 현재 시간은 진행되지 않고, 애니메이션은 탐색된 시간에 일시정지된 것처럼 동작합니다.

예를 들어, 연관 효과가 없는 애니메이션의 현재 시간을 5초로 탐색할 수 있습니다. 이후 연관 효과가 5초보다 늦게 종료되는 종료 시간과 함께 연결된다면, 재생은 5초 시점부터 시작됩니다.

위와 유사하게, 애니메이션의 연관 효과 길이가 변경될 때도 비슷한 동작이 발생할 수 있습니다.

또한 재생 속도가 음수인 경우, 현재 시간은 0초 이전으로 진행되지 않습니다.

4.4.11. 현재 finished promise

각 애니메이션은 현재 finished promise를 가집니다. 현재 finished promise는 초기에는 pending 상태의 Promise 객체입니다.

이 객체는 애니메이션이 완료됨 재생 상태를 벗어날 때마다 새로운 promise로 대체됩니다.

4.4.12. 완료 상태 업데이트

재생 속도가 양수인 애니메이션의 경우, 현재 시간은 연관 효과 종료까지 계속 증가합니다.

애니메이션의 연관 효과 종료는 해당 애니메이션의 연관 효과의 종료 시간과 같습니다. 애니메이션에 연관 효과가 없으면, 연관 효과 종료는 0입니다.

재생 속도가 음수인 애니메이션의 경우, 현재 시간은 0까지 계속 감소합니다.

실행 중인 애니메이션이 이 경계에 도달하거나 넘어서고, 시작 시간이 해결됨이면 완료됨 상태라고 합니다.

이 경계의 도달 여부는 애니메이션 객체가 수정될 때마다 아래 정의된 애니메이션 완료 상태 업데이트 절차를 통해 확인됩니다. 이 절차는 애니메이션 및 이벤트 업데이트 절차의 일부로도 실행됩니다. 두 경우 모두 아래 정의된 did seek 플래그는 false로 설정됩니다.

각 애니메이션에 대해 사용자 에이전트는 이전 현재 시간 시간 값을 관리하며, 이 값은 원래 미해결입니다.

일반 재생 중에는 애니메이션의 현재 시간이 위에서 설명한 경계로 제한되지만, 현재 시간 설정 절차를 사용하면 이 경계를 벗어난 시간으로 탐색할 수도 있습니다.

애니메이션 완료 상태 업데이트 절차(animation, did seek 플래그(현재 시간 설정 후 업데이트 여부), synchronously notify 플래그(즉시 이벤트 큐 및 promise 처리 기대 여부))는 다음과 같습니다:

1. unconstrained current time을 계산합니다. did seek이 false이면 홀드 시간 대신 미해결 시간 값을 사용해 현재 시간을 계산합니다. did seek이 true이면 unconstrained current time은 현재 시간과 같습니다.

   참고: 이는 타임라인 방향 변경을 허용하기 위함입니다. 이 정의가 없다면, 한 번 완료된 애니메이션은 타임라인이 반대 방향으로 진행되어도 계속 완료 상태로 남습니다.

2. 아래 세 조건이 모두 참이면,

   • unconstrained current time이 해결됨이고, 그리고

   • animation의 시작 시간이 해결됨이고, 그리고

   • animation에 대기 중 재생 작업이나 대기 중 일시정지 작업이 없음

   아래에서 animation에 대해 첫 번째로 일치하는 조건에 따라 홀드 시간을 업데이트합니다:

   재생 속도 > 0이고 unconstrained current time이 연관 효과 종료 이상일 때,

   did seek이 true라면 홀드 시간을 unconstrained current time 값으로 설정합니다.

   did seek이 false라면 홀드 시간을 이전 현재 시간과 연관 효과 종료 중 큰 값으로 설정합니다. 이전 현재 시간이 미해결이면, 홀드 시간을 연관 효과 종료로 설정합니다.

   재생 속도 < 0이고 unconstrained current time이 0 이하일 때,

   did seek이 true라면 홀드 시간을 unconstrained current time 값으로 설정합니다.

   did seek이 false라면 홀드 시간을 이전 현재 시간과 0 중 작은 값으로 설정합니다. 이전 현재 시간이 미해결이면, 홀드 시간을 0으로 설정합니다.

   재생 속도 ≠ 0이고, animation이 활성 타임라인에 연결되어 있을 때,

   아래 단계를 수행합니다:

   1. did seek이 true이고 홀드 시간 이 해결됨이면, animation의 시작 시간을 timeline time - (홀드 시간 / 재생 속도) 결과로 설정합니다. 여기서 timeline time은 animation과 연결된 타임라인의 현재 시간 값입니다.

   2. 홀드 시간을 미해결로 설정합니다.

3. animation의 이전 현재 시간을 현재 시간 계산 결과로 설정합니다.

4. current finished state를, animation의 재생 상태가 완료됨이면 true, 아니면 false로 설정합니다.

5. current finished state가 true이고 현재 finished promise가 아직 resolve되지 않았다면, 아래 단계를 수행합니다:

   1. finish notification steps 절차는 다음과 같습니다:

      1. animation의 재생 상태가 완료됨과 다르면, 이 단계를 중단합니다.

      2. resolve animation의 현재 finished promise 객체를 animation으로 resolve합니다.

      3. Create AnimationPlaybackEvent 객체 finishEvent를 생성합니다.

      4. finishEvent의 type 속성을 finish로 설정합니다.

      5. finishEvent의 currentTime 속성을 animation의 현재 시간으로 설정합니다.

      6. finishEvent의 timelineTime 속성을 animation이 연결된 타임라인의 현재 시간으로 설정합니다. 타임라인이 없다면, 또는 타임라인이 비활성이면 timelineTime 을 null로 설정합니다.

      7. animation에 타이밍용 문서가 있다면, finishEvent를 해당 타이밍용 문서의 대기 중 애니메이션 이벤트 큐에 타겟 animation과 함께 추가합니다. 예정 이벤트 시간은 변환한 animation의 연관 효과 종료를 원점 기준 시간으로 사용합니다.

         그 외의 경우, 작업을 큐에 추가하여 finishEvent를 animation에서 디스패치합니다. 해당 작업의 소스는 DOM 조작 작업 소스입니다.

   2. synchronously notify가 true이면, 이 animation의 finish notification steps 실행을 위한 모든 큐에 있는 마이크로태스크를 취소하고, finish notification steps를 즉시 실행합니다.

      그 외에 synchronously notify가 false이면, 마이크로태스크를 큐에 추가하여 finish notification steps를 animation에 대해 실행합니다. 이미 해당 단계를 실행하기 위한 마이크로태스크가 큐에 있으면 추가하지 않습니다.

6. current finished state가 false이고, animation의 현재 finished promise가 이미 resolve된 경우, animation의 현재 finished promise를 새 promise로, 관련 Realm에서 설정합니다.

var animation = elem.animate({ left: '100px' }, 2000);
animation.playbackRate = 2;
animation.currentTime = 1000; // animation은 이제 완료됨
animation.effect.updateTiming({ iterations: 2 }); // animation은 더 이상 완료 상태가 아님

var animation = elem.animate({ left: '100px' }, 1000);
animation.finish(); // finish 이벤트가 즉시 큐에 추가되고 finished promise가
                    // resolve됨. 아래 문장 때문에 animation이 완료 상태를 벗어나도
animation.currentTime = 0;

4.4.13. 애니메이션 완료

애니메이션은 아래 정의된 애니메이션 완료 절차를 통해 현재 재생 방향의 자연스러운 끝으로 진행할 수 있습니다(animation에 대해):

1. animation의 실효 재생 속도가 0이거나, 또는 animation의 실효 재생 속도 > 0이고 연관 효과 종료가 무한대라면, throw "InvalidStateError" DOMException 예외를 발생시키고 이 단계를 중단합니다.

2. 대기 중인 재생 속도 적용을 animation에 실행합니다.

3. limit을 다음과 같이 설정합니다:

   재생 속도 > 0인 경우,

   limit을 연관 효과 종료로 설정합니다.

   그 밖의 경우,

   limit을 0으로 설정합니다.

4. 현재 시간 조용히 설정 절차를 limit으로 실행합니다.

5. animation의 시작 시간이 미해결이고 animation이 활성 타임라인과 연결되어 있다면, 시작 시간을 다음과 같이 평가한 결과로 설정합니다: timeline time - (limit / 재생 속도) 여기서 timeline time은 연결된 타임라인의 현재 시간 값입니다.

6. 대기 중 일시정지 작업이 있고 시작 시간이 해결됨이면,

   1. 홀드 시간을 미해결로 설정합니다.

      일반적으로 홀드 시간은 이미 미해결일 것입니다. 단, 애니메이션이 이전에 유휴 상태였을 때는 예외입니다.

   2. 대기 중 일시정지 작업을 취소합니다.

   3. resolve animation의 현재 ready promise를 animation으로 resolve합니다.

7. 대기 중 재생 작업이 있고 시작 시간이 해결됨이면, 해당 작업을 취소하고 resolve animation의 현재 ready promise를 animation으로 resolve합니다.

8. animation에 대해 애니메이션 완료 상태 업데이트 절차를 실행합니다. did seek 플래그는 true, synchronously notify 플래그는 true로 설정합니다.

4.4.14. 애니메이션 취소

애니메이션은 취소될 수 있으며, 이로 인해 현재 시간이 미해결이 되어 연관 효과로 인한 모든 효과가 제거됩니다.

애니메이션 취소 절차(animation에 대해)는 다음과 같습니다:

1. animation의 재생 상태가 유휴가 아니라면, 아래 단계를 실행합니다:

   1. 애니메이션의 대기 작업 재설정 절차를 animation에 대해 실행합니다.

   2. reject animation의 현재 finished promise를 "AbortError"라는 이름의 DOMException으로 reject합니다.

   3. 현재 finished promise의 [[PromiseIsHandled]] 내부 슬롯을 true로 설정합니다.

   4. 현재 finished promise를 새 promise로, 관련 Realm에서 설정합니다.

   5. Create AnimationPlaybackEvent 객체 cancelEvent를 생성합니다.

   6. cancelEvent의 type 속성을 cancel로 설정합니다.

   7. cancelEvent의 currentTime 속성을 null로 설정합니다.

   8. timeline time을 animation이 연결된 타임라인의 현재 시간으로 설정합니다. animation이 활성 타임라인과 연결되어 있지 않으면, timeline time을 미해결 시간 값으로 설정합니다.

   9. cancelEvent의 timelineTime 속성을 timeline time으로 설정합니다. timeline time이 미해결이면 null로 설정합니다.

   10. animation에 타이밍용 문서가 있다면, cancelEvent를 해당 타이밍용 문서의 대기 중 애니메이션 이벤트 큐에 타겟 animation과 함께 추가합니다. animation이 활성 타임라인과 연결되어 있고, 타임라인 시간이 원점 기준 시간으로 변환하는 절차를 정의한다면, 예정 이벤트 시간을 해당 절차의 결과로 timeline time에 대해 설정합니다. 그렇지 않으면 예정 이벤트 시간은 미해결 시간 값입니다.

       그 외의 경우, 작업을 큐에 추가하여 cancelEvent를 animation에서 디스패치합니다. 해당 작업의 소스는 DOM 조작 작업 소스입니다.

2. animation의 홀드 시간을 미해결로 설정합니다.

3. animation의 시작 시간을 미해결로 설정합니다.

애니메이션의 대기 작업 재설정 절차(animation에 대해)는 다음과 같습니다:

1. animation에 대기 중 재생 작업이나 대기 중 일시정지 작업이 없다면, 이 절차를 중단합니다.

2. animation에 대기 중 재생 작업이 있다면, 해당 작업을 취소합니다.

3. animation에 대기 중 일시정지 작업이 있다면, 해당 작업을 취소합니다.

4. 대기 중 재생 속도 적용을 animation에 실행합니다.

5. reject animation의 현재 ready promise를 "AbortError"라는 이름의 DOMException으로 reject합니다.

6. animation의 현재 ready promise의 [[PromiseIsHandled]] 내부 슬롯을 true로 설정합니다.

7. animation의 현재 ready promise를 새로 resolve된 Promise 객체로, 값은 animation이며 관련 Realm에서 생성합니다.

4.4.15. 속도 제어

애니메이션은 재생 속도를 가지며, 이는 연결된 타임라인의 시간 값 변화 속도를 애니메이션의 현재 시간 변화로 변환하는 스케일 계수를 제공합니다. 재생 속도는 기본적으로 1입니다.

애니메이션의 재생 속도를 0으로 설정하면 사실상 애니메이션이 일시정지됩니다(단, 재생 상태가 반드시 일시정지됨이 되는 것은 아닙니다).

4.4.15.1. 애니메이션의 재생 속도 설정

재생 속도 설정 절차는 애니메이션 animation을 new playback rate로 설정할 때 다음과 같습니다:

1. animation의 대기 중 재생 속도를 모두 초기화합니다.

2. previous time을 현재 시간으로, 재생 속도 변경 전의 값을 사용합니다.

3. previous playback rate를 animation의 현재 실효 재생 속도로 설정합니다.

4. 재생 속도를 new playback rate로 설정합니다.

5. 아래에서 첫 번째로 일치하는 조건의 단계를 실행합니다:

   animation이 단조 증가 타임라인에 연결되어 있고, previous time이 해결됨인 경우,

   animation의 현재 시간 설정 절차를 previous time으로 실행합니다.

   animation이 null이 아닌 타임라인에 연결되어 있고, 해당 타임라인이 단조 증가가 아니며, 시작 시간이 해결됨이고, 연관 효과 종료가 무한대가 아니며, 다음 중 하나라도 참일 때:

   • previous playback rate < 0이고 new playback rate ≥ 0, 또는

   • previous playback rate ≥ 0이고 new playback rate < 0,

   animation의 시작 시간을 연관 효과 종료 - 시작 시간 결과로 설정합니다.

   참고: 이는 단조 증가하지 않는 타임라인에서 시작/종료 시점을 뒤집어, 다른 방향에서도 시작 시간의 상대적 오프셋을 유지합니다.

4.4.15.2. 애니메이션의 재생 속도 원활하게 업데이트

다른 프로세스나 쓰레드에서 실행 중인 애니메이션의 경우, 재생 속도 설정 절차가 동기화되지 않은 상태에서 실행되면 애니메이션이 튀는 현상이 발생할 수 있습니다.

애니메이션의 재생 속도를 원활하게 변경하기 위해, 애니메이션은 대기 중 재생 속도를 가질 수 있으며, 이는 동기화가 필요할 때(다른 쓰레드/프로세스에서 실행 중인 애니메이션 등) 적용될 재생 속도를 의미합니다.

초기에는 애니메이션의 대기 중 재생 속도는 설정되지 않은 상태입니다.

animation의 실효 재생 속도는 대기 중 재생 속도가 있으면 그 값이고, 없으면 재생 속도입니다.

애니메이션 animation에 대해 대기 중 재생 속도 적용을 실행할 때는 아래 단계를 따릅니다:

1. animation에 대기 중 재생 속도가 없다면, 이 단계를 중단합니다.

2. animation의 재생 속도를 대기 중 재생 속도로 설정합니다.

3. animation의 대기 중 재생 속도를 초기화합니다.

애니메이션 animation에 대해 재생 속도 원활하게 업데이트 절차(new playback rate로, 현재 시간을 유지함)는 다음과 같습니다:

1. previous play state를 animation의 재생 상태로 설정합니다.

   참고: animation의 실효 재생 속도를 업데이트하기 전에 재생 상태를 기록해야 합니다. 아래 로직에서는 animation이 현재 완료됨이면, 이후 대기 중 재생 속도 적용 후 완료 상태가 아니더라도 바로 적용해야 합니다.

2. animation의 대기 중 재생 속도를 new playback rate로 설정합니다.

3. 아래에서 첫 번째로 일치하는 조건의 단계를 실행합니다:

   animation에 대기 중 재생 작업이나 대기 중 일시정지 작업이 있으면,

   이 단계를 중단합니다.

   참고: 서로 다른 종류의 대기 작업은 실행 시 대기 중 재생 속도를 적용하므로, 추가 작업이 필요하지 않습니다.

   previous play state가 유휴 또는 일시정지됨이거나, animation의 현재 시간이 미해결인 경우,

   대기 중 재생 속도 적용을 animation에 실행합니다.

   참고: 두 번째 조건은, 실행 중인 애니메이션에 대해, 현재 시간이 미해결이고 대기 중 재생 작업이 없으면 아래에서 재생을 시도하지 않도록 하기 위함입니다.

   previous play state가 완료됨인 경우,

   1. unconstrained current time을 현재 시간 계산 결과로, 홀드 시간을 미해결 시간 값으로 대체합니다.

   2. animation의 시작 시간을 아래 식의 결과로 설정합니다:

      timeline time - (unconstrained current time / 대기 중 재생 속도)

      여기서 timeline time은 animation이 연결된 타임라인의 현재 시간 값입니다.

      대기 중 재생 속도가 0이면, animation의 시작 시간을 timeline time으로 설정합니다.

   3. 대기 중 재생 속도 적용을 animation에 실행합니다.

   4. animation에 대해 애니메이션 완료 상태 업데이트 절차를 실행합니다. did seek 플래그는 false, synchronously notify 플래그는 false로 설정합니다.

   그 밖의 경우,

   animation에 대해 애니메이션 재생 절차를 auto-rewind 플래그를 false로 설정하여 실행합니다.

4.4.16. 애니메이션 역재생

애니메이션 animation에 대해 역재생 절차는 다음과 같습니다:

1. animation에 연결된 타임라인이 없거나, 연결된 타임라인이 비활성이면, throw "InvalidStateError" DOMException 예외를 발생시키고 이 단계를 중단합니다.

2. original pending playback rate를 animation의 대기 중 재생 속도로 설정합니다.

3. animation의 대기 중 재생 속도를 실효 재생 속도의 덧셈 역수(즉, -실효 재생 속도)로 설정합니다.

4. animation에 대해 애니메이션 재생 절차를 auto-rewind 플래그를 true로 설정하여 실행합니다.

   만약 애니메이션 재생 절차에서 예외가 발생하면, animation의 대기 중 재생 속도를 original pending playback rate로 되돌리고, 예외를 전파합니다.

4.4.17. 재생 상태

애니메이션은 아래 재생 상태 중 하나로 설명될 수 있습니다. 각 상태에 대해 비규범적인 설명도 함께 제공합니다:

애니메이션 animation의 재생 상태는 아래 조건들 중 첫 번째에 해당하는 상태입니다:

animation.effect.updateTiming({ duration: 5000 });
animation.currentTime = 4000;
animation.pause();
animation.ready.then(function() {
  animation.effect.updateTiming({ duration: 3000 });
  alert(animation.playState); // 'paused' 출력
  animation.startTime =
    document.timeline.currentTime - animation.currentTime * animation.playbackRate;
  alert(animation.playState); // 'finished' 출력
});

4.4.18. 애니메이션 이벤트

애니메이션 이벤트에는 이 명세에서 정의된 애니메이션 재생 이벤트와 CSS 트랜지션의 이벤트 [CSS-TRANSITIONS-1], 그리고 CSS 애니메이션의 이벤트 [CSS-ANIMATIONS-1]가 포함됩니다. 추후 명세에서 더 다양한 애니메이션 이벤트가 추가될 수 있습니다.

각 Document는 대기 중 애니메이션 이벤트 큐를 유지하며, 애니메이션 이벤트와 해당 이벤트 타겟, 그리고 예정 이벤트 시간을 저장합니다. 예정 이벤트 시간은 시간 값으로, 시간 원점 기준으로 이벤트가 이상적으로 디스패치되었을 때의 시점을 나타냅니다. 이는 애니메이션 및 이벤트 업데이트 절차에서 큐에 있는 애니메이션 이벤트를 시간 순으로 정렬하는 데 사용됩니다. 이 값은 예를 들어 애니메이션의 타임라인이 시간 원점과 관계없는 값을 생성하는 경우(예: 스크롤 위치 기반 타임라인)나 타임라인이 비활성일 때 미해결이 될 수 있습니다.

4.4.18.1. 애니메이션 이벤트 정렬

아래 정의들은 큐에 있는 이벤트를 정렬하는 데 참고용으로 제공됩니다.

애니메이션 시간 값을 타임라인 시간으로 변환은 애니메이션 animation의 시작 시간 기준 상대 시간 값 time을 타임라인 시간으로 변환하는 절차입니다:

1. time이 미해결이면 time을 반환합니다.

2. time이 무한대이면 미해결 시간 값을 반환합니다.

3. animation의 재생 속도가 0이면, 미해결 시간 값을 반환합니다.

4. animation의 시작 시간이 미해결이면 미해결 시간 값을 반환합니다.

5. 아래 식을 계산한 결과를 반환합니다: time × (1 / playback rate) + start time (playback rate와 start time은 각각 재생 속도와 시작 시간입니다.)

타임라인 시간 값을 원점 기준 시간으로 변환은 타임라인 timeline과 동일 스케일의 시간 값 time을 원점 기준 시간으로 변환하는 절차입니다:

1. timeline time을 애니메이션 시간 값을 타임라인 시간으로 변환한 결과로 설정합니다.

2. timeline time이 미해결이면 time을 반환합니다.

3. animation이 타임라인과 연결되어 있지 않으면, 미해결 시간 값을 반환합니다.

4. animation이 비활성 타임라인에 연결되어 있으면, 미해결 시간 값을 반환합니다.

5. animation이 연결된 타임라인에 타임라인 시간 값을 원점 기준 시간으로 변환하는 절차가 없다면, 미해결 시간 값을 반환합니다.

6. 해당 절차로 timeline time을 원점 기준 시간으로 변환한 결과를 반환합니다(animation과 연결된 타임라인에 정의된 절차 사용).

4.4.18.2. 애니메이션 재생 이벤트

애니메이션이 재생될 때, 애니메이션 재생 이벤트를 통해 상태 변화를 보고합니다.

애니메이션 재생 이벤트는 타이밍 모델의 속성입니다. 따라서 애니메이션의 연관 효과가 없거나 가시적 결과가 없어도 이벤트는 디스패치됩니다.

4.4.18.3. 애니메이션 재생 이벤트 타입

finish

애니메이션이 finished play state에 진입할 때마다 큐에 추가됩니다.

cancel

애니메이션이 다른 상태에서 idle play state로 진입할 때마다 큐에 추가됩니다. 새로 생성된 애니메이션이 처음부터 idle이면 cancel event가 생성되지 않습니다.

remove

애니메이션이 자동으로 제거될 때마다 큐에 추가됩니다. § 5.5 애니메이션 대체 참고.

4.5. 애니메이션 효과

애니메이션 효과는 타이밍 계층에서 항목을 추상적으로 지칭하는 용어입니다.

4.5.1. 애니메이션 효과와 애니메이션 간의 관계

애니메이션의 연관 효과가 설정되어 있으면, 이는 애니메이션 효과의 한 종류입니다. 연관 효과가 애니메이션에 연결됨 상태라고 합니다. 한 시점에 애니메이션 효과는 최대 하나의 애니메이션에 연결될 수 있습니다.

애니메이션 효과 effect는, 타임라인에 연결됨 timeline 상태일 수 있는데, 이는 effect가 애니메이션에 연결되어 있고, 그 애니메이션이 timeline에 연결되어 있을 때입니다.

4.5.2. 애니메이션 효과의 종류

이 명세에서는 애니메이션 효과의 한 종류로 키프레임 효과만을 정의합니다. 이후 명세 단계에서는 더 다양한 애니메이션 효과가 정의될 예정입니다.

모든 애니메이션 효과 종류는 다음 절에서 설명하는 여러 공통 속성을 정의합니다.

4.5.3. 활성 구간

애니메이션 효과가 실행되도록 예약된 기간을 활성 구간이라고 합니다. 각 애니메이션 효과는 오직 하나의 활성 구간만을 가집니다.

활성 구간의 하한은 보통 이 애니메이션 효과에 연결된 애니메이션의 시작 시간과 일치하지만, 애니메이션 효과의 시작 지연에 의해 이동될 수 있습니다.

구간의 상한은 활성 지속 시간에 의해 결정됩니다.

시작 시간, 시작 지연, 활성 지속 시간의 관계는 아래 그림에서 설명합니다.

종료 지연도 지정할 수 있지만, 주로 애니메이션을 순차적으로 실행할 때에만 사용됩니다.

애니메이션 효과는 활성 구간을 정의하며, 이 구간 내에서 효과가 동작하도록 예약됩니다. 단, fill mode는 활성 구간 외에도 적용될 수 있습니다.

활성 구간의 하한은 start delay로 정의됩니다.

시작 지연은 애니메이션 효과가 연결된 애니메이션의 시작 시간으로부터의 부호 있는 오프셋입니다.

활성 구간의 길이를 활성 지속 시간이라고 하며, 계산 방법은 § 4.8.2 활성 지속 시간 계산에서 정의합니다.

시작 지연과 마찬가지로, 애니메이션 효과는 종료 지연도 가지며, 이는 주로 다른 애니메이션 효과의 종료 시간 기준으로 애니메이션을 순차적으로 실행할 때 사용됩니다. 보통 시퀀스 효과와 결합하여 사용할 때 유용하나, SVG의 min 속성을 표현하기 위해서도 포함됩니다([SVG11], 19장).

애니메이션 효과의 종료 시간은 max(start delay + 활성 지속 시간 + 종료 지연, 0)의 결과입니다.

4.5.4. 로컬 시간

로컬 시간은 애니메이션 효과의 특정 시점에서 다음 조건 중 첫 번째로 일치하는 값입니다:

4.5.5. 애니메이션 효과의 페이즈와 상태

이 섹션은 규범적이지 않습니다

특정 시점에서 애니메이션 효과는 세 가지 페이즈 중 하나일 수 있습니다. 애니메이션 효과의 로컬 시간이 미해결이면 아무 페이즈에도 속하지 않습니다.

페이즈별 차이는 아래 그림에서 설명합니다.

페이즈는 다음과 같습니다:

before phase

애니메이션 효과의 로컬 시간이 효과의 활성 구간 및 종료 시간보다 이전이거나, 음수 시작 지연이 적용된 구간에 해당하는 경우입니다.

active phase

애니메이션 효과의 로컬 시간이 효과의 활성 구간 내에 있고, 음수 시작 지연이나 음수 종료 지연 구간이 아닌 경우입니다.

after phase

애니메이션 효과의 로컬 시간이 효과의 활성 구간 또는 종료 시간(음수 종료 지연으로 인해 먼저 올 수도 있음) 이후이지만, 음수 시작 지연 구간에는 해당하지 않는 경우입니다.

이들 페이즈 외에도 애니메이션 효과는 여러 겹치는 상태로도 설명될 수 있습니다. 이 상태들은 오직 하나의 애니메이션 프레임 동안만 정의되며, 주로 모델의 상태적 부분 묘사에 편의를 위해 사용됩니다.

각 상태와 모델 내에서의 용도 요약:

재생 중(in play)

활성 시간이 프레임마다 변하는 애니메이션 효과에 해당합니다.

current

재생 중이거나, 재생 중이 될 수 있는 애니메이션의 재생 속도에 따라 결정되는 애니메이션 효과에 해당합니다.

효과 중(in effect)

해결된 활성 시간이 있는 애니메이션 효과에 해당합니다. 이는 애니메이션 효과가 active phase에 있거나, active phase 외에 fill mode(§ 4.6 Fill behavior 참고)에 의해 활성 시간이 해결된 경우입니다. 효과 중 애니메이션 효과만이 타겟에 값을 적용합니다.

각 상태의 규범적 정의는 다음에 이어집니다.

애니메이션 효과 페이즈를 결정하려면 다음 정의가 필요합니다:

애니메이션 방향

효과가 애니메이션에 연결되어 있고, 연결된 애니메이션의 재생 속도가 0보다 작으면 "backwards"이고, 그 외에는 애니메이션 방향은 "forwards"입니다.

before-active boundary time

max(min(start delay, end time), 0)

active-after boundary time

max(min(start delay + active duration, end time), 0)

애니메이션 효과는 before phase 상태이며, 해당 효과의 로컬 시간이 미해결이 아니고, 아래 조건 중 하나라도 만족하면 before phase에 해당합니다:

1. 로컬 시간이 before-active boundary time보다 작거나,

2. 애니메이션 방향이 "backwards"이고 로컬 시간이 before-active boundary time과 같은 경우.

애니메이션 효과는 after phase 상태이며, 해당 효과의 로컬 시간이 미해결이 아니고, 아래 조건 중 하나라도 만족하면 after phase에 해당합니다:

1. 로컬 시간이 active-after boundary time보다 크거나,

2. 애니메이션 방향이 "forwards"이고 로컬 시간이 active-after boundary time과 같은 경우.

애니메이션 효과는 active phase 상태이며, 해당 효과의 로컬 시간이 미해결이 아니고, before phase나 after phase가 아닌 경우입니다.

그리고 위의 어느 페이즈에도 속하지 않는 경우를 편의상 idle phase라고 부르기도 합니다.

애니메이션 효과는 재생 중(in play) 상태이며, 아래 모든 조건을 만족하면 그렇습니다:

1. 애니메이션 효과가 active phase에 있고,

2. 애니메이션 효과가 애니메이션에 연결되어 있으며, 연결된 애니메이션이 finished 상태가 아닌 경우.

애니메이션 효과는 current 상태이며, 아래 조건 중 하나라도 참이면 그렇습니다:

• 애니메이션 효과가 재생 중이거나,

• 애니메이션 효과가 애니메이션에 연결되어 있고, 해당 애니메이션의 재생 속도가 0보다 크며, 애니메이션 효과가 before phase에 있을 때,

• 애니메이션 효과가 애니메이션에 연결되어 있고, 해당 애니메이션의 재생 속도가 0보다 작으며, 애니메이션 효과가 after phase에 있을 때,

• 애니메이션 효과가 애니메이션에 연결되어 있고, 해당 애니메이션이 idle 재생 상태가 아니며, null이 아닌 타임라인과 연결되어 있고, 해당 타임라인이 단조 증가가 아닐 때.

애니메이션 효과는 효과 중(in effect) 상태이며, 활성 시간이 미해결이 아닐 때입니다(§ 4.8.3.1 활성 시간 계산 참고).

4.5.6. 관련 애니메이션

애니메이션은 연관된 애니메이션 효과 연결 여부를 기준으로 관련 있음으로 정의할 수 있습니다.

애니메이션은 다음 조건을 모두 만족하면 관련 있음(relevant)입니다:

• 연관 효과가 current 또는 효과 중이고, 그리고

• replace state가 removed가 아닌 경우.

4.6. 채움 동작

애니메이션 효과가 재생 중이 아닐 때의 효과는 해당 채움 모드에 의해 결정됩니다.

가능한 채움 모드는 다음과 같습니다:

• none,

• forwards,

• backwards,

• both.

이 모드들의 규범적 정의는 § 4.8.3.1 활성 시간 계산에서 활성 시간 계산에 포함되어 있습니다.

// 아래 애니메이션이 완료된 후 첫 프레임에서, finished promise의 콜백이 먼저 실행되고 스타일이 업데이트되어 깜빡임이 발생하지 않습니다.
elem.animate({ transform: 'translateY(100px)' }, 200).finished.then(() => {
  elem.style.transform = 'translateY(100px)';
});

elem.style.transform = 'translateY(100px)';
elem.animate({ transform: 'none', offset: 0 }, 200);

elem.addEventListener('click', async evt => {
  const animation = elem.animate(
    { transform: `translate(${evt.clientX}px, ${evt.clientY}px)` },
    { duration: 800, fill: 'forwards' }
  );
  await animation.finished;
  // commitStyles는 animation까지의 스타일을 기록하고 elem의 지정 스타일을 갱신합니다.
  animation.commitStyles();
  animation.cancel();
});

4.6.1. 채움 모드

이 섹션은 규범적이지 않습니다

각 채움 모드의 효과는 다음과 같습니다:

none

애니메이션 효과가 재생 중이 아닐 때 아무 효과도 없습니다.

forwards

애니메이션 효과가 after phase에 있을 때, 마지막으로 재생 중이었던 순간과 동일한 반복 진행도 값을 생성합니다.

그 외의 모든 재생 중이 아닌 시간에는 아무 효과가 없습니다.

backwards

애니메이션 효과가 before phase에 있을 때, 가장 처음 재생 중이었던 순간과 동일한 반복 진행도 값을 생성합니다.

그 외의 모든 재생 중이 아닌 시간에는 아무 효과가 없습니다.

both

애니메이션 효과가 before phase에 있으면 backwards 채움 동작이 적용됩니다.

애니메이션 효과가 after phase에 있으면 forwards 채움 동작이 적용됩니다.

아래에 다양한 채움 모드와 그로 인한 상태 예시가 나와 있습니다.

참고: 채움 모드를 설정해도 활성 구간의 끝점이나 phase 경계에는 영향이 없습니다. 그러나 채움 모드는 타이밍 모델의 여러 속성에 영향을 주는데, 활성 시간은 애니메이션 효과가 active phase 내에 있거나 채움이 적용될 때만 정의됩니다(미해결이 아님).

4.7. 반복

4.7.1. 반복 구간

애니메이션 효과가 정해진 횟수 또는 무한히 반복되도록 지정할 수 있습니다. 이 반복은 활성 구간 내에서 발생합니다. 한 번 반복이 실행되는 시간 범위를 반복 구간이라고 합니다.

활성 구간과 달리, 애니메이션 효과는 여러 반복 구간을 가질 수 있지만, 일반적으로 현재 반복에 해당하는 구간만 사용됩니다.

한 번 반복되는 길이를 반복 지속 시간이라고 하며, 애니메이션 효과의 초기 반복 지속 시간은 0입니다.

이 섹션은 규범적이지 않습니다

반복 지속 시간과 활성 지속 시간을 비교하면 다음과 같습니다:

반복 지속 시간

애니메이션 효과의 한 번 반복이 완료되는 데 걸리는 시간.

활성 지속 시간

전체 애니메이션 효과가 완료되는 데 걸리는 시간(반복 포함). 이 값은 반복 지속 시간보다 길거나 짧을 수 있습니다.

반복 지속 시간과 활성 지속 시간의 관계는 아래 그림에서 설명합니다.

4.7.2. 반복 제어

애니메이션 효과가 반복되는 횟수를 반복 횟수라고 합니다. 반복 횟수는 0 이상의 실수입니다. 반복 횟수는 양의 무한대가 될 수 있으며, 이는 애니메이션 효과가 무한히 반복됨을 의미합니다.

반복 횟수 외에도, 애니메이션 효과는 반복 시작 속성을 가지며, 이는 애니메이션 효과가 반복 시리즈 중 어느 위치에서 시작할지 지정합니다. 반복 시작은 0 이상의 유한 실수입니다.

이 파라미터들의 동작은 § 4.8 핵심 애니메이션 효과 계산에서 정의됩니다.

이 섹션은 규범적이지 않습니다

반복 횟수와 반복 시작 파라미터의 효과는 아래 그림에서 설명합니다.

반복 횟수 파라미터와 달리, 반복 시작 파라미터는 활성 지속 시간의 길이에 영향을 주지 않습니다.

반복 시작이 1 이상인 값은, iteration composite operation이 accumulate로 설정된 애니메이션 효과와 조합할 때만 일반적으로 유용합니다.

4.7.3. 반복 시간 공간

이 섹션은 규범적이지 않습니다

Web Animations에서는 모든 시간이 어떤 기준점에 상대적입니다. 이러한 기준점의 차이로 서로 다른 시간 공간이 생깁니다.

이는 컴퓨터 그래픽에서 사용하는 좌표 공간과 비교할 수 있습니다. 시간 공간의 0초는 좌표 공간의 원점에 해당합니다.

반복되는 애니메이션은 애니메이션이 반복될 때마다 새로운 시간 공간, 즉 반복 시간 공간을 형성한다고 설명할 수 있습니다.

반복 시간 공간은 애니메이션 효과의 현재 반복이 시작되는 시점을 0초로 하는 시간 공간입니다.

Web Animations 모델 내에서는 활성 시간도 사용하는데, 이는 활성 구간의 시작점에 상대적인 시간입니다. 이 시간 공간은 모델 내부에서만 사용되며, 프로그래밍 인터페이스나 마크업에서는 노출되지 않습니다.

이러한 시간 공간들은 아래 그림에서 설명합니다.

참고: 시간 공간 자체에는 경계가 없지만, Web Animations에서는 활성 시간과 반복 진행도를 다이어그램처럼 특정 범위로 제한(clamp)합니다. 예를 들어, 활성 시간 공간에서 -1초도 유효한 시간이지만, § 4.8.3.1 활성 시간 계산 절차에서는 음수 값이 반환되지 않습니다.

이들 시간 공간 외에도 문서 시간 공간이라고 부르는 것이 있는데, 이는 기본 문서 타임라인의 시간 값이 속한 Document의 현재 글로벌 객체의 시간 공간을 의미합니다.

4.7.4. 구간 타이밍

이 섹션은 규범적이지 않습니다

애니메이션 효과가 반복될 때 반복 경계에서의 동작을 정의해야 합니다. 이를 포함한 모든 구간 타이밍에 대해 Web Animations는 endpoint-exclusive 모델을 사용합니다. 즉, 구간의 시작 시간은 포함되지만, 끝 시간은 포함되지 않습니다. 구간 표기법으로는 [begin, end)입니다. 이 모델은 구간이 반복·순차적으로 실행될 때 구간 간의 겹침이 없도록 합리적 동작을 제공합니다.

아래 예시에서 반복 효과의 경우, 로컬 시간 1초에 반복 시간은 0입니다. 순차 애니메이션의 경우, 타임라인 시간 1초에는 애니메이션 B의 연관 효과만 재생 중이 되며, 겹침이 없습니다.

이 동작의 예외는 채움을 수행할 때, 채움이 구간 끝점에서 시작된다면 그 끝점이 사용된다는 점입니다. 이 동작은 § 4.8.3.3 간단 반복 진행도 계산의 알고리듬에서 유도되며, 아래 그림에서 설명합니다.

4.8. 핵심 애니메이션 효과 계산

4.8.1. 개요

이 섹션은 규범적이지 않습니다

Web Animations 타이밍 모델의 핵심은 로컬 시간 값을 받아 반복 진행도로 변환하는 과정입니다.

이 과정의 첫 단계는 활성 구간의 경계를 계산하는데, 이는 활성 지속 시간에 의해 결정됩니다.

이 과정은 아래 그림에서 설명합니다.

활성 지속 시간 계산 과정은 § 4.8.2 활성 지속 시간 계산에 규범적으로 정의되어 있습니다.

활성 지속 시간이 결정되면, 애니메이션 효과의 로컬 시간을 변환 진행도(반복 진행도)로 변환하는 과정은 아래 그림에서 설명합니다.

첫 단계인 로컬 시간 계산은 § 4.5.4 로컬 시간에서 설명합니다. 다이어그램의 2~4단계는 다음 절에 설명되어 있습니다. 5, 6단계는 § 4.9.1 방향 진행도 계산 및 § 4.10.1 변환 진행도 계산에 설명되어 있습니다.

4.8.2. 활성 지속 시간 계산

활성 지속 시간은 아래와 같이 계산됩니다:

활성 지속 시간 = 반복 지속 시간 × 반복 횟수

반복 지속 시간 또는 반복 횟수가 0이면 활성 지속 시간도 0입니다.

이 명확화는 IEEE 754-2008에 따라 무한대 × 0의 결과가 정의되지 않기 때문에 필요합니다.

4.8.3. 로컬 시간 변환

4.8.3.1. 활성 시간 계산

활성 시간은 로컬 시간과 시작 지연에 기반합니다. 하지만, 활성 시간은 애니메이션 효과가 실제로 출력을 생성해야 할 때만 정의되며, 아래와 같이 채움 모드와 페이즈에 따라 달라집니다,

4.8.3.2. 전체 진행도 계산

전체 진행도는 지금까지 완료된 반복 횟수(부분 반복 포함)를 나타내며, 아래와 같이 정의됩니다:

1. 활성 시간이 미해결이면 미해결을 반환합니다.

2. 아래에서 첫 번째로 일치하는 조건에 따라 overall progress의 초기값을 계산합니다:

   반복 지속 시간이 0인 경우,

   애니메이션 효과가 before phase에 있으면 overall progress는 0, 그 외에는 반복 횟수와 같습니다.

   그 밖의 경우,

   overall progress는 아래 계산 결과로 합니다: 활성 시간 / 반복 지속 시간.

3. overall progress + 반복 시작 결과를 반환합니다.

4.8.3.3. 간단 반복 진행도 계산

간단 반복 진행도는 현재 반복 내의 진행도를 나타내는 분수 값으로, 재생 방향이나 타이밍 함수 등 시간 변형을 무시하고 아래와 같이 계산합니다:

1. 전체 진행도가 미해결이면 미해결을 반환합니다.

2. 전체 진행도가 무한대면 simple iteration progress는 반복 시작 % 1.0이고, 그 외에는 simple iteration progress는 전체 진행도 % 1.0입니다.

3. 아래 모든 조건이 참이면,

   • 위에서 계산한 simple iteration progress가 0이고, 그리고

   • 애니메이션 효과가 active phase 혹은 after phase에 있고, 그리고

   • 활성 시간이 활성 지속 시간과 같고, 그리고

   • 반복 횟수가 0이 아님.

   simple iteration progress를 1.0으로 합니다.

   위 단계는 애니메이션의 활성 구간이 반복 끝점에 정확히 맞춰 끝나면, 다음 반복의 시작점이 아니라 마지막 반복의 끝점에서 채움이 유지되는 동작을 구현합니다.

   마지막 조건은 반복 횟수가 처음부터 0이어서 반복이 전혀 실행되지 않은 경우에는 적용되지 않게 합니다.

4. simple iteration progress를 반환합니다.

4.8.4. 현재 반복 계산

현재 반복은 아래의 단계로 계산할 수 있습니다:

1. 활성 시간이 미해결이면 미해결을 반환합니다.

2. 애니메이션 효과가 after phase에 있고 반복 횟수가 무한대라면, 무한대를 반환합니다.

3. 간단 반복 진행도가 1.0이면, floor(전체 진행도) - 1를 반환합니다.

4. 그 밖의 경우, floor(전체 진행도)를 반환합니다.

4.9. 방향 제어

애니메이션 효과는 반복의 방향을 제어할 수도 있습니다. 이를 위해 애니메이션 효과는 재생 방향 파라미터를 가지며, 아래 값 중 하나를 가집니다:

• normal,

• reverse,

• alternate,

• alternate-reverse.

이 값들의 의미는 아래 방향 진행도 계산에 포함되어 있습니다.

4.9.1. 방향 진행도 계산

방향 진행도는 간단 반복 진행도에서 아래 단계로 계산합니다:

1. 간단 반복 진행도가 미해결이면 미해결을 반환합니다.

2. 아래에서 첫 번째로 일치하는 조건에 따라 current direction을 결정합니다:

   재생 방향이 normal인 경우,

   current direction을 forwards로 설정합니다.

   재생 방향이 reverse인 경우,

   current direction을 reverse로 설정합니다.

   그 밖의 경우,

   1. d를 현재 반복으로 설정합니다.

   2. 재생 방향이 alternate-reverse라면 d를 1만큼 증가시킵니다.

   3. d % 2 == 0이면 current direction을 forwards로, 아니면 reverse로 설정합니다. d가 무한대라면 current direction을 forwards로 설정합니다.

3. current direction이 forwards이면 간단 반복 진행도를 반환합니다.

   그 밖의 경우, 1.0 - 간단 반복 진행도를 반환합니다.

4.10. 시간 변환

애니메이션 효과의 진행 속도를 제어하는 것이 바람직한 경우가 많습니다. 예를 들어, 애니메이션의 속도를 부드럽게(이징) 조절하면 모멘텀을 느끼게 하거나 보다 자연스러운 효과를 줄 수 있습니다. CSS 이징 함수 모듈 [CSS-EASING-1]에서는 이를 위한 타이밍 함수를 정의합니다.

애니메이션 효과는 하나의 타이밍 함수를 가집니다. 기본 타이밍 함수는 선형 타이밍 함수입니다.

4.10.1. 변환 진행도 계산

변환 진행도는 방향 진행도에서 다음 단계로 계산합니다:

1. 방향 진행도가 미해결이면, 미해결을 반환합니다.

2. before flag의 값을 아래와 같이 계산합니다:

   1. § 4.9.1 방향 진행도 계산에서 정의된 절차로 current direction을 결정합니다.

   2. current direction이 forwards이면, going forwards를 true로, 아니면 false로 설정합니다.

   3. 애니메이션 효과가 before phase에 있고 going forwards가 true이면, 또는 애니메이션 효과가 after phase에 있고 going forwards가 false이면, before flag를 설정합니다.

3. 애니메이션 효과의 타이밍 함수를, 방향 진행도를 input progress value로, before flag를 before flag로 넘겨 계산한 결과를 반환합니다.

4.11. 반복 진행도

반복 진행도는 애니메이션 효과의 변환 진행도입니다.

5. 애니메이션 모델

5.1. 소개

애니메이션 효과는 타이밍 출력 변화에 따라 영향을 받는 0개 이상의 속성을 가집니다. 이 속성들을 효과의 대상 속성이라고 합니다.

반복 진행도, 현재 반복, 기저 값이 주어지면, 애니메이션 효과는 각 애니메이션 가능한 대상 속성에 대해 해당 속성에 맞는 애니메이션 타입의 절차를 적용해 효과 값을 산출합니다.

5.2. 속성 애니메이션

별도 명시가 없는 한, 모든 CSS 속성은 애니메이션 가능입니다. 속성 값이 어떻게 결합되는지는 각 속성 정의 표의 애니메이션 타입 행에 정의되어 있습니다:

애니메이션 불가

해당 속성은 애니메이션 불가입니다. 애니메이션 키프레임에 명시되어도 처리되지 않으며, 트랜지션에도 영향을 받지 않습니다.

참고: 일부 속성은 애니메이션 처리 시 과도한 복잡성이 생기므로 애니메이션에서 제외됩니다. 예를 들어, 애니메이션 파라미터를 정의하는 속성은 애니메이션 불가인데, 이들을 애니메이션하면 복잡한 재귀 동작이 나타날 수 있습니다.

참고: 애니메이션 효과가 애니메이션 불가 속성만 대상으로 할 경우에도, 이벤트 발생, 애니메이션의 현재 finished promise의 이행 지연 등 통상적인 애니메이션 효과의 동작은 그대로 나타납니다.

이산(discrete)

해당 속성 값은 의미 있게 결합될 수 없으므로, 가산 불가능 및 보간이 V_a에서 V_b로 50%(p=0.5)에서 전환됩니다. 즉,

$V_{\mathrm{result}}=\left\{\begin{array}{cc}{V}_{\mathrm{start}}\hfill & \text{p < 0.5일 때}\hfill \\ V_{\mathrm{end}}\hfill & \text{p ≥ 0.5일 때}\hfill \end{array}\right.$

계산값 기준(by computed value)

계산값의 개별 컴포넌트를 (보간, 덧셈, 누적 등) 해당 값 타입에 맞는 절차로 결합합니다 (CSS Values 4 § 3 값 결합: 보간, 덧셈, 누적 참고). 컴포넌트 수나 타입이 맞지 않거나, 어떤 컴포넌트 값이 이산(discrete) 애니메이션이고 두 값이 다르다면, 속성 값은 이산(discrete)으로 결합됩니다.

반복 가능한 리스트(repeatable list)

계산값 기준과 동일하지만, 두 리스트의 아이템 수가 다르면 먼저 최소공배수 길이까지 반복합니다. 각 아이템은 계산값 기준으로 결합합니다. 결합 불가한 쌍이나 어떤 컴포넌트 값이 이산(discrete) 애니메이션이면, 속성 값은 이산(discrete)으로 결합합니다.

참고: 반복 가능한 리스트 개념은, 리스트가 특정 길이까지 개념적으로 반복될 때(background-origin이 background-image 리스트 길이에 맞게 반복됨) 또는 무한 반복될 때, 어떤 값 사이든 부드럽게 전환되고, 계산값이 결과를 올바르게 표현하며(상속도 가능), 리스트가 올바른 길이로 처리될 수 있도록 합니다.

(See prose)

일부 속성은 위의 경우에 해당하지 않는 특정 보간 동작을 가지며, 이 경우 해당 속성에 대해 애니메이션 동작이 별도로 명시됩니다.

아직 애니메이션 타입 행이 속성 정의에 포함되지 않은 속성의 애니메이션 타입은 부록 A: 기존 속성의 애니메이션 타입에서 정의됩니다.

5.2.1. 사용자 정의 속성

사용자 정의 속성이 registerProperty() 메서드를 통해 현재 글로벌 오브젝트에 등록된 경우, 해당 애니메이션 타입은 계산값 기준이며, 속성의 문법 정의에 사용된 타입에서 유도됩니다. 속성의 지정 문법에 해당하는 계산값 타입이 없거나 (예: 문법이 범용 문법 정의일 때) 혹은 사용자 정의 속성이 등록되지 않은 경우에는, 애니메이션 타입이 이산(discrete)입니다.

5.3. 키프레임 효과

키프레임 효과는 애니메이션 효과의 한 종류로, 타이밍 모델의 출력을 이용해 요소 또는 의사 요소(예: ::before나 ::after [select])의 CSS 속성을 갱신합니다. 이를 효과 타겟이라고 합니다.

효과 타겟은 Element 타입의 타겟 요소와, 의사 요소 선택자인 타겟 의사 선택자로 구성됩니다. 효과 타겟이 Element이면, 타겟 요소는 해당 요소이고, 타겟 의사 선택자는 null입니다. 효과 타겟이 의사 요소이면, 타겟 요소는 그 기원 요소이고, 타겟 의사 선택자는 해당 의사 요소를 지정하는 선택자입니다.

이 방법으로 지정된 모든 효과 타겟(예: ::part() 의사 요소나 미지원 의사 요소 등)이 반드시 계산된 속성 값을 갖는 것은 아닙니다.

5.3.1. 키프레임

키프레임 효과의 효과 값은, 분수 오프셋에 위치한 여러 속성 값 사이를 보간(interpolate)하여 계산됩니다. 오프셋별로 인덱싱된 각 속성 값 집합을 키프레임이라고 합니다.

키프레임 오프셋은 [0, 1] 범위의 값 또는 특별한 값 null입니다. 키프레임 목록은 키프레임 효과에 대해 오프셋 기준 느슨한 정렬이어야 하며, 이는 목록의 각 키프레임이 null이 아닌 키프레임 오프셋을 갖는 경우, 해당 오프셋 값이 목록에서 바로 이전의 null이 아닌 키프레임의 키프레임 오프셋 이상이어야 한다는 뜻입니다.

키프레임이 겹치거나 값이 미지원일 때의 동작은 § 5.3.4 키프레임 효과의 효과 값에서 정의됩니다.

각 키프레임에는 타이밍 함수가 연결되어 있으며, 해당 함수는 지정된 키프레임과 다음 키프레임 사이 구간에 적용됩니다. 목록의 마지막 키프레임에 지정된 타이밍 함수는 적용되지 않습니다.

각 키프레임에는 키프레임별 합성 연산(composite operation)이 있을 수 있으며, 지정된 경우 해당 키프레임의 모든 값에 적용됩니다. 가능한 연산과 의미는 § 5.4.4 효과 합성에서 전체 키프레임 효과에 지정된 합성 연산과 동일합니다. 키프레임별 합성 연산이 지정되지 않은 키프레임의 값에는 해당 키프레임 효과 전체에 대해 지정된 합성 연산이 사용됩니다.

5.3.2. 속성 값 계산

var animation = elem.animate([{ fontSize: '10px', width: '10em' },
                              { fontSize: '20px', width: '20em' }], 1000);
animation.currentTime = 500;
console.log(getComputedStyle(elem).fontSize); // 15px이어야 함
console.log(getComputedStyle(elem).width); // 225px이어야 함

5.3.3. 계산된 키프레임 계산

키프레임 효과의 효과 값을 계산하기 전에, 그 키프레임의 속성 값을 계산하고, null 키프레임 오프셋에 사용할 오프셋도 계산합니다. 이 값들의 결과가 계산된 키프레임입니다.

null이 아닌 값을 포함한 키프레임 집합의 키프레임 오프셋을 계산한 결과를 계산된 키프레임 오프셋이라고 합니다.

계산된 키프레임 오프셋을 산출하기 위해, 키프레임 시퀀스 keyframes에 대해 키프레임 오프셋 누락 계산 절차를 정의하며, 다음 단계로 진행합니다:

1. keyframes의 각 키프레임에 대해, 키프레임의 계산된 키프레임 오프셋을 해당 키프레임 오프셋 값으로 설정합니다.

2. keyframes에 키프레임이 2개 이상 있고, 첫 번째 키프레임의 계산된 키프레임 오프셋이 null이면, 첫 번째 계산된 키프레임 오프셋을 0으로 설정합니다.

3. 마지막 키프레임의 계산된 키프레임 오프셋이 null이면, 해당 계산된 키프레임 오프셋을 1로 설정합니다.

4. 아래 조건을 모두 만족하는 키프레임 A, B 쌍에 대하여:

   • A가 B보다 keyframes 내에서 먼저 나오며,

   • A, B 모두 계산된 키프레임 오프셋이 null이 아니며,

   • A와 B 사이의 모든 키프레임이 null 계산된 키프레임 오프셋을 갖는 경우,

   A와 B 사이에 있는 각 키프레임의 계산된 키프레임 오프셋은 아래와 같이 계산합니다:

   1. offset_k을 계산된 키프레임 오프셋으로 합니다.

   2. n을 A, B 포함해 사이에 있는 키프레임 수에서 1을 뺀 값으로 합니다.

   3. index를 A와 B 사이 키프레임 중에서, A 바로 다음 키프레임이 1인 위치로 합니다.

   4. keyframe의 계산된 키프레임 오프셋을 offset_A + (offset_B − offset_A) × index / n으로 설정합니다.

계산된 키프레임은 다음 절차로 산출합니다. 이 절차는 반드시 계산된 속성 값을 산출할 수 있는 키프레임 효과에 대해 수행합니다.

1. computed keyframes를 빈 키프레임 리스트로 초기화합니다.

2. 해당 키프레임 효과에 지정된 키프레임 리스트의 각 keyframe에 대해, 아래 단계를 수행합니다:

   1. 새 빈 키프레임 computed keyframe을 computed keyframes에 추가합니다.

   2. keyframe에 지정된 각 속성에 대해:

      • 속성 값 계산 알고리즘으로, keyframe에 지정된 값을 value로, 타겟 요소를 element로 사용해 계산하고, 그 속성과 결과값을 computed keyframe에 추가합니다.

      • 축약(shorthand) 속성은 동등한 긴(longhand) 속성으로 추가합니다.

      • 논리(logical) 속성 [CSS-LOGICAL-1]은 동등한 물리(physical) 속성 [CSS-WRITING-MODES-4]으로 추가하며, writing-mode 및 direction의 계산값을 효과 타겟에 대해 사용합니다.

      예를 들어, keyframe이 border-width에 "12pt" 값을 지정하면, 사용자 에이전트는 각 longhand 속성에 대해 "16px"로 속성 값 계산을 할 수 있습니다: border-bottom-width, border-left-width, border-right-width, border-top-width 등. 결과적으로 computed keyframe에는 border-width 속성 값은 없고, 각 longhand 속성에 "16px" 값이 포함됩니다.

      축약 속성 확장이나 논리 속성의 물리 속성 대체 과정에서 충돌이 발생하면, 아래 규칙을 순서대로 적용해 해결합니다:

      1. longhand 속성이 shorthand 속성보다 우선합니다(예: border-top-color가 border-top보다 우선).

      2. longhand 구성 요소가 더 적은 shorthand 속성이 더 많은 shorthand 구성 요소를 포함한 속성보다 우선합니다(예: border-top이 border-color보다 우선).

      3. 물리 속성이 논리 속성보다 우선합니다.

      4. 동일한 longhand 구성 수를 가지는 shorthand 속성의 경우, 각 속성의 IDL 이름(CSS property to IDL attribute 알고리즘 [CSSOM] 참고)이 유니코드 코드포인트 오름차순 정렬에서 더 앞서는 속성이 뒤에 오는 속성보다 우선합니다.

3. 키프레임 오프셋 누락 계산 절차를 computed keyframes에 적용합니다.

4. computed keyframes를 반환합니다.

5.3.4. 키프레임 효과의 효과 값

키프레임 효과가 참조하는 단일 속성의 효과 값은 그 대상 속성 중 하나로, 주어진 iteration progress, current iteration, underlying value에 대해 아래와 같이 계산됩니다.

1. iteration progress가 미해결이면 이 절차를 중단합니다.

2. target property를 효과 값을 계산할 longhand 속성으로 설정합니다.

3. target property의 애니메이션 타입이 애니메이션 불가이면 효과를 적용할 수 없으므로 이 절차를 중단합니다.

4. 키프레임 효과에 효과 타겟이 없거나, 효과 타겟에서 계산된 속성 값을 산출할 수 없으면 이 절차를 중단합니다.

5. 합성 중립값을, add 합성 연산으로 기저 값과 결합할 때 기저 값이 그대로 나오게 하는 값으로 정의합니다.

6. property-specific keyframes를 이 키프레임 효과의 계산된 키프레임 집합으로 설정합니다.

7. property-specific keyframes에서 target property 값이 없는 키프레임을 모두 제거합니다.

8. property-specific keyframes가 비어 있으면 underlying value를 반환합니다.

9. 만약 property-specific keyframes 내에 계산된 키프레임 오프셋이 0인 키프레임이 없다면, 키프레임을 새로 만들어, 계산된 키프레임 오프셋을 0으로, 속성 값을 합성 중립값으로, 합성 연산을 add로 지정하여 property-specific keyframes 맨 앞에 추가합니다.

10. 마찬가지로, property-specific keyframes 내에 계산된 키프레임 오프셋이 1인 키프레임이 없다면, 키프레임을 새로 만들어, 계산된 키프레임 오프셋을 1로, 속성 값을 합성 중립값으로, 합성 연산을 add로 지정하여 property-specific keyframes 맨 끝에 추가합니다.

11. interval endpoints를 빈 키프레임 시퀀스로 초기화합니다.

12. interval endpoints를 아래 첫 번째로 일치하는 조건에 따라 채웁니다:

    iteration progress < 0이고, property-specific keyframes에 계산된 키프레임 오프셋이 0인 키프레임이 두 개 이상 있을 때,

    property-specific keyframes의 첫 번째 키프레임을 interval endpoints에 추가합니다.

    iteration progress ≥ 1이고, property-specific keyframes에 계산된 키프레임 오프셋이 1인 키프레임이 두 개 이상 있을 때,

    property-specific keyframes의 마지막 키프레임을 interval endpoints에 추가합니다.

    그 밖의 경우,

    1. property-specific keyframes에서 계산된 키프레임 오프셋이 iteration progress 이하이고 1 미만인 마지막 키프레임을 interval endpoints에 추가합니다. 없으면(예: iteration progress가 음수인 경우) 키프레임 중 계산된 키프레임 오프셋이 0인 마지막 키프레임을 추가합니다.

    2. 이전 단계에서 추가한 키프레임 바로 다음 키프레임을 interval endpoints에 추가합니다.

13. interval endpoints의 각 keyframe에 대해:

    1. keyframe의 합성 연산이 replace가 아니거나, keyframe에 합성 연산이 없고 이 키프레임 효과의 합성 연산이 replace가 아니면, 아래 단계를 수행합니다:

       1. composite operation to use를 keyframe의 합성 연산으로, 없으면 이 키프레임 효과의 합성 연산으로 설정합니다.

       2. value to combine을 keyframe에 지정된 target property의 속성 값으로 설정합니다.

       3. target property의 속성 값을 keyframe에서, underlying value(V_a)와 value to combine(V_b)를 composite operation to use에 맞는 애니메이션 타입의 절차로 결합한 결과로 대체합니다.

14. interval endpoints에 키프레임이 하나만 있으면, 그 키프레임의 target property 속성 값을 반환합니다.

15. start offset을 interval endpoints의 첫 번째 키프레임의 계산된 키프레임 오프셋으로 설정합니다.

16. end offset을 interval endpoints의 마지막 키프레임의 계산된 키프레임 오프셋으로 설정합니다.

17. interval distance를 (iteration progress - start offset) / (end offset - start offset)로 계산합니다.

18. transformed distance를 interval endpoints의 첫 번째 키프레임에 연결된 타이밍 함수에 interval distance를 입력값으로 넘겨 계산한 결과로 설정합니다.

19. interval endpoints의 두 키프레임에 지정된 target property 값을 애니메이션 타입의 보간(interpolation) 절차에 따라, 첫 번째 값을 V_start, 두 번째 값을 V_end로 사용하고, transformed distance를 보간 파라미터 p로 사용해서 결과를 반환합니다.

참고: 이 절차는 키프레임이 겹치는(overlap) 경우도 허용합니다. 겹치는 오프셋에서 출력 값은 해당 오프셋에 마지막으로 정의된 키프레임 값으로 점프합니다. 0 또는 1에서 겹치는 키프레임의 경우, iteration progress 값이 0 미만 또는 1 이상일 때 출력 값은 키프레임 목록의 첫 번째 또는 마지막 값이 됩니다.

5.4. 효과 결합

이 섹션은 규범적이지 않습니다

키프레임 효과의 효과 값을 계산한 뒤, 해당 값들은 애니메이션 효과의 대상 속성에 적용됩니다.

여러 효과 중 키프레임 효과가 동일 속성을 타겟팅할 수 있으므로, 여러 키프레임 효과의 결과를 결합해야 할 필요가 있습니다. 이 과정을 합성(compositing)이라고 하며, 각 속성별로 효과 스택을 구축해 진행합니다(효과 중 애니메이션 효과 기준).

여러 키프레임 효과의 결과를 합성한 뒤, 그 합성 결과는 해당 대상 속성에 지정된 다른 값들과 결합됩니다.

아래 그림은 전체 구조를 설명합니다:

이 과정의 첫 단계(동일 속성에 대해 효과 값을 결합하는 과정)에서는, 여러 키프레임 효과를 어떻게 결합할지(how), 그리고 적용 순서(order, 즉 상대 합성 순서(composite order))를 정해야 합니다.

효과 값을 결합하는 방식(how)은 각 키프레임 효과의 합성 연산에 의해 결정됩니다.

각 효과 값의 상대 합성 순서는, 각 애니메이션된 속성별로 구축되는 효과 스택에 의해 결정됩니다.

5.4.1. 애니메이션 클래스

이 명세는, 본 모델 위에 마크업이나 프로그래밍 인터페이스를 정의하는 다른 명세에서 사용할 수 있도록 공통 애니메이션 모델을 제공합니다. 특정 마크업/프로그래밍 인터페이스가 생성한 애니메이션은 그 애니메이션 클래스를 정의합니다.

후속 명세에서는 서로 다른 애니메이션 클래스 간 또는 클래스 내부에서 합성 순서에 대한 특수 동작을 정의할 수 있습니다.

5.4.2. 효과 스택

효과 스택은, 하나 이상의 키프레임 효과가 타겟팅하는 각 속성마다 연결됩니다. 효과 스택은 키프레임 효과들 간의 상대 합성 순서를 결정합니다.

효과 스택 내 두 키프레임 효과 A, B의 상대 합성 순서는 아래 속성 비교로 결정됩니다:

1. 애니메이션 효과의 연결된 애니메이션을, 해당 애니메이션 효과에 연결된 애니메이션으로 합니다.

2. A와 B를 아래 조건을 순서대로 적용해 비교해 결정합니다:

   1. A, B의 연결된 애니메이션이 클래스가 다르면, 각 클래스에 정의된 inter-class 합성 순서로 결정합니다.

   2. 아직 비교가 끝나지 않았으면, 두 A, B의 공통 클래스에 정의된 class-specific 합성 순서로 비교합니다.

   3. 아직도 결정이 안 되면, 전역 애니메이션 리스트에서 A, B의 연결된 애니메이션 위치로 비교합니다.

애니메이션 효과가 먼저 정렬되면 더 낮은 합성 순서를 갖습니다.

5.4.3. 효과 스택 결과 계산

효과 스택의 최종 값을 계산하려면, 스택에 포함된 각 키프레임 효과의 효과 값을 합성 순서대로 결합합니다.

효과 스택 평가 과정의 각 단계는 입력값으로 기저 값을 받습니다.

스택의 각 키프레임 효과에 대해, 해당 키프레임 효과의 적절한 효과 값을 기저 값과 결합하여 새 값을 생성합니다. 이렇게 생성된 값은 다음 키프레임 효과와 결합할 때의 새로운 기저 값이 됩니다.

스택의 최종 효과 스택 값은 합성 값이라 하며, 스택에서 마지막(합성 순서가 가장 높은) 키프레임 효과의 효과 값과 해당 시점의 기저 값을 결합한 결과입니다.

5.4.4. 효과 합성

효과 값을 기저 값과 결합할 때 사용하는 구체적인 연산은 키프레임 효과의 합성 연산(composite operation)에 따라 결정됩니다.

이 명세에서는 아래 세 가지 합성 연산을 정의합니다:

replace

효과 값과 기저 값을 합성한 결과는 단순히 효과 값입니다.

add

효과 값을 덧셈(addition) 연산으로 기저 값에 더합니다. 애니메이션 타입에 따라 덧셈 연산이 교환법칙이 성립하지 않는 경우, 피연산자 순서는 기저 값 + 효과 값입니다.

accumulate

효과 값을 누적(accumulation) 연산으로 기저 값에 누적합니다. 애니메이션 타입에 따라 누적 연산이 교환법칙이 성립하지 않는 경우, 피연산자 순서는 기저 값 다음에 효과 값입니다.

5.4.5. 합성 결과 적용

합성 값을 대상 속성에 적용하려면, 지정값을 CSS 계단식에 추가하면 됩니다.

지정값이 CSS 계단식의 어느 단계에 추가되는지는, 효과 스택 내에서 가장 높은 합성 순서를 갖는 효과가 연결된 클래스에 따라 결정됩니다. 기본적으로 지정값은 CSS 계단식의 "Animation declarations" 단계에 추가됩니다([css-cascade-3]).

CSS 대상 속성에 계산된 합성 값은 아래 절차로 적용됩니다.

1. 해당 속성에 대해 애니메이션이 없을 때 계산값을 구해, 그 값을 base value로 설정합니다.

2. 해당 속성의 효과 스택을 구축합니다(§ 5.4.2 효과 스택 참고).

3. base value를 초기 기저 값으로 하여, 효과 스택의 합성 값을 계산합니다(§ 5.4.3 효과 스택 결과 계산 참고).

4. 효과 스택의 맨 위에 있는 효과가 연결된 애니메이션의 클래스에 정의된 단계에, 합성 값을 CSS 계단식에 삽입합니다.

5.5. 애니메이션 대체

elem.addEventListener('mousemove', evt => {
  circle.animate(
    { transform: `translate(${evt.clientX}px, ${evt.clientY}px)` },
    { duration: 500, fill: 'forwards' }
  );
});

5.5.1. 대체 상태

애니메이션은 아래 값 중 하나를 가질 수 있는 대체 상태(replace state)를 유지합니다:

• active

• removed

• persisted

애니메이션의 대체 상태의 초기 값은 active입니다.

replace state가 removed인 애니메이션의 애니메이션 효과는 그 대상 속성의 효과 스택에 포함되지 않습니다.

5.5.2. 대체된 애니메이션 제거

애니메이션은 아래 모든 조건을 만족하면 대체 가능(replaceable)입니다:

• 애니메이션의 존재가 마크업에 의해 규정되지 않습니다. 즉, CSS 애니메이션(소유 요소가 있음)이나 CSS 트랜지션(소유 요소가 있음)이 아닙니다.

• 애니메이션의 재생 상태가 finished입니다.

• 애니메이션의 대체 상태가 removed가 아닙니다.

• 애니메이션이 단조 증가 타임라인에 연결되어 있습니다.

• 애니메이션에 연관 효과가 있습니다.

• 애니메이션의 연관 효과가 효과 중입니다.

• 애니메이션의 연관 효과에 효과 타겟이 있습니다.

Document doc에 대해 대체된 애니메이션 제거를 요청받으면, 아래 조건을 모두 만족하는 각 애니메이션 animation에 대해 다음을 수행합니다:

• 연결된 애니메이션 효과의 효과 타겟이 doc의 자손(descendant)인 경우,

• 대체 가능이고,

• replace state가 active이고,

• 각 대상 속성에 대해, animation에 연결된 모든 애니메이션 효과에 대해, 해당 대상 속성을 포함하는, 더 높은 합성 순서의 대체 가능 애니메이션에 연결된 애니메이션 효과가 존재하는 경우

다음 단계를 수행합니다:

1. animation의 replace state를 removed로 설정합니다.

2. Create an AnimationPlaybackEvent, removeEvent.

3. removeEvent의 type 속성을 remove로 설정합니다.

4. removeEvent의 currentTime 속성을 animation의 현재 시간으로 설정합니다.

5. removeEvent의 timelineTime 속성을 animation이 연결된 타임라인 현재 시간으로 설정합니다.

6. animation에 document for timing이 있으면, removeEvent를 그 document for timing의 대기 중 애니메이션 이벤트 큐에, 타겟 animation과 함께 추가합니다. 예정 이벤트 시간은 타임라인 시간을 원점 기준 시간으로 변환 절차를 animation이 연결된 타임라인 현재 시간에 적용한 결과로 사용합니다.

   그 밖의 경우, 태스크(queue a task)를 디스패치(dispatch)하는데, removeEvent를 animation에 디스패치합니다. 이 태스크의 소스는 DOM 조작 태스크 소스입니다.

5.6. 애니메이션의 부수 효과

최소 하나의 애니메이션 효과에 의해 타겟팅되고, current 또는 효과 중인 모든 속성에 대해, 그리고 그 효과가 애니메이션에 연결되어 있고, 해당 애니메이션의 replace state가 removed가 아닌 경우, 사용자 에이전트는 will-change 속성이 effect target에 해당 속성을 포함하는 것처럼 동작해야 합니다.

6. 프로그래밍 인터페이스

6.1. 프로그래밍 인터페이스의 시간 값

시간 값은 프로그래밍 인터페이스에서 double 타입으로 표현됩니다. 미해결 시간 값은 null로 표현됩니다.

6.2. AnimationTimeline 인터페이스

타임라인은 Web Animations API에서 AnimationTimeline 인터페이스로 표현됩니다.

[Exposed=Window]
interface AnimationTimeline {
    readonly attribute double? currentTime;
};

6.3. DocumentTimeline 인터페이스

문서 타임라인 및 기본 문서 타임라인은 Web Animations API에서 DocumentTimeline 인터페이스로 표현됩니다.

dictionary DocumentTimelineOptions {
  DOMHighResTimeStamp originTime = 0;
};

[Exposed=Window]
interface DocumentTimeline : AnimationTimeline {
  constructor(optional DocumentTimelineOptions options = {});
};

6.4. Animation 인터페이스

애니메이션은 Web Animations API에서 Animation 인터페이스로 표현됩니다.

[Exposed=Window]
interface Animation : EventTarget {
    constructor(optional AnimationEffect? effect = null,
                optional AnimationTimeline? timeline);
             attribute DOMString                id;
             attribute AnimationEffect?         effect;
             attribute AnimationTimeline?       timeline;
             attribute double?                  startTime;
             attribute double?                  currentTime;
             attribute double                   playbackRate;
    readonly attribute AnimationPlayState       playState;
    readonly attribute AnimationReplaceState    replaceState;
    readonly attribute boolean                  pending;
    readonly attribute Promise<Animation>       ready;
    readonly attribute Promise<Animation>       finished;
             attribute EventHandler             onfinish;
             attribute EventHandler             oncancel;
             attribute EventHandler             onremove;
    undefined cancel();
    undefined finish();
    undefined play();
    undefined pause();
    undefined updatePlaybackRate(double playbackRate);
    undefined reverse();
    undefined persist();
    [CEReactions]
    undefined commitStyles();
};

계산된 스타일 커밋을 애니메이션 animation에 대해 수행하려면:

1. targets를 집합으로, 애니메이션 효과가 animation과 연결된 모든 효과 타겟을 포함합니다.

2. 각 target에 대해:

   1. target이 style 속성을 가질 수 있는 요소가 아니면([CSS-STYLE-ATTR], 예를 들어 pseudo-element나 style 속성이 정의되지 않은 문서 포맷의 요소 등) throw "NoModificationAllowedError" DOMException 하고, 절차를 중단합니다.

   2. 대기 중인 스타일 변경 적용 후, target이 렌더링 중이 아니면 throw "InvalidStateError" DOMException 하고, 절차를 중단합니다.

      렌더링 중의 정의는 display: contents와 관련해 논의 중입니다. 본 절차에서는, display: contents 상태이고 레이아웃 박스를 가질 수 있는 요소(즉, connected이고 display: none 서브트리에 포함되지 않은 경우) 렌더링 중으로 간주합니다.

   3. inline style을 target의 CSS 선언 블록에서 가져옵니다. target이 style 속성을 가지고 있지 않으면, inline style을 새로운 빈 CSS 선언 블록으로 하고, owner node를 target으로 설정합니다.

   4. targeted properties를, target에 대해 애니메이션 효과가 animation과 연결되어 있고 해당 효과 타겟이 target인 경우에, 물리적 longhand 대상 속성의 집합으로 설정합니다.

   5. 각 targeted properties의 property에 대해:

      1. partialEffectStack을 target의 효과 스택의 복사본으로 설정합니다.

      2. animation의 대체 상태가 removed이면, animation과 연결되고 target을 효과 타겟으로 가지며 property를 대상 속성으로 포함하는 모든 애니메이션 효과를 partialEffectStack에 추가합니다.

      3. partialEffectStack에서 animation보다 합성 순서가 더 높은 애니메이션에 연결된 애니메이션 효과를 모두 제거합니다.

      4. effect value를 property와 target의 계산된 스타일을 이용해 partialEffectStack의 결과로 계산합니다(§ 5.4.3 효과 스택 결과 계산 참고).

      5. CSS 선언 설정으로 inline style에 property와 effect value를 기록합니다.

   6. inline style의 style 속성 갱신을 수행합니다.

6.4.1. AnimationPlayState 열거형

enum AnimationPlayState { "idle", "running", "paused", "finished" };

idle

idle play state에 해당합니다.

running

running play state에 해당합니다.

paused

paused play state에 해당합니다.

finished

finished play state에 해당합니다.

6.4.2. AnimationReplaceState 열거형

enum AnimationReplaceState { "active", "removed", "persisted" };

active

active replace state에 해당합니다.

removed

removed replace state에 해당합니다.

persisted

persisted replace state에 해당합니다.

6.5. AnimationEffect 인터페이스

애니메이션 효과는 Web Animations API에서 추상 AnimationEffect 인터페이스로 표현됩니다.

[Exposed=Window]
interface AnimationEffect {
    EffectTiming         getTiming();
    ComputedEffectTiming getComputedTiming();
    undefined            updateTiming(optional OptionalEffectTiming timing = {});
};

remove() 메서드는 효과를 부모 그룹이나 애니메이션에서 제거하는 데 사용할 수 있습니다. 1단계에서 남겨두고 애니메이션에서 효과를 제거하는 것으로만 정의할까요? [Issue #2082]

6.5.1. EffectTiming 및 OptionalEffectTiming 딕셔너리

EffectTiming 딕셔너리는 AnimationEffect의 타이밍 속성을 나타냅니다.

OptionalEffectTiming 딕셔너리는 EffectTiming 딕셔너리의 변형으로, 일부 멤버가 존재하지 않아도 됩니다. 이는 updateTiming() 메서드에서 타이밍 속성의 델타 업데이트를 수행할 때 사용됩니다. AnimationEffect 인터페이스의 애니메이션 효과의 타이밍 속성에 적용됩니다.

dictionary EffectTiming {
    double                             delay = 0;
    double                             endDelay = 0;
    FillMode                           fill = "auto";
    double                             iterationStart = 0.0;
    unrestricted double                iterations = 1.0;
    (unrestricted double or DOMString) duration = "auto";
    PlaybackDirection                  direction = "normal";
    DOMString                          easing = "linear";
};

dictionary OptionalEffectTiming {
    double                             delay;
    double                             endDelay;
    FillMode                           fill;
    double                             iterationStart;
    unrestricted double                iterations;
    (unrestricted double or DOMString) duration;
    PlaybackDirection                  direction;
    DOMString                          easing;
};

6.5.2. FillMode 열거형

enum FillMode { "none", "forwards", "backwards", "both", "auto" };

none

채움 없음.

forwards

forwards 채움.

backwards

backwards 채움.

both

backwards 및 forwards 모두 채움.

auto

채움 없음. 이후 명세 레벨에서는 다른 종류의 애니메이션 효과에 대해 다른 동작을 할 수 있습니다.

6.5.3. PlaybackDirection 열거형

enum PlaybackDirection { "normal", "reverse", "alternate", "alternate-reverse" };

normal

모든 반복이 지정된 대로 재생됩니다.

reverse

모든 반복이 지정된 순서의 반대 방향으로 재생됩니다.

alternate

짝수 반복은 지정된 대로, 홀수 반복은 반대 방향으로 재생됩니다.

alternate-reverse

짝수 반복은 반대 방향으로, 홀수 반복은 지정된 대로 재생됩니다.

6.5.4. AnimationEffect의 타이밍 업데이트

애니메이션 효과의 타이밍 속성 업데이트를 effect에 대해, EffectTiming 또는 OptionalEffectTiming 객체 input을 사용해 다음 절차를 수행합니다:

1. input의 iterationStart 멤버가 존재하고 0 미만이면, TypeError를 발생시키고 절차를 중단합니다.

   참고: TypeError를 사용하는 이유는 RangeError가 아닌 WebIDL의 [EnforceRange] 어노테이션의 동작을 반영하기 위함이며, 향후 부동소수점 값에도 적용될 수 있습니다.

2. input의 iterations 멤버가 존재하며, 0 미만이거나 NaN이면 TypeError를 발생시키고 절차를 중단합니다.

3. input의 duration 멤버가 존재하며, 0 미만이거나 NaN이면 TypeError를 발생시키고 절차를 중단합니다.

4. input의 easing 멤버가 존재하지만 <easing-function> 프로덕션으로 파싱할 수 없으면, TypeError를 발생시키고 절차를 중단합니다.

5. input에서 존재하는 각 멤버를 아래와 같이 effect의 해당 타이밍 속성에 할당합니다:

   • delay → 시작 지연

   • endDelay → 끝 지연

   • fill → 채움 모드

   • iterationStart → 반복 시작

   • iterations → 반복 횟수

   • duration → 반복 지속 시간

   • direction → 재생 방향

   • easing → 타이밍 함수

6.5.5. ComputedEffectTiming 딕셔너리

타이밍 모델에서 계산된 타이밍 속성은 ComputedEffectTiming 딕셔너리 객체로 노출됩니다.

dictionary ComputedEffectTiming : EffectTiming {
    unrestricted double  endTime;
    unrestricted double  activeDuration;
    double?              localTime;
    double?              progress;
    unrestricted double? currentIteration;
};

6.6. KeyframeEffect 인터페이스

키프레임 효과는 KeyframeEffect 인터페이스로 표현됩니다.

[Exposed=Window]
interface KeyframeEffect : AnimationEffect {
    constructor(Element? target,
                object? keyframes,
                optional (unrestricted double or KeyframeEffectOptions) options = {});
    constructor(KeyframeEffect source);
    attribute Element?           target;
    attribute CSSOMString?       pseudoElement;
    attribute CompositeOperation composite;
    sequence<object> getKeyframes();
    undefined        setKeyframes(object? keyframes);
};

6.6.1. KeyframeEffect 객체 생성하기

var effect = new KeyframeEffect(elem, { left: '100px' }, 3000);

// 여러 속성을 한 번에 지정
var effectA = new KeyframeEffect(elem, { left: '100px', top: '300px' }, 3000);

// 여러 키프레임 지정
var effectB = new KeyframeEffect(elem, [ { left: '100px' }, { left: '300px' } ], 3000);

var effect =
  new KeyframeEffect(elem, { left: '100px' }, { duration: 3000, delay: 2000 });

var effect =
  new KeyframeEffect(elem, { visibility: 'hidden' }, { fill: 'forwards' });

elem.animate({ left: '100px' }, 3000);

6.6.2. 속성 이름과 IDL 이름

애니메이션 속성명 → IDL 속성명 알고리즘은 property에 대해 아래와 같습니다:

1. property가 <custom-property-name> 프로덕션을 따를 경우, property를 반환합니다.

2. property가 CSS float 속성인 경우, "cssFloat" 문자열을 반환합니다.

3. property가 CSS offset 속성인 경우, "cssOffset" 문자열을 반환합니다.

4. 그 밖의 경우, CSS 속성 → IDL 속성 알고리즘([CSSOM])을 property에 적용한 결과를 반환합니다.

IDL 속성명 → 애니메이션 속성명 알고리즘은 attribute에 대해 아래와 같습니다:

1. attribute가 <custom-property-name> 프로덕션을 따를 경우, attribute를 반환합니다.

2. attribute가 "cssFloat" 문자열이면, CSS float 속성을 나타내는 애니메이션 속성을 반환합니다.

3. attribute가 "cssOffset" 문자열이면, CSS offset 속성을 나타내는 애니메이션 속성을 반환합니다.

4. 그 밖의 경우, IDL 속성 → CSS 속성 알고리즘([CSSOM])을 attribute에 적용한 결과를 반환합니다.

6.6.3. keyframes 인자 처리

// 아래 두 표현식은 동일 결과를 만듭니다:
elem.animate([ { color: 'blue' },
               { color: 'green' },
               { color: 'red' },
               { color: 'yellow' } ], 2000);
elem.animate({ color: [ 'blue', 'green', 'red', 'yellow' ] }, 2000);

// 여러 속성 애니메이션의 경우 아래 두 표현도 동등합니다:
elem.animate([ { color: 'blue', left: '0px' },
               { color: 'green', left: '-20px' },
               { color: 'red', left: '100px' },
               { color: 'yellow', left: '50px'} ], 2000);
elem.animate({ color: [ 'blue', 'green', 'red', 'yellow' ],
               left: [ '0px', '-20px', '100px', '50px' ] }, 2000);

// 참고로 아래 세 표현식도 모두 동일합니다:
elem.animate([ { color: 'red' } ], 1000);
elem.animate({ color: [ 'red' ] }, 1000);
elem.animate({ color: 'red' }, 1000);

// 오프셋 없는 키프레임은 자동으로 오프셋이 할당됨
// 첫 키프레임은 0, 중간은 0.65, 마지막은 1로 계산됨.
elem.animate([ { color: 'blue' },
               { color: 'green', offset: 0.5 },
               { color: 'red' },
               { color: 'yellow', offset: 0.8 },
               { color: 'pink' } ], 2000);

// 아래도 동일한 결과. 마지막 값은 명시할 필요 없이 자동으로 'null'로 처리됨.
elem.animate({ color: [ 'blue', 'green', 'red', 'yellow', 'pink' ],
               offset: [ null, 0.5, null, 0.8 ] }, 2000);

// 타이밍 함수는 _키프레임 사이_에 적용되므로 마지막 키프레임에 지정해도 무시됨.
elem.animate([ { color: 'blue', easing: 'ease-in' },
               { color: 'green', easing: 'ease-out' },
               { color: 'yellow' } ], 2000);

// 아래도 동일 결과.
elem.animate({ color: [ 'blue', 'green', 'yellow' ],
               easing: [ 'ease-in', 'ease-out' ] }, 2000);

// 반복 동작 덕분에 모든 키프레임에 동일 값 할당도 간단:
elem.animate({ color: [ 'blue', 'green', 'yellow' ],
               easing: 'ease-in-out' }, 2000);

// 이 경우, 'ease-in-out'이 각 color 값 사이에 적용됨.
elem.animate({ color: [ 'blue', 'green', 'yellow' ],
               easing: 'ease-in-out' }, 2000);

// 반면, 이 경우는 'ease-in-out'이 애니메이션 전체(즉 'blue'~'yellow')에 적용됨.
elem.animate({ color: [ 'blue', 'green', 'yellow' ] },
             { duration: 2000, easing: 'ease-in-out' });

dictionary Keyframe {
    // ... property-value pairs ...
    // i.e. DOMString propertyName
    double?                   offset = null;
    DOMString                 easing = "linear";
    CompositeOperationOrAuto  composite = "auto";
};

dictionary PropertyIndexedKeyframes {
    // ... property-value and property-valuelist pairs ...
    // i.e. (DOMString or sequence<DOMString>) propertyName
    (double? or sequence<double?>)                         offset = [];
    (DOMString or sequence<DOMString>)                     easing = [];
    (CompositeOperationOrAuto or sequence<CompositeOperationOrAuto>) composite = [];
};

typedef (sequence<Keyframe> or PropertyIndexedKeyframes) KeyframeArgument;

keyframes 인자를 받는 각 메서드는 입력값에 대해 키프레임 인자 처리 절차를 실행하고, 그 결과를 저장합니다.

우선 두 가지 보조 정의를 제시합니다.

명령 완료 레코드 확인은 result가 ECMAScript 연산 호출의 완료 레코드일 때, 다음 단계와 같습니다:

1. result가 갑작스런 완료라면, result의 [[value]] 필드의 예외를 throw하고 절차를 중단합니다.

   [[type]]이 break, continue, return일 때 어떻게 해야 할까요? 해당 경우가 있을까요?

2. result를 그 [[value]] 필드 값으로 대체합니다.

키프레임 유사 객체 처리 절차는 두 인자를 받습니다:

• ECMAScript 객체 keyframe input

• 불리언 플래그 allow lists

그리고 아래 절차를 사용하여 false일 때는 속성명을 DOMString 값으로, true일 때는 속성명을 DOMString 값 시퀀스로 매핑하는 맵을 반환합니다:

1. ECMAScript 값을 딕셔너리 타입으로 변환 절차를 keyframe input에 대해 실행합니다. allow lists 값에 따라 딕셔너리 타입은 아래와 같습니다:

   만약 allow lists가 true라면,

   딕셔너리 타입은 아래와 같습니다:

   dictionary BasePropertyIndexedKeyframe {
       (double? or sequence<double?>)                         offset = [];
       (DOMString or sequence<DOMString>)                     easing = [];
       (CompositeOperationOrAuto or sequence<CompositeOperationOrAuto>) composite = [];
   };
   

   그 밖의 경우,

   아래 딕셔너리 타입 사용:

   dictionary BaseKeyframe {
       double?                  offset = null;
       DOMString                easing = "linear";
       CompositeOperationOrAuto composite = "auto";
   };
   

   이 절차 결과를 keyframe output으로 저장합니다.

2. 아래와 같이 animatable properties 리스트를 만듭니다:

   1. animatable properties를 구현체에서 애니메이션 가능한 속성(애니메이션 가능한 longhand 하위 속성이 있는 shorthand 포함) 이름 리스트로 만듭니다.

   2. 각 속성명을 애니메이션 속성명 → IDL 속성명 알고리즘으로 변환합니다.

3. input properties를 EnumerableOwnNames 연산에 keyframe input을 넘겨 얻습니다.

4. animation properties 리스트는 input properties와 animatable properties 모두에 포함된 속성, 또는 input properties에 포함되어 있고 <custom-property-name> 프로덕션을 만족하는 속성으로 구성합니다.

5. animation properties를 각 속성명의 Unicode 코드포인트 오름차순으로 정렬합니다.

6. 각 property name에 대해,

   1. raw value를 [[Get]] 내부 메서드에 keyframe input과 property name을 넘겨 얻습니다.

   2. raw value에 대해 완료 레코드 확인을 수행합니다.

   3. raw value를 DOMString 또는 DOMString 시퀀스 property values로 변환합니다:

      만약 allow lists가 true라면,

      property values를 ECMAScript 값 → IDL 값 변환 절차로 (DOMString or sequence<DOMString>) 타입으로 변환합니다.

      단일 DOMString이면, 그 값만 포함하는 DOMString 시퀀스로 대체합니다.

      그 밖의 경우,

      raw value를 ECMAScript 값 → DOMString 변환 절차로 변환합니다.

   4. normalized property name을 IDL 속성명 → 애니메이션 속성명 알고리즘을 property name에 적용한 결과로 합니다.

   5. keyframe output에 normalized property name 이름으로 property values를 속성값으로 추가합니다.

7. keyframe output을 반환합니다.

키프레임 인자 처리 절차는 nullable ECMAScript 객체 object를 받아 아래 절차로 키프레임 시퀀스를 반환합니다:

1. object가 null이면 빈 키프레임 시퀀스를 반환합니다.

2. processed keyframes를 빈 키프레임 시퀀스로 초기화합니다.

3. method를 GetMethod(object, @@iterator) 결과로 설정합니다.

4. method에 대해 완료 레코드 확인을 수행합니다.

5. 아래 조건 중 처음 일치하는 것에 대해 단계 수행:

   method가 undefined가 아니라면,

   1. iter를 GetIterator(object, method)로 설정합니다.

   2. iter에 대해 완료 레코드 확인을 수행합니다.

   3. 반복:

      1. next를 IteratorStep(iter)로 설정합니다.

      2. next에 대해 완료 레코드 확인을 수행합니다.

      3. next가 false이면 반복 종료.

      4. nextItem을 IteratorValue(next)로 설정합니다.

      5. nextItem에 대해 완료 레코드 확인을 수행합니다.

      6. Type(nextItem) 값이 Undefined, Null, Object가 아니면 TypeError를 throw하고 단계 중단.

      7. processed keyframes에 키프레임 유사 객체 처리 절차(nextItem, allow lists=false) 결과를 추가합니다.

   그 밖의 경우,

   1. property-indexed keyframe을 키프레임 유사 객체 처리 절차(object, allow lists=true) 결과로 설정합니다.

   2. property-indexed keyframe의 각 멤버 m에 대해:

      1. property name을 m의 키로 합니다.

      2. property name이 "composite", "easing", "offset" 중 하나면 이 루프의 남은 단계 건너뛰고 다음 멤버로 계속.

      3. property values를 m의 값으로 합니다.

      4. property keyframes를 빈 키프레임 시퀀스로 초기화합니다.

      5. 각 property values의 값 v에 대해:

         1. null 키프레임 오프셋을 가진 새 키프레임 k 생성.

         2. k에 property name → v 속성-값 쌍 추가.

         3. property keyframes에 k 추가.

      6. 키프레임 오프셋 누락 계산 절차를 property keyframes에 적용.

      7. property keyframes 내 키프레임을 processed keyframes에 추가.

   3. processed keyframes를 각 키프레임의 계산된 키프레임 오프셋 오름차순으로 정렬합니다.

   4. 인접 키프레임의 계산된 키프레임 오프셋이 같으면 병합.

   5. offsets를 property-indexed keyframe의 "offset" 멤버 타입에 따라 할당:

      sequence<double?>,

      "offset"의 값을 그대로 사용.

      double?,

      길이 1의 시퀀스에 "offset" 값을 단일 아이템으로, 즉 « offset ».

   6. offsets의 각 값을 processed keyframes에서 해당 위치 키프레임 오프셋에 할당.

   7. easings를 property-indexed keyframe의 "easing" 멤버 타입에 따라 할당:

      sequence<DOMString>,

      "easing" 값을 그대로 사용.

      DOMString,

      길이 1의 시퀀스에 "easing" 값을 단일 아이템으로, 즉 « "easing" ».

   8. easings이 빈 시퀀스면 « "linear" »를 단일 값으로 함.

   9. easings이 processed keyframes보다 아이템 수가 적으면, 앞에서부터 반복해 processed keyframes 길이만큼 채움.

      예: processed keyframes가 5이고 easings가 « "ease-in", "ease-out" »이면, « "ease-in", "ease-out", "ease-in", "ease-out", "ease-in" »로 반복됨.

   10. easings이 processed keyframes보다 길면 남는 아이템을 unused easings로 저장.

   11. easings의 각 값을 processed keyframes의 해당 위치 키프레임의 "easing" 속성에 할당.

   12. property-indexed keyframe의 "composite" 멤버가 빈 시퀀스가 아니라면:

       1. composite modes를 "composite" 멤버의 타입에 따라 CompositeOperationOrAuto 시퀀스로 할당. 단일 값이면 길이 1 시퀀스로.

       2. composite modes가 processed keyframes보다 짧으면 반복해 채움.

       3. auto가 아닌 각 값을 processed keyframes의 해당 위치 키프레임의 키프레임별 합성 연산에 할당.

6. processed keyframes이 오프셋 기준 느슨한 정렬이 아니면, TypeError를 throw하고 중단.

7. 만약 processed keyframes 내에 키프레임 중 키프레임 오프셋이 null이 아니고 0 미만이나 1 초과이면 TypeError를 throw하고 중단.

8. 각 frame에 대해:

   1. 각 속성-값 쌍을 해당 속성의 문법으로 파싱. 값이 문법에 맞지 않으면 버림. 오류 진단 지원시 사용자 에이전트는 경고를 제공해야 함.

   2. frame의 타이밍 함수를 "easing" 속성을 easing 문법으로 파싱한 결과로 설정. 파싱 실패시 TypeError throw 및 중단.

      참고: 위 두 단계 모두 CSS 파서를 사용하므로 CSS 주석/이스케이프는 허용되지만 성공 시 값에 남지 않습니다.

      참고: "easing" 속성 파싱 실패 시, TypeError는 object의 모든 속성 읽기 이후에 throw되어야 하며, 나중에 부분적으로 열린 딕셔너리가 WebIDL에서 지원될 때와 동작이 달라지지 않도록 해야 합니다.

9. unused easings의 각 값도 easing 문법으로 파싱. 실패시 TypeError throw 및 중단.

   이 단계는 아래 모든 경우에 일관적으로 TypeError를 throw하기 위해 필요합니다:

   elem.animate({ easing: 'invalid' });
   elem.animate({ easing: ['invalid'] });
   elem.animate([{ easing: 'invalid' }]);
   

6.6.4. KeyframeEffectOptions 딕셔너리

추가적인 파라미터는 KeyframeEffect(target, keyframes, options) 생성자에 KeyframeEffectOptions 객체를 제공하여 전달할 수 있습니다.

dictionary KeyframeEffectOptions : EffectTiming {
    CompositeOperation composite = "replace";
    CSSOMString?       pseudoElement = null;
};

6.7. CompositeOperation 및 CompositeOperationOrAuto 열거형

키프레임 효과의 합성 동작에 사용할 수 있는 값은 CompositeOperation 열거형으로 표현됩니다.

enum CompositeOperation { "replace", "add", "accumulate" };

replace

replace 합성 연산 값에 해당하며, 애니메이션 효과가 합성 대상 기저 값을 덮어씁니다.

add

add 합성 연산 값에 해당하며, 애니메이션 효과가 합성 대상 기저 값에 더해집니다.

accumulate

accumulate 합성 연산 값에 해당하며, 애니메이션 효과가 합성 대상 기저 값에 누적됩니다.

키프레임의 합성 동작에 사용할 수 있는 값은 CompositeOperation 열거형의 값과 추가적으로 auto 값을 포함합니다.

enum CompositeOperationOrAuto { "replace", "add", "accumulate", "auto" };

auto

연결된 키프레임 효과의 합성 연산을 사용함을 나타냅니다.

6.8. Animatable 인터페이스 믹스인

KeyframeEffect 객체의 타겟이 될 수 있는 객체는 Animatable 인터페이스 믹스인을 구현합니다.

interface mixin Animatable {
    Animation           animate(object? keyframes,
                                optional (unrestricted double or KeyframeAnimationOptions) options = {});
    sequence<Animation> getAnimations(optional GetAnimationsOptions options = {});
};

dictionary KeyframeAnimationOptions : KeyframeEffectOptions {
    DOMString id = "";
    AnimationTimeline? timeline;
};

dictionary GetAnimationsOptions {
    boolean subtree = false;
};