웹 애니메이션

1. 소개

// 애니메이션의 중간 지점으로 탐색하고 불투명도가 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. 명세 규칙

이 명세는 먼저 애니메이션 및 애니메이션 효과와 같은 추상 개념과, 이들에 속하는 재생 속도 또는 반복 지속 시간과 같은 속성을 설명한다. 이러한 속성 외에도 이러한 속성을 업데이트하는 특정 절차가 종종 존재하며, 예를 들어 재생 속도를 설정하는 절차나 애니메이션의 시작 시간을 설정하는 절차가 있다.

이 명세가 특정 절차에 명시적으로 링크하지 않는 경우, "animation의 시작 시간을 미해결 상태로 만든다"와 같이 사용자 에이전트가 속성을 업데이트하도록 요구하는 텍스트는 관련 절차를 호출하지 않고 속성을 직접 업데이트하는 것을 의미하는 것으로 이해해야 한다.

이 명세에 특화되지 않은 추가 문서 작성 규칙은 문서 규칙에 설명되어 있다.

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

이 절은 비규범적이다

개략적으로 웹 애니메이션 모델은 크게 독립적인 두 부분, 즉 타이밍 모델과 애니메이션 모델로 구성된다. 이들 부분의 역할은 다음과 같다:

타이밍 모델

한 시점을 받아 애니메이션의 단일 반복 내에서 반복 진행률이라고 하는 비례적 거리로 변환한다. 일부 애니메이션은 반복할 때마다 달라지므로 반복 인덱스도 기록된다.

애니메이션 모델

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

그래픽으로 이 흐름은 다음과 같이 나타낼 수 있다:

예를 들어 다음과 같은 애니메이션을 생각해 보자:

• 3초 후에 시작하고

• 두 번 실행되며,

• 매번 2초가 걸리고,

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

처음 세 항목은 타이밍 모델에 적용된다. 6초 시점에는 애니메이션이 두 번째 반복의 절반까지 진행되어야 한다고 계산하고 결과 0.5를 생성한다. 그런 다음 애니메이션 모델은 이 정보를 사용하여 너비를 계산한다.

이 명세는 타이밍 모델부터 시작한 다음 애니메이션 모델로 진행한다.

4. 타이밍 모델

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

4.1. 타이밍 모델 개요

이 절은 비규범적이다

웹 애니메이션 타이밍 모델은 두 가지 특성을 가진다. 무상태이며 계층적이다.

4.1.1. 무상태

웹 애니메이션 타이밍 모델은 입력 시간을 받아 출력 반복 진행률을 생성하는 방식으로 동작한다. 출력은 오직 입력 시간에만 기반하며 이전 입력과 독립적이므로, 이 모델은 무상태라고 설명할 수 있다. 이에 따라 모델은 다음 특성을 갖는다:

프레임 속도와 무관함

출력이 이전 입력과 독립적이므로 모델이 업데이트되는 속도는 진행에 영향을 주지 않는다. 입력 시간이 현실 세계 시간의 진행에 비례하는 한, 애니메이션은 이를 실행하는 장치의 성능과 관계없이 동일한 속도로 진행된다.

방향과 무관함

입력 순서는 중요하지 않으므로 모델에는 방향이 없다. 즉, 특별한 처리를 요구하지 않고 임의의 시점으로 모델을 업데이트할 수 있다.

상수 시간 탐색

각 입력은 이전 입력과 독립적이므로, 먼 미래로의 탐색 연산에서도 필요한 처리는 적어도 잠재적으로 상수 시간일 수 있다.

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

첫째, 모델의 프로그래밍 인터페이스에 정의된 여러 메서드는 애니메이션 일시 중지와 같은 재생 제어를 제공한다. 이러한 메서드는 호출된 시간을 기준으로 정의되므로 상태를 가진다. 이러한 메서드는 주로 편의를 위해 제공되며 핵심 타이밍 모델의 일부가 아니라 그 위에 계층으로 추가된다.

마찬가지로 애니메이션의 완료 동작은 애니메이션의 미디어(연관 효과) 종료 시간을 동적으로 변경할 때 변경이 발생한 시점에 따라 다른 결과가 발생할 수 있음을 의미한다. 이 동작은 다소 바람직하지 않지만 직관적이며 HTML과 일관성이 있다고 판단되었다. 따라서 이 모델은 실제로는 타이밍 속성에 동적 변경이 없는 경우에만 무상태라고 설명할 수 있다.

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

4.1.2. 계층적

타이밍 모델의 또 다른 특징은 시간이 상속된다는 것이다. 시간은 타임라인에서 시작하여 여러 단계를 거쳐 각 애니메이션 효과로 전달된다. 각 단계에서 시간은 앞뒤로 이동하거나, 배율이 적용되거나, 역전되거나, 일시 중지되거나, 반복될 수 있다.

이 명세의 이 레벨에서는 계층 구조가 얕다. 이 명세의 후속 레벨에서는 더 깊은 타이밍 계층 구조를 허용하는 그룹 효과 개념을 도입할 것이다.

4.2. 시간 값

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

시간 값은 명목상 특정 시점으로부터의 밀리초 수를 나타내는 실수이다. 시간 값과 벽시계 밀리초 사이의 관계는 값이 시간 계층 구조를 통과하는 동안 적용되는 여러 변환으로 인해 불분명해질 수 있다.

향후 스크롤 위치 또는 UI 제스처를 기반으로 하는 타임라인이 생길 수 있으며, 이 경우 시간 값과 밀리초 간의 관계는 더욱 약해질 수 있다.

예를 들어 타이밍 노드가 시간 값을 생성할 수 있는 상태가 아닌 경우, 시간 값은 미해결일 수도 있다.

4.3. 타임라인

타임라인은 동기화를 목적으로 시간 값의 소스를 제공한다.

주어진 어느 시점에서든 타임라인에는 단순히 타임라인의 현재 시간이라고 하는 하나의 현재 시간 값이 있다.

타임라인은 항상 의미 있는 시간 값을 반환할 수 있는 것은 아니며, 미해결 시간 값만 반환할 수도 있다. 예를 들어 문서의 load 이벤트 발생처럼 아직 일어나지 않은 시점을 기준으로 정의될 수 있다. 타임라인의 시간 값이 미해결인 경우 해당 타임라인은 비활성 상태로 간주된다.

타임라인은 보고된 현재 시간이 이전에 보고된 현재 시간보다 항상 크거나 같은 경우 단조 증가한다.

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

타임라인은 문서와 연결될 수 있다.

Document doc에 대해 타임스탬프 now에서 애니메이션을 업데이트하고 이벤트를 전송하도록 요청되면 다음 단계를 실행한다:

1. now를 타임스탬프로 전달하여 doc과 연결된 모든 타임라인의 현재 시간을 업데이트한다.

   타이밍 모델의 계층적 특성으로 인해 타임라인의 현재 시간을 업데이트하는 것은 다음도 포함한다:

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

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

   • 이러한 애니메이션에 대해 애니메이션 이벤트를 큐에 넣는다.

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 타임스탬프로부터의 고정 오프셋으로 계산된다. 이 고정 오프셋을 문서 타임라인의 원점 시간이라고 한다.

"원점 시간"보다 더 나은 용어가 있어야 한다— "시간 원점"과 너무 유사하다. [이슈 #2079]

연결된 문서에 대해 시간 원점이 설정되기 전에는 문서 타임라인은 비활성이다.

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

Document와 연결된 문서 타임라인은 해당 Document가 활성 문서가 아닌 경우에도 비활성으로 간주된다.

문서 타임라인 timeline에 대해 timeline time이라는 타임라인 시간을 원점 기준 시간으로 변환하려면, timeline time과 timeline의 원점 시간의 합을 반환한다. timeline이 비활성인 경우 미해결 시간 값을 반환한다.

4.3.2. 기본 문서 타임라인

각 Document에는 기본 문서 타임라인이라고 하는 문서 타임라인이 있다. 기본 문서 타임라인은 각 문서마다 고유하며, document.open() [HTML] 호출을 포함하여 문서의 전체 수명 동안 유지된다.

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

4.4. 애니메이션

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

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

애니메이션의 시작 시간은 해당 애니메이션의 연관 효과가 재생을 시작하도록 예정된 시점의 타임라인 시간 값이다. 애니메이션의 시작 시간은 처음에는 미해결이다.

애니메이션은 일시 중지와 같은 상황에서 애니메이션의 출력 시간 값, 즉 현재 시간을 고정하는 데 사용되는 보류 시간 시간 값도 유지한다. 보류 시간은 처음에는 미해결이다.

충돌하는 애니메이션의 상대적 순서를 설정하기 위해, 애니메이션은 생성되는 순서대로 전역 애니메이션 목록에 추가된다. 그러나 특정 애니메이션 클래스는 애니메이션 순서를 정하는 대체 방법을 제공할 수 있다 (§ 5.4.1 애니메이션 클래스 참조).

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

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

1. 존재하는 경우 animation의 현재 타임라인을 old timeline으로 둔다.

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의 연관 효과를 null일 수 있는 new effect로 설정하는 절차는 다음과 같다:

1. 존재하는 경우 animation의 현재 연관 효과를 old effect로 둔다.

2. new effect가 old effect와 동일한 객체이면 이 절차를 중단한다.

3. animation에 대기 중인 일시 중지 태스크가 있으면, animation이 준비됨 상태가 되는 즉시 해당 태스크가 실행되도록 다시 예약한다.

4. animation에 대기 중인 재생 태스크가 있으면, animation이 new effect를 재생할 준비됨 상태가 되는 즉시 해당 태스크가 실행되도록 다시 예약한다.

5. new effect가 null이 아니고, new effect가 다른 애니메이션 previous animation의 연관 효과인 경우, previous animation에 대해 new effect로 null을 전달하여 애니메이션의 연관 효과 설정 절차(이 절차)를 실행한다.

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를 던진다.

   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. animation의 현재 준비 Promise를 animation으로 이행한다.

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

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

애니메이션 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이 미해결이면),

   previous current time이 미해결인 경우에도 animation의 보류 시간을 previous current time으로 설정한다.

7. animation에 대기 중인 재생 태스크 또는 대기 중인 일시 중지 태스크가 있으면 해당 태스크를 취소하고, animation의 현재 준비 프로미스를 animation으로 이행한다.

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

4.4.6. 연관 효과 기다리기

다음 두 조건이 모두 참이 되는 최초의 순간에 애니메이션은 준비됨 상태이다:

• 사용자 에이전트가 모든 키프레임 효과의 첫 번째 프레임 렌더링을 포함하여 애니메이션의 연관 효과 재생을 시작하는 데 필요한 모든 설정을 완료했다.

• 애니메이션이 비활성이 아닌 타임라인과 연결되어 있다.

4.4.7. 현재 준비 프로미스

각 애니메이션에는 현재 준비 프로미스가 있다. 현재 준비 프로미스는 처음에는 애니메이션 자체를 값으로 하여 새 이행된 Promise를 생성하는 절차를 사용해 생성되고, 애니메이션의 관련 Realm에서 생성된 이행된 Promise이다.

애니메이션에 이전에 대기 중인 태스크가 없던 상태에서 대기 중인 재생 태스크 또는 대기 중인 일시 중지 태스크를 큐에 넣을 때마다, 또는 애니메이션이 취소될 때마다(참조: § 4.4.14 애니메이션 취소), 이 객체는 새로운 Promise 객체로 대체된다.

animation.pause();
animation.ready.then(function() {
  // 'running'을 표시한다
  alert(animation.playState);
});
animation.play();

4.4.8. 애니메이션 재생

플래그 auto-rewind가 주어진 경우, animation이라는 애니메이션을 재생하는 절차는 다음과 같다:

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보다 작거나 같거나,

   • 연관 효과 종료보다 크면,

   연관 효과 종료가 양의 무한대이면,

   "InvalidStateError" DOMException을 던지고 이 단계를 중단한다.

   그렇지 않으면,

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

5. 다음 세 조건이 모두 충족되면:

   • seek time이 미해결이고,

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

   • animation의 현재 시간이 미해결이면,

   seek time을 0으로 설정한다.

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

6. animation에 단조 증가하지 않는 연결된 타임라인이 있으면 has finite timeline을 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의 현재 준비 프로미스를 animation의 관련 Realm에 있는 새 프로미스로 둔다.

12. animation이 준비됨 상태가 되는 즉시 실행할 태스크를 예약한다. 태스크는 다음 단계를 수행해야 한다:

    1. animation의 시작 시간 또는 보류 시간 중 적어도 하나가 해결됨임을 단언한다.

    2. ready time을 animation이 준비됨 상태가 된 순간에 animation과 연결된 타임라인의 시간 값으로 둔다.

    3. 해당하는 것이 있는 경우 아래의 처음으로 일치하는 조건에 대응하는 단계를 수행한다:

       animation의 보류 시간이 해결됨이면,

       1. animation에 대기 중인 재생 속도를 적용한다.

       2. new start time을 animation에 대해 ready time - 보류 시간 / 재생 속도를 평가한 결과로 둔다. 재생 속도가 0이면, new start time을 단순히 ready time으로 둔다.

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

       4. animation의 재생 속도가 0이 아니면, animation의 보류 시간을 미해결로 만든다.

       animation의 시작 시간이 해결됨이고 animation에 대기 중인 재생 속도가 있으면,

       1. current time to match를 animation에 대해 (ready time - 시작 시간) × 재생 속도를 평가한 결과로 둔다.

       2. animation에 대기 중인 재생 속도를 적용한다.

       3. animation의 재생 속도가 0이면, animation의 보류 시간을 current time to match으로 둔다.

       4. new start time을 animation에 대해 ready time - current time to match / 재생 속도를 평가한 결과로 둔다. 재생 속도가 0이면, new start time을 단순히 ready time으로 둔다.

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

    4. animation의 현재 준비 프로미스를 animation으로 이행한다.

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

       위 두 단계의 순서가 중요하다는 점에 유의한다. 이 순서로 인해 길이가 0인 연관 효과를 가진 애니메이션은 현재 완료 프로미스보다 먼저 현재 준비 프로미스를 이행한다.

    위 태스크가 예약되었지만 아직 실행되지 않은 동안에는 animation에 대기 중인 재생 태스크가 있다고 설명한다. 그러나 태스크가 실행 중인 동안에는 animation에 대기 중인 재생 태스크가 없다.

    사용자 에이전트가 animation이 즉시 준비됨이라고 판단하는 경우, 다음 마이크로태스크 체크포인트에서 실행되도록 위 태스크를 마이크로태스크로 예약할 수 있지만, 태스크를 동기적으로 수행해서는 안 된다.

    위의 대기 중인 재생 태스크를 비동기적으로 실행해야 한다는 요구사항은 다음과 같은 코드가 구현 간에 일관되게 동작하도록 보장한다:

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

    위 코드에서 대기 중인 재생 태스크가 동기적으로 실행되었다면, 현재 준비 프로미스는 거부되지 않았을 것이다.

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

4.4.9. 애니메이션 일시 중지

애니메이션에 미해결 시작 시간이 있을 때마다, 그 현재 시간은 정지된다.

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

animation이라는 애니메이션을 일시 중지하는 절차는 다음과 같다:

1. animation에 대기 중인 일시 중지 태스크가 있으면 이 단계를 중단한다.

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

3. seek time을 처음에는 미해결인 시간 값으로 둔다.

4. animation에 단조 증가하지 않는 연결된 타임라인이 있으면 has finite timeline을 true로 둔다.

5. animation의 현재 시간이 미해결이면, 아래에서 처음으로 일치하는 조건에 따라 단계를 수행한다:

   animation의 재생 속도가 ≥ 0이면,

   seek time을 0으로 설정한다.

   그렇지 않으면,

   animation의 연관 효과 종료가 양의 무한대이면,

   "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의 현재 준비 프로미스를 animation의 관련 Realm에 있는 새 프로미스로 설정한다.

10. 다음 두 조건이 모두 참이 되는 최초의 가능한 순간에 실행될 태스크를 예약한다:

    • 존재하는 경우 사용자 에이전트가 animation의 연관 효과의 재생을 정지하는 데 필요한 모든 처리를 수행했다.

    • 애니메이션이 비활성이 아닌 타임라인과 연결되어 있다.

    태스크는 다음 단계를 수행해야 한다:

    1. ready time을 사용자 에이전트가 animation의 연관 효과의 재생을 정지하는 데 필요한 처리를 완료한 순간에 animation과 연결된 타임라인의 시간 값으로 둔다.

    2. animation의 시작 시간이 해결됨이고 그 보류 시간이 해결됨이 아니면, animation의 보류 시간을 (ready time - 시작 시간) × 재생 속도를 평가한 결과로 둔다.

       참고: 애니메이션이 완료됨 상태이거나 애니메이션에 대기 중인 재생 태스크가 있는 경우에는 보류 시간이 이미 설정되어 있을 수 있다. 어느 경우든 일시 중지됨 상태로 진입할 때 보류 시간을 유지하고자 한다.

    3. animation에 대기 중인 재생 속도를 적용한다.

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

    5. animation의 현재 준비 프로미스를 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을 지나 역방향으로 재생되지 않는다.

재생 범위의 자연스러운 경계에 도달한 애니메이션을 완료됨 상태라고 한다.

그래픽으로 현재 시간을 제한하는 효과는 아래와 같이 나타난다.

그러나 애니메이션의 현재 시간을 연관 효과의 끝을 지난 시간으로 탐색할 수 있다. 그렇게 하면 현재 시간은 진행하지 않지만 애니메이션은 탐색된 시간에서 일시 중지된 것처럼 동작한다.

예를 들어 이를 통해 연관 효과가 없는 애니메이션의 현재 시간을 5s로 탐색할 수 있다. 나중에 종료 시간이 5s보다 늦은 종료 시간을 가진 연관 효과가 해당 애니메이션과 연결되면, 재생은 5s 지점에서 시작된다.

애니메이션의 연관 효과 길이가 변경될 때에도 위 시나리오와 유사한 동작이 발생할 수 있다.

마찬가지로 재생 속도가 음수이면, 현재 시간은 시간 0을 지나 진행하지 않는다.

4.4.11. 현재 완료 프로미스

각 애니메이션에는 현재 완료 프로미스가 있다. 현재 완료 프로미스는 처음에는 대기 중인 Promise 객체이다.

애니메이션이 완료 재생 상태를 벗어날 때마다 이 객체는 새로운 프로미스로 대체된다.

4.4.12. 완료 상태 업데이트

양의 재생 속도를 가진 애니메이션의 경우, 현재 시간은 연관 효과 종료에 도달할 때까지 계속 증가한다.

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

음의 재생 속도를 가진 애니메이션의 경우, 현재 시간은 0에 도달할 때까지 계속 감소한다.

이 경계에 도달했거나 넘어섰으며 해결됨 시작 시간을 가진 실행 중인 애니메이션을 완료됨 상태라고 한다.

이 경계를 넘었는지는 애니메이션 객체를 수정할 때마다 아래에 정의된 애니메이션의 완료 상태 업데이트 절차를 사용하여 확인한다. 이 절차는 애니메이션을 업데이트하고 이벤트를 전송하는 절차의 일부로도 실행된다. 두 경우 모두 아래에 정의된 did seek 플래그는 false로 설정된다.

각 애니메이션에 대해 사용자 에이전트는 처음에는 미해결인 이전 현재 시간 시간 값을 유지한다.

일반적인 재생 중에는 애니메이션의 현재 시간이 위에서 설명한 경계로 제한되지만, 애니메이션의 현재 시간을 설정하는 절차를 사용하여 애니메이션의 현재 시간을 해당 경계 밖의 시간으로 탐색할 수 있다.

did seek 플래그(현재 시간을 설정한 후 업데이트가 수행되는지를 나타냄)와 synchronously notify 플래그(업데이트가 완료 이벤트 큐잉과 완료 프로미스 이행이 발생한다면 즉시 발생할 것으로 예상하는 컨텍스트에서 호출되었음을 나타냄)가 주어진 경우, animation에 대해 애니메이션의 완료 상태를 업데이트하는 절차는 다음과 같다:

1. did seek가 false이면, 보류 시간을 미해결 시간 값으로 대체하여 현재 시간을 계산한 결과를 unconstrained current time으로 둔다. did seek가 true이면, unconstrained current time은 현재 시간과 같다.

   참고: 이는 방향이 변경될 수 있는 타임라인을 수용하기 위해 필요하다. 이 정의가 없으면 한 번 완료된 애니메이션은 타임라인이 반대 방향으로 진행하더라도 완료된 상태로 남게 된다.

2. 다음 세 조건 모두가 참이면,

   • unconstrained current time이 해결됨이고, 또한

   • animation의 시작 시간이 해결됨이고, 또한

   • 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. animation의 재생 상태가 완료됨이면 current finished state을 true로 둔다. 그렇지 않으면 false로 둔다.

5. current finished state이 true이고 현재 완료 프로미스가 아직 이행되지 않았으면 다음 단계를 수행한다:

   1. 완료 알림 단계가 다음 절차를 참조하도록 둔다:

      1. animation의 재생 상태가 완료됨과 같지 않으면 이 단계를 중단한다.

      2. animation의 현재 완료 프로미스 객체를 animation으로 이행한다.

      3. AnimationPlaybackEvent finishEvent를 생성한다.

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

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

      6. finishEvent의 timelineTime 속성을 animation과 연결된 타임라인의 현재 시간으로 설정한다. animation이 타임라인과 연결되어 있지 않거나 타임라인이 비활성이면, timelineTime을 null로 둔다.

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

         그렇지 않으면, animation에서 finishEvent를 디스패치하도록 태스크를 큐에 넣는다. 이 태스크의 태스크 소스는 DOM 조작 태스크 소스이다.

   2. synchronously notify가 true이면, 이 animation에 대해 완료 알림 단계를 실행하도록 큐에 넣어진 모든 마이크로태스크를 취소하고, 완료 알림 단계를 즉시 실행한다.

      그렇지 않고 synchronously notify가 false이면, animation에 대해 해당 단계를 실행하도록 이미 큐에 넣어진 마이크로태스크가 없는 경우에만 animation에 대해 완료 알림 단계를 실행하도록 마이크로태스크를 큐에 넣는다.

6. current finished state이 false이고 animation의 현재 완료 프로미스가 이미 이행되었으면, animation의 현재 완료 프로미스를 animation의 관련 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 이벤트가 즉시 큐에 들어가고 완료 프로미스가
                    // 다음 문이 애니메이션을 완료 상태에서 벗어나게 함에도
                    // 이행된다
animation.currentTime = 0;

4.4.13. 애니메이션 완료

아래에 정의된 animation에 대한 애니메이션을 완료하는 절차를 사용하여 애니메이션을 현재 재생 방향의 자연스러운 끝까지 진행시킬 수 있다:

1. animation의 유효 재생 속도가 0이거나, animation의 유효 재생 속도 > 0이고 연관 효과 종료가 무한대이면, "InvalidStateError" DOMException을 던지고 이 단계를 중단한다.

2. animation에 대기 중인 재생 속도를 적용한다.

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

   재생 속도 > 0이면,

   limit을 연관 효과 종료로 둔다.

   그렇지 않으면,

   limit을 0으로 둔다.

4. 현재 시간을 limit으로 조용히 설정한다.

5. animation의 시작 시간이 미해결이고 animation에 연결된 활성 타임라인이 있으면, 시작 시간을 timeline time - (limit / 재생 속도)를 평가한 결과로 둔다. 여기서 timeline time은 연결된 타임라인의 현재 시간 값이다.

6. 대기 중인 일시 중지 태스크가 있고 시작 시간이 해결됨이면,

   1. 보류 시간을 미해결로 둔다.

      일반적으로 애니메이션이 이전에 유휴 상태였던 경우를 제외하면 보류 시간은 이미 미해결일 것이다.

   2. 대기 중인 일시 중지 태스크를 취소한다.

   3. animation의 현재 준비 프로미스를 animation으로 이행한다.

7. 대기 중인 재생 태스크가 있고 시작 시간이 해결됨이면, 해당 태스크를 취소하고 animation의 현재 준비 프로미스를 animation으로 이행한다.

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

4.4.14. 애니메이션 취소

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

animation에 대해 애니메이션을 취소하는 절차는 다음과 같다:

1. animation의 재생 상태가 유휴가 아니면, 다음 단계를 수행한다:

   1. animation에 대해 애니메이션의 대기 중인 태스크 재설정 절차를 실행한다.

   2. 현재 완료 프로미스를 "AbortError"라는 이름의 DOMException으로 거부한다.

   3. 현재 완료 프로미스의 [[PromiseIsHandled]] 내부 슬롯을 true로 설정한다.

   4. 현재 완료 프로미스를 animation의 관련 Realm에 있는 새 프로미스로 둔다.

   5. AnimationPlaybackEvent, cancelEvent를 생성한다.

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

   7. cancelEvent의 currentTime을 null로 설정한다.

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

   9. cancelEvent의 timelineTime을 timeline time으로 설정한다. timeline time이 미해결이면, 이를 null로 설정한다.

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

       그렇지 않으면 animation에서 cancelEvent를 디스패치하도록 태스크를 큐에 넣는다. 이 태스크의 태스크 소스는 DOM 조작 태스크 소스이다.

2. animation의 보류 시간을 미해결로 만든다.

3. animation의 시작 시간을 미해결로 만든다.

animation에 대해 애니메이션의 대기 중인 태스크를 재설정하는 절차는 다음과 같다:

1. animation에 대기 중인 재생 태스크 또는 대기 중인 일시 중지 태스크가 없으면, 이 절차를 중단한다.

2. animation에 대기 중인 재생 태스크가 있으면 해당 태스크를 취소한다.

3. animation에 대기 중인 일시 중지 태스크가 있으면 해당 태스크를 취소한다.

4. animation에 대기 중인 재생 속도를 적용한다.

5. animation의 현재 준비 프로미스를 "AbortError"라는 이름의 DOMException으로 거부한다.

6. animation의 현재 준비 프로미스의 [[PromiseIsHandled]] 내부 슬롯을 true로 설정한다.

7. animation의 현재 준비 프로미스를 animation의 관련 Realm에서 값 animation으로 새 이행된 Promise 객체를 생성한 결과로 둔다.

4.4.15. 속도 제어

애니메이션에는 연관된 타임라인의 시간 값의 변화율에서 애니메이션의 현재 시간으로의 배율 계수를 제공하는 재생 속도가 있다. 재생 속도는 처음에는 1이다.

애니메이션의 재생 속도를 0으로 설정하면 실질적으로 애니메이션이 일시 중지된다(그러나 재생 상태가 반드시 일시 중지됨이 되는 것은 아니다).

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

애니메이션 animation의 재생 속도를 설정하여 new playback rate으로 만드는 절차는 다음과 같다:

1. animation의 모든 대기 중인 재생 속도를 지운다.

2. previous time을 재생 속도를 변경하기 전 animation의 현재 시간 값으로 둔다.

3. previous playback rate를 animation의 현재 유효 재생 속도로 둔다.

4. 재생 속도를 new playback rate으로 설정한다.

5. 해당하는 것이 있는 경우 다음 조건 중 처음으로 일치하는 조건에 대응하는 단계를 수행한다:

   animation이 단조 증가하는 타임라인과 연결되어 있고 previous time이 해결됨이면,

   animation의 현재 시간을 설정하여 previous time으로 만든다.

   animation이 null이 아닌 타임라인과 연결되어 있고 그 타임라인이 단조 증가하지 않으며, animation의 시작 시간이 해결됨이고, 연관 효과 종료가 무한대가 아니며, 다음 중 하나이면:

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

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

   animation의 시작 시간을 animation에 대해 연관 효과 종료 - 시작 시간을 평가한 결과로 설정한다.

   참고: 이는 비단조 타임라인에서 애니메이션의 시작/종료 시간을 효과적으로 뒤집어, 다른 방향에서 시작 시간의 상대적 오프셋을 유지한다.

4.4.15.2. 애니메이션의 재생 속도를 매끄럽게 업데이트하기

다른 프로세스나 스레드에서 실행 중인 애니메이션의 경우, 애니메이션을 실행하는 프로세스나 스레드가 현재 업데이트를 수행하는 프로세스나 스레드와 동기화되어 있지 않다면 재생 속도를 설정하는 절차로 인해 애니메이션이 점프할 수 있다.

애니메이션의 재생 속도를 매끄럽게 변경하기 위해, 애니메이션에는 필요한 동기화가 이루어진 후 적용할 재생 속도를 정의하는 대기 중인 재생 속도가 있을 수 있다 (다른 스레드나 프로세스에서 실행되는 애니메이션의 경우).

처음에는 애니메이션의 대기 중인 재생 속도가 설정되어 있지 않다.

animation의 유효 재생 속도는 설정되어 있다면 그 대기 중인 재생 속도이고, 그렇지 않으면 애니메이션의 재생 속도이다.

애니메이션 animation에 대기 중인 재생 속도를 적용하려면 다음 단계를 수행한다:

1. animation에 대기 중인 재생 속도가 없으면 이 단계를 중단한다.

2. animation의 재생 속도를 그 대기 중인 재생 속도로 설정한다.

3. animation의 대기 중인 재생 속도를 지운다.

애니메이션 animation의 현재 시간을 유지하면서 재생 속도를 new playback rate으로 매끄럽게 업데이트하는 절차는 다음과 같다:

1. previous play state를 animation의 재생 상태로 둔다.

   참고: animation의 유효 재생 속도를 업데이트하기 전에 재생 상태를 기록할 필요가 있다. 이는 다음 로직에서, animation이 대기 중인 재생 속도를 적용한 뒤에도 완료된 상태인지 여부와 관계없이 현재 완료됨 상태이면 animation의 대기 중인 재생 속도를 즉시 적용하고자 하기 때문이다. 대기 중인 재생 속도를 적용한 후에도 완료된 상태인지 여부와는 관계없다.

2. animation의 대기 중인 재생 속도를 new playback rate으로 둔다.

3. 아래에서 처음으로 일치하는 조건에 대응하는 단계를 수행한다:

   animation에 대기 중인 재생 태스크 또는 대기 중인 일시 중지 태스크가 있으면,

   이 단계를 중단한다.

   참고: 서로 다른 유형의 대기 중인 태스크는 실행될 때 대기 중인 재생 속도를 적용하므로 이 경우에는 추가 작업이 필요하지 않다.

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

   animation에 대기 중인 재생 속도를 적용한다.

   참고: 위의 두 번째 조건은 현재 시간이 미해결이고 대기 중인 재생 태스크가 없는 실행 중 애니메이션이 있는 경우 아래에서 이를 재생하려고 시도하지 않도록 하기 위해 필요하다.

   previous play state가 완료됨이면,

   1. animation의 보류 시간을 미해결 시간 값으로 대체하여 animation의 현재 시간을 계산한 결과를 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과 연결된 타임라인이 없거나, 연결된 타임라인이 비활성이면 "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은 각각 animation의 재생 속도와 시작 시간이다).

타임라인 timeline의 시간 값과 동일한 척도로 표현되는 시간 값 time에 대해 타임라인 시간을 원점 기준 시간으로 변환하려면 다음 단계를 수행한다:

1. timeline time을 time을 애니메이션 시간에서 타임라인 시간으로 변환한 결과로 둔다.

2. timeline time이 미해결이면, time을 반환한다.

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

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

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

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

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

애니메이션은 재생되면서 애니메이션 재생 이벤트를 통해 상태 변경을 보고한다.

애니메이션 재생 이벤트는 타이밍 모델의 속성이다. 따라서 애니메이션의 연관 효과가 없거나 관찰 가능한 결과가 없는 경우에도 디스패치된다.

4.4.18.3. 애니메이션 재생 이벤트의 유형

finish

애니메이션이 완료 재생 상태에 들어갈 때마다 큐에 넣어진다.

cancel

애니메이션이 다른 상태에서 유휴 재생 상태로 들어갈 때마다 큐에 넣어진다. 처음부터 유휴 상태인 새 애니메이션을 생성하는 것은 새 cancel 이벤트를 생성하지 않는다.

remove

애니메이션이 자동으로 제거될 때마다 큐에 넣어진다. § 5.5 애니메이션 대체를 참조한다.

4.5. 애니메이션 효과

애니메이션 효과는 타이밍 계층 구조의 항목을 가리키는 추상 용어이다.

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

설정된 경우 애니메이션의 연관 효과는 애니메이션 효과의 한 유형이다. 애니메이션의 연관 효과는 해당 애니메이션과 연결되어 있다고 한다. 주어진 시점에서 애니메이션 효과는 최대 하나의 애니메이션과만 연결될 수 있다.

애니메이션 효과 effect가 timeline과 연결된 애니메이션과 연결되어 있다면, effect는 타임라인 timeline과 연결되어 있다.

4.5.2. 애니메이션 효과의 유형

이 명세는 한 가지 유형의 애니메이션 효과, 즉 키프레임 효과를 정의한다. 이 명세의 후속 레벨에서는 추가 유형의 애니메이션 효과를 정의할 것이다.

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

4.5.3. 활성 구간

애니메이션 효과가 실행되도록 예정된 기간을 그 활성 구간이라고 한다. 각 애니메이션 효과에는 이러한 구간이 하나만 있다.

활성 구간의 하한은 일반적으로 이 애니메이션 효과와 연결된 애니메이션의 시작 시간에 해당하지만, 애니메이션 효과의 시작 지연에 의해 이동될 수 있다.

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

시작 시간, 시작 지연, 활성 지속 시간 사이의 관계는 아래에 나타나 있다.

종료 지연도 지정할 수 있지만, 주로 애니메이션의 순서를 지정할 때만 유용하다.

애니메이션 효과는 효과가 그 효과를 생성하도록 예정된 기간인 활성 구간을 정의한다. 단, 활성 구간 밖에서 적용되는 채우기 모드는 예외이다.

활성 구간의 하한은 시작 지연에 의해 정의된다.

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

활성 구간의 길이를 활성 지속 시간이라고 하며, 그 계산은 § 4.8.2 활성 지속 시간 계산에 정의되어 있다.

시작 지연과 마찬가지로, 애니메이션 효과에는 주로 다른 애니메이션 효과의 종료 시간을 기준으로 애니메이션의 순서를 지정할 때 사용하는 종료 지연도 있다. 이는 일반적으로 이 명세의 후속 레벨에서 도입되는 시퀀스 효과와 함께 사용할 때만 유용하지만, SVG의 min 속성을 표현하기 위해 여기에 포함되어 있다([SVG11], 제19장).

애니메이션 효과의 종료 시간은 max(시작 지연 + 활성 지속 시간 + 종료 지연, 0)을 평가한 결과이다.

4.5.4. 로컬 시간

주어진 시점에서 애니메이션 효과의 로컬 시간은 다음 중 처음으로 일치하는 조건을 기반으로 한다:

4.5.5. 애니메이션 효과 단계 및 상태

이 절은 비규범적이다

주어진 시점에서 애니메이션 효과는 가능한 세 가지 단계 중 하나에 있을 수 있다. 애니메이션 효과의 로컬 시간이 미해결이면 어떤 단계에도 속하지 않는다.

서로 다른 단계는 아래에 나타나 있다.

단계는 다음과 같다:

이전 단계

애니메이션 효과의 로컬 시간이 효과의 활성 구간과 종료 시간보다 앞에 있거나, 또는 음의 시작 지연이 적용되는 범위 중에 발생한다.

활성 단계

애니메이션 효과의 로컬 시간이 효과의 활성 구간 안에 있고, 음의 시작 지연 또는 음의 종료 지연 범위 밖에 있다.

이후 단계

애니메이션 효과의 로컬 시간이 효과의 활성 구간 뒤에 있거나, 음의 종료 지연으로 인해 종료 시간이 먼저 오는 경우 그 뒤에 있지만, 음의 시작 지연이 적용되는 범위 중에는 아니다.

이러한 단계 외에도 애니메이션 효과는 서로 겹칠 수 있는 여러 상태 중 하나에 있다고 설명할 수도 있다. 이러한 상태는 하나의 애니메이션 프레임 동안에만 설정되며, 주로 모델의 상태적 부분을 설명하기 위한 편의 수단이다.

이러한 상태와 모델 내에서의 용도는 다음과 같이 요약된다:

재생 중

활성 시간이 각 프레임마다 변경되는 애니메이션 효과에 해당한다.

현재

재생 중이거나, 해당 애니메이션의 현재 재생 속도를 기반으로 향후 재생 중이 될 수 있는 애니메이션 효과에 해당한다.

효과 적용 중

해결된 활성 시간을 가진 애니메이션 효과에 해당한다. 이는 애니메이션 효과가 활성 단계에 있거나, 활성 단계 밖에 있지만 효과의 채우기 모드(§ 4.6 채우기 동작 참조)로 인해 활성 시간이 해결되는 시점에 발생한다. 효과 적용 중인 애니메이션 효과만 대상에 결과를 적용한다.

이러한 각 상태의 규범적 정의는 다음과 같다.

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

애니메이션 방향

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

활성 이전 경계 시간

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

활성 이후 경계 시간

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

애니메이션 효과의 로컬 시간이 미해결이 아니고 다음 조건 중 하나가 충족되면 해당 애니메이션 효과는 이전 단계에 있다:

1. 로컬 시간이 활성 이전 경계 시간보다 작거나, 또는

2. 애니메이션 방향이 "backwards"이고 로컬 시간이 활성 이전 경계 시간과 같다.

애니메이션 효과의 로컬 시간이 미해결이 아니고 다음 조건 중 하나가 충족되면 해당 애니메이션 효과는 이후 단계에 있다:

1. 로컬 시간이 활성 이후 경계 시간보다 크거나, 또는

2. 애니메이션 방향이 "forwards"이고 로컬 시간이 활성 이후 경계 시간과 같다.

애니메이션 효과의 로컬 시간이 미해결이 아니며, 이전 단계에도 이후 단계에도 속하지 않으면 해당 애니메이션 효과는 활성 단계에 있다.

또한 애니메이션 효과가 위의 어느 단계에도 속하지 않는 경우를 유휴 단계에 있다고 표현하면 편리한 경우가 많다.

애니메이션 효과는 다음 조건이 모두 충족되면 재생 중이다:

1. 애니메이션 효과가 활성 단계에 있고, 또한

2. 애니메이션 효과가 완료됨이 아닌 애니메이션과 연결되어 있다.

애니메이션 효과는 다음 조건 중 하나라도 참이면 현재이다:

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

• 애니메이션 효과가 재생 속도 > 0인 애니메이션과 연결되어 있고 애니메이션 효과가 이전 단계에 있거나,

• 애니메이션 효과가 재생 속도 < 0인 애니메이션과 연결되어 있고 애니메이션 효과가 이후 단계에 있거나,

• 애니메이션 효과가 유휴 재생 상태가 아닌 애니메이션과 연결되어 있고, 연결된 null이 아닌 타임라인이 단조 증가하지 않는다.

애니메이션 효과는 § 4.8.3.1 활성 시간 계산의 절차에 따라 계산된 활성 시간이 미해결이 아니면 효과 적용 중이다.

4.5.6. 관련 애니메이션

애니메이션과 연결된 애니메이션 효과를 기반으로 해당 애니메이션이 관련됨이라고 정의할 수 있다.

애니메이션은 다음과 같은 경우 관련됨이다:

• 그 연관 효과가 현재 또는 효과 적용 중이고, 또한

• 그 대체 상태가 제거됨이 아니다.

4.6. 채우기 동작

애니메이션 효과가 재생 중이 아닐 때의 효과는 그 채우기 모드에 의해 결정된다.

가능한 채우기 모드는 다음과 같다:

• none,

• forwards,

• backwards, 그리고

• both.

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

// 다음 애니메이션이 완료된 후 첫 번째 프레임에서 콜백은
// `finished` 프로미스에 대해 스타일이 업데이트되기 전에 실행되므로
// 깜박이지 않는다.
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

애니메이션 효과가 이후 단계에 있을 때, 애니메이션 효과는 재생 중이 되도록 예정된 마지막 순간과 동일한 반복 진행률 값을 생성한다.

애니메이션 효과가 재생 중이 아닌 다른 모든 시간에는 효과가 없다.

backwards

애니메이션 효과가 이전 단계에 있을 때, 애니메이션 효과는 재생 중이 되도록 예정된 가장 이른 순간과 동일한 반복 진행률 값을 생성한다.

애니메이션 효과가 재생 중이 아닌 다른 모든 시간에는 효과가 없다.

both

애니메이션 효과가 이전 단계에 있을 때는 backwards 채우기 동작을 사용한다.

애니메이션 효과가 이후 단계에 있을 때는 forwards 채우기 동작을 사용한다.

이러한 채우기 모드의 몇 가지 예는 아래에 나타나 있다.

참고: 채우기 모드를 설정하는 것은 활성 구간의 끝점이나 단계 사이의 경계에는 영향을 주지 않는다. 그러나 채우기 모드는 타이밍 모델의 여러 다른 속성에는 영향을 준다. 애니메이션 효과의 활성 시간은 활성 단계 안에 있거나 또는 채우기가 적용될 때만 정의되기 때문이다(즉, 미해결이 아니다).

4.7. 반복

4.7.1. 반복 구간

애니메이션 효과가 고정된 횟수 또는 무기한 반복하도록 지정할 수 있다. 이러한 반복은 활성 구간 내에서 발생한다. 한 번의 반복이 이루어지는 시간 범위를 반복 구간이라고 한다.

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

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

이 절은 비규범적이다

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

반복 지속 시간

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

활성 지속 시간

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

반복 지속 시간과 활성 지속 시간 사이의 관계는 아래에 나타나 있다.

4.7.2. 반복 제어

애니메이션 효과가 반복되는 횟수를 그 반복 횟수라고 한다. 반복 횟수는 0보다 크거나 같은 실수이다. 반복 횟수는 애니메이션 효과가 무기한 반복됨을 나타내기 위해 양의 무한대일 수도 있다.

반복 횟수 외에도 애니메이션 효과에는 반복 시퀀스에서 애니메이션 효과가 시작해야 하는 오프셋을 지정하는 반복 시작 속성도 있다. 반복 시작은 0보다 크거나 같은 유한 실수이다.

이러한 매개변수의 동작은 § 4.8 핵심 애니메이션 효과 계산의 계산에 정의되어 있다.

이 절은 비규범적이다

반복 횟수와 반복 시작 매개변수의 효과는 아래에 나타나 있다.

반복 횟수 매개변수와 달리, 반복 시작 매개변수는 활성 지속 시간의 길이에 영향을 주지 않는다.

반복 시작 값이 1보다 크거나 같은 경우는 일반적으로 반복 합성 연산이 accumulate인 애니메이션 효과와 함께 사용하는 경우를 제외하면 유용하지 않다는 점에 유의한다.

4.7.3. 반복 시간 공간

이 절은 비규범적이다

웹 애니메이션에서 모든 시간은 어떤 기준점을 기준으로 한다. 이러한 서로 다른 기준점은 서로 다른 시간 공간을 생성한다.

이는 컴퓨터 그래픽에서 사용하는 좌표 공간과 비교할 수 있다. 시간 공간의 0 시간은 좌표 공간의 원점과 유사하다.

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

반복 시간 공간은 0 시간이 애니메이션 효과의 현재 반복 시작인 시간 공간이다.

웹 애니메이션 모델에서는 활성 구간의 시작을 기준으로 하는 시간인 활성 시간도 참조한다. 그러나 이 시간 공간은 모델 내부에 있으며 프로그래밍 인터페이스나 마크업에는 노출되지 않는다.

이러한 시간 공간은 아래에 나타나 있다.

참고: 시간 공간 자체에는 경계가 없지만, 웹 애니메이션은 활성 시간과 반복 진행률이 그림에 표시된 것처럼 일정 범위로 제한되도록 정의한다. 예를 들어 -1초라는 시간은 활성 시간 공간에서 유효한 시간이지만, § 4.8.3.1 활성 시간 계산에 정의된 활성 시간 계산 절차는 음수 값을 반환하지 않는다.

이러한 시간 공간 외에도 현재 전역 객체의 Document의 기본 문서 타임라인의 시간 값의 시간 공간인 문서 시간 공간도 참조할 수 있다.

4.7.4. 구간 타이밍

이 절은 비규범적이다

애니메이션 효과가 반복될 때는 반복 경계에서의 동작을 정의해야 한다. 이를 위해, 그리고 실제로 모든 구간 타이밍에 대해 웹 애니메이션은 끝점 제외 타이밍 모델을 사용한다. 이는 구간의 시작 시간은 구간에 포함되지만 종료 시간은 포함되지 않음을 의미한다. 구간 표기법으로는 [begin, end)로 쓸 수 있다. 이 모델은 구간 사이에 겹침이 없으므로 구간을 반복하고 순서대로 배치할 때 합리적인 동작을 제공한다.

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

이 동작의 한 가지 예외는 채우기를 수행할 때 채우기가 구간 끝점에서 시작되면 해당 끝점이 사용된다는 것이다. 이 동작은 § 4.8.3.3 단순 반복 진행률 계산에 제시된 알고리즘에서 자연스럽게 도출되며 아래에 나타나 있다.

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

4.8.1. 개요

이 절은 비규범적이다

웹 애니메이션 타이밍 모델의 핵심에는 로컬 시간 값을 받아 반복 진행률로 변환하는 과정이 있다.

이 과정의 첫 번째 단계는 활성 지속 시간에 의해 결정되는 활성 구간의 경계를 계산하는 것이다.

이 과정은 아래에 나타나 있다.

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

활성 지속 시간을 설정한 후, 애니메이션 효과의 로컬 시간을 그 변환된 진행률(반복 진행률)로 변환하는 과정은 아래에 나타나 있다.

첫 번째 단계인 로컬 시간 계산은 § 4.5.4 로컬 시간에 설명되어 있다. 그림의 2단계부터 4단계까지는 다음 절에 설명되어 있다. 5단계와 6단계는 각각 § 4.9.1 방향이 적용된 진행률 계산과 § 4.10.1 변환된 진행률 계산에 설명되어 있다.

4.8.2. 활성 지속 시간 계산

활성 지속 시간은 다음과 같이 계산된다:

활성 지속 시간 = iteration duration × iteration count

반복 지속 시간 또는 반복 횟수 중 하나가 0이면, 활성 지속 시간은 0이다.

IEEE 754-2008에 따르면 무한대에 0을 곱한 결과가 정의되지 않으므로 이러한 명확화가 필요하다.

4.8.3. 로컬 시간 변환

4.8.3.1. 활성 시간 계산

활성 시간은 로컬 시간과 시작 지연을 기반으로 한다. 그러나 애니메이션 효과가 출력을 생성해야 할 때만 정의되므로, 다음과 같이 그 채우기 모드와 단계에 따라 달라진다.

4.8.3.2. 전체 진행률 계산

전체 진행률은 완료된 반복 횟수(부분 반복 포함)를 나타내며 다음과 같이 정의된다:

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

2. 아래에서 처음으로 일치하는 조건을 기반으로 overall progress의 초기 값을 계산한다.

   반복 지속 시간이 0이면,

   애니메이션 효과가 이전 단계에 있으면 overall progress를 0으로 두고, 그렇지 않으면 반복 횟수와 같게 둔다.

   그렇지 않으면,

   overall progress를 다음을 계산한 결과로 둔다: active time / iteration duration.

3. 다음을 계산한 결과를 반환한다: overall progress + iteration start.

4.8.3.3. 단순 반복 진행률 계산

단순 반복 진행률은 재생 방향 또는 효과에 적용되는 타이밍 함수가 시간에 도입하는 변환을 무시한 현재 반복 진행의 비율이며, 다음과 같이 계산된다:

1. 전체 진행률이 미해결이면 미해결을 반환한다.

2. 전체 진행률이 무한대이면 simple iteration progress를 iteration start % 1.0으로 두고, 그렇지 않으면 simple iteration progress를 overall progress % 1.0으로 둔다.

3. 다음 조건이 모두 참이면,

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

   • 애니메이션 효과가 활성 단계 또는 이후 단계에 있으며, 또한

   • 활성 시간이 활성 지속 시간과 같고, 또한

   • 반복 횟수가 0과 같지 않다.

   simple iteration progress를 1.0으로 둔다.

   위 단계는 애니메이션의 활성 구간이 반복의 끝에서 정확히 끝날 때 다음 반복의 시작이 아니라 마지막 반복의 끝점을 유지하여 채우기를 수행하는 동작을 구현한다.

   마지막 조건은 반복 횟수가 0이어서 처음부터 애니메이션의 반복을 전혀 재생하지 않은 경우에는 이 동작이 적용되지 않도록 한다.

4. simple iteration progress를 반환한다.

4.8.4. 현재 반복 계산

현재 반복은 다음 단계를 사용하여 계산할 수 있다:

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

2. 애니메이션 효과가 이후 단계에 있고 반복 횟수가 무한대이면 무한대를 반환한다.

3. 단순 반복 진행률이 1.0이면 다음을 반환한다: floor(overall progress) - 1.

4. 그렇지 않으면 다음을 반환한다: floor(overall progress).

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로 두고, 그렇지 않으면 current direction을 reverse로 둔다. d가 무한대이면 current direction을 forwards로 둔다.

3. current direction이 forwards이면 단순 반복 진행률을 반환한다.

   그렇지 않으면 1.0 - simple iteration progress를 반환한다.

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. 애니메이션 효과가 이전 단계에 있고 going forwards가 true이거나, 애니메이션 효과가 이후 단계에 있고 going forwards가 false이면 before flag가 설정된다.

3. 방향이 적용된 진행률을 입력 진행률 값으로, before flag를 before 플래그로 전달하여 애니메이션 효과의 타이밍 함수를 평가한 결과를 반환한다.

4.11. 반복 진행률

애니메이션 효과의 반복 진행률은 단순히 그 변환된 진행률이다.

5. 애니메이션 모델

5.1. 소개

애니메이션 효과에는 타이밍 출력의 변경에 응답하여 영향을 미치는 0개 이상의 연결된 속성이 있다. 이러한 속성을 효과의 대상 속성이라고 한다.

반복 진행률, 현재 반복, 기저 값이 주어지면, 애니메이션 효과는 해당 속성에 적합한 애니메이션 유형의 절차를 적용하여 각 애니메이션 가능 대상 속성에 대해 효과 값을 생성한다.

5.2. 속성 애니메이션

달리 명시되지 않는 한 모든 CSS 속성은 애니메이션 가능이다. 속성 값이 결합되는 방식은 각 속성의 속성 정의 표에 있는 애니메이션 유형 행에 정의되어 있다:

애니메이션 불가

해당 속성은 애니메이션할 수 없다. 애니메이션 키프레임에 나열되어 있어도 처리되지 않으며, 전환의 영향도 받지 않는다.

참고: 속성을 애니메이션하면 과도한 복잡성이 발생하는 경우 일반적으로 애니메이션에서 제외된다. 예를 들어 애니메이션 매개변수를 정의하는 속성을 애니메이션하면 복잡한 재귀적 동작이 발생하므로 애니메이션 불가이다.

참고: 애니메이션 불가인 속성만 대상으로 하는 애니메이션 효과도 이벤트 발생 및 애니메이션의 현재 완료 프로미스 이행 지연과 같은 일반적인 애니메이션 효과의 동작은 여전히 나타낸다.

이산

속성의 값은 의미 있게 결합할 수 없으므로, 가산적이지 않으며, 보간은 50%(p=0.5)에서 V_a에서 V_b로 전환한다. 즉,

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

계산된 값에 따라

계산된 값의 대응하는 개별 구성 요소는 해당 값 유형에 지정된 절차를 사용하여 결합(보간, 덧셈 또는 누적)된다 (CSS Values 4 § 3 값 결합: 보간, 덧셈 및 누적 참조). 구성 요소의 수나 대응하는 구성 요소의 유형이 일치하지 않거나, 어떤 구성 요소 값이 이산 애니메이션을 사용하고 대응하는 두 값이 일치하지 않으면, 속성 값은 이산 방식으로 결합된다.

반복 가능 목록

계산된 값에 따라와 동일하지만, 두 목록의 항목 수가 서로 다르면 먼저 항목 수의 최소공배수까지 반복한다. 그런 다음 각 항목을 계산된 값에 따라 결합한다. 값 쌍을 결합할 수 없거나 어떤 구성 요소 값이 이산 애니메이션을 사용하면, 속성 값은 이산 방식으로 결합된다.

참고: 반복 가능 목록 개념은 개념적으로 특정 길이까지 반복되는 목록 (예: background-origin이 background-image 목록의 길이만큼 반복되는 경우) 또는 무한히 반복되는 목록이 어떤 값 사이에서도 부드럽게 전환되고, 계산된 값이 결과를 올바르게 나타내도록 (그리고 잠재적으로 올바르게 상속되도록) 보장한다.

(본문 참조)

일부 속성에는 위의 경우에 포함되지 않는 특정 보간 동작이 있으며, 이 경우 해당 속성의 애니메이션 동작은 명시적으로 지정된다.

아직 속성 정의에 애니메이션 유형 행이 포함되지 않은 속성의 애니메이션 유형은 부록 A: 기존 속성의 애니메이션 유형에 정의되어 있다.

5.2.1. 사용자 지정 속성

사용자 지정 속성 중 현재 전역 객체에 대해 registerProperty() 메서드를 사용하여 등록된 경우, 애니메이션 유형은 계산된 값에 따라이며, 속성의 구문 정의에 사용된 유형에서 파생된다. 속성에 지정된 구문에 대응하는 계산된 값 유형이 없는 경우 (예: 구문이 범용 구문 정의인 경우) 또는 사용자 지정 속성이 등록되지 않은 경우, 애니메이션 유형은 이산이다.

5.3. 키프레임 효과

키프레임 효과는 타이밍 모델의 출력을 사용하여 효과 대상이라고 하는 요소 또는 의사 요소(예: ::before 또는 ::after [select])의 CSS 속성을 업데이트하는 애니메이션 효과의 한 종류이다.

효과 대상은 대상 요소라고 하는 Element와 대상 의사 선택자라고 하는 의사 요소 선택자로 구성된다. 효과 대상이 Element이면, 대상 요소는 해당 요소이고 대상 의사 선택자는 null이다. 효과 대상이 의사 요소이면, 대상 요소는 그 기원 요소이고 대상 의사 선택자는 해당 특정 의사 요소를 지정하는 데 필요한 값이다.

이 방식으로 지정된 모든 효과 대상(예: ::part() 의사 요소 및 지원되지 않는 의사 요소)에 계산된 속성 값이 정의되어 있는 것은 아니라는 점에 유의한다.

5.3.1. 키프레임

키프레임 효과의 효과 값은 분수 오프셋에 배치된 일련의 속성 값 사이를 보간하여 계산된다. 오프셋으로 색인되는 각 속성 값 집합을 키프레임이라고 한다.

키프레임의 오프셋은 [0, 1] 범위의 값 또는 특수 값 null이다. 키프레임 효과의 키프레임 목록은 오프셋을 기준으로 느슨하게 정렬되어야 한다. 이는 목록에서 null이 아닌 키프레임 오프셋을 가진 각 키프레임에 대해, 그 오프셋이 존재하는 경우 앞에 있는 null이 아닌 키프레임 오프셋을 가진 키프레임의 오프셋보다 크거나 같음을 의미한다.

키프레임이 겹치거나 지원되지 않는 값을 갖는 경우의 동작은 § 5.3.4 키프레임 효과의 효과 값에 정의되어 있다.

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

각 키프레임에는 설정된 경우 해당 키프레임에 지정된 모든 값에 적용되는 키프레임별 합성 연산이 있을 수 있다. 가능한 연산과 그 의미는 § 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에 둘 이상의 키프레임이 있고 keyframes의 첫 번째 키프레임의 계산된 키프레임 오프셋이 null이면, 첫 번째 키프레임의 계산된 키프레임 오프셋을 0으로 설정한다.

3. keyframes의 마지막 키프레임의 계산된 키프레임 오프셋이 null이면, 그 계산된 키프레임 오프셋을 1로 설정한다.

4. 다음 조건을 만족하는 각 키프레임 쌍 A와 B에 대해:

   • A가 keyframes에서 B보다 앞에 있고, 또한

   • A와 B의 계산된 키프레임 오프셋이 null이 아니며, 또한

   • A와 B 사이의 모든 키프레임의 계산된 키프레임 오프셋이 null이면,

   A와 B 사이의 각 키프레임의 계산된 키프레임 오프셋을 다음과 같이 계산한다:

   1. 키프레임 k의 계산된 키프레임 오프셋을 offset_k로 둔다.

   2. n을 A와 B를 포함한 그 사이의 키프레임 수에서 1을 뺀 값으로 둔다.

   3. index가 A 바로 뒤의 첫 번째 키프레임에서 1이 되도록, A와 B 사이 키프레임 시퀀스에서 keyframe의 위치를 index가 나타내도록 둔다.

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

계산된 키프레임은 다음 절차를 사용하여 생성된다. 이 절차는 계산된 속성 값을 계산할 수 있는 효과 대상을 가진 키프레임 효과에 대해서만 수행된다는 점에 유의한다.

1. computed keyframes를 빈 키프레임 목록으로 둔다.

2. 이 키프레임 효과에 지정된 키프레임 목록의 각 keyframe에 대해 다음 단계를 수행한다:

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

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

      • keyframe에 지정된 값을 값으로, 대상 요소를 요소로 사용하여 속성 값을 계산한 다음, 속성과 결과 값을 computed keyframe에 추가한다.

      • 단축 속성의 경우, 이에 해당하는 장축 속성을 추가한다.

      • 논리 속성 [CSS-LOGICAL-1]의 경우, 효과 대상의 writing-mode 및/또는 direction의 계산된 값을 기반으로 이에 해당하는 물리적 속성 [CSS-WRITING-MODES-4]을 추가한다.

      예를 들어 keyframe에 border-width 속성의 값으로 "12pt"가 있으면, 사용자 에이전트는 각 장축 속성인 border-bottom-width, border-left-width, border-right-width, 그리고 border-top-width에 대해 "16px"이라는 속성 값을 계산할 수 있다. 그 결과 computed keyframe에는 border-width 속성의 값이 없고, 대신 각 장축 속성이 포함되며 각각 "16px" 값을 갖게 된다.

      단축 속성을 확장하거나 논리 속성을 물리적 속성으로 대체할 때 충돌이 발생하면, 충돌이 해결될 때까지 다음 규칙을 순서대로 적용한다:

      1. 장축 속성은 단축 속성을 재정의한다(예: border-top-color는 border-top을 재정의한다).

      2. 장축 구성 요소 수가 더 적은 단축 속성이 장축 구성 요소 수가 더 많은 단축 속성을 재정의한다(예: border-top은 border-color를 재정의한다).

      3. 물리적 속성이 논리 속성을 재정의한다.

      4. 장축 구성 요소 수가 동일한 단축 속성의 경우, 각 IDL 이름을 구성하는 유니코드 코드 포인트를 기준으로 오름차순 정렬했을 때 IDL 이름(CSS 속성을 IDL 속성으로 변환 알고리즘 [CSSOM] 참조)이 더 앞에 나타나는 속성이 뒤에 나타나는 속성을 재정의한다.

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

4. computed keyframes를 반환한다.

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

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

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

2. target property를 효과 값을 계산할 장축 속성으로 둔다.

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

4. 키프레임 효과에 효과 대상이 없거나, 효과 대상에 대해 계산된 속성 값을 계산할 수 없으면 이 절차를 중단한다.

5. 합성을 위한 중립 값을 기저 값과 add 합성 연산을 사용하여 결합했을 때 기저 값을 생성하는 값으로 정의한다.

6. property-specific keyframes를 이 키프레임 효과에 대한 계산된 키프레임 집합을 가져온 결과로 둔다.

7. target property에 대한 속성 값이 없는 모든 키프레임을 property-specific keyframes에서 제거한다.

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에 추가한다. 그러한 키프레임이 없으면(예를 들어 반복 진행률이 음수인 경우), 계산된 키프레임 오프셋이 0인 마지막 키프레임을 추가한다.

    2. 이전 단계에서 추가한 키프레임 다음에 있는 property-specific keyframes의 다음 키프레임을 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. keyframe의 target property 속성 값을, target property의 애니메이션 유형에 대응하는 composite operation to use의 절차를 사용하여 underlying value (V_a)와 value to combine (V_b)을 결합한 결과로 대체한다.

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 값에 대해, 첫 번째 값을 V_start로, 두 번째 값을 V_end로 하고 transformed distance를 보간 매개변수 p로 사용하여, target property의 애니메이션 유형에서 정의한 보간 절차를 적용한 결과를 반환한다.

참고: 이 절차는 겹치는 키프레임을 허용한다. 겹치는 지점에서는 출력 값이 해당 오프셋에서 마지막으로 정의된 키프레임의 값으로 점프한다. 0 또는 1에서 겹치는 키프레임의 경우, 반복 진행률 값이 0보다 작거나 1보다 크거나 같은 경우의 출력 값은 각각 keyframes의 첫 번째 키프레임 또는 마지막 키프레임의 값이다.

5.4. 효과 결합

이 절은 비규범적이다

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

동일한 속성을 대상으로 하는 여러 효과 적용 중인 키프레임 효과가 있을 수 있으므로 여러 키프레임 효과의 결과를 함께 결합해야 하는 경우가 많다. 이 과정을 합성이라고 하며, 효과 적용 중인 애니메이션 효과가 대상으로 하는 각 속성에 대해 효과 스택을 설정하는 것을 기반으로 한다.

키프레임 효과의 결과를 함께 합성한 후, 합성된 결과는 대상 속성에 지정된 다른 값과 결합된다.

이 구성은 아래에 나타나 있다:

이 연산의 첫 번째 부분, 즉 동일한 속성을 대상으로 하는 효과 값을 결합하려면 키프레임 효과가 서로 어떻게 결합되는지뿐만 아니라, 적용되는 순서, 즉 상대적 합성 순서도 결정해야 한다.

효과 값을 어떻게 결합할지는 해당 키프레임 효과의 합성 연산에 의해 결정된다.

효과 값의 상대적 합성 순서는 각 애니메이션된 속성에 대해 설정된 효과 스택에 의해 결정된다.

5.4.1. 애니메이션 클래스

이 명세는 이 모델을 기반으로 마크업 또는 프로그래밍 인터페이스를 정의하는 다른 명세에서 사용하도록 의도된 공통 애니메이션 모델을 제공한다. 애니메이션을 생성한 특정 마크업 또는 프로그래밍 인터페이스가 그 애니메이션 클래스를 정의한다.

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

5.4.2. 효과 스택

효과 스택은 하나 이상의 키프레임 효과가 대상으로 하는 각 속성에 연결된다. 효과 스택은 키프레임 효과의 상대적 합성 순서를 설정한다.

키프레임 효과 A와 B 두 개의 상대적 합성 순서는 효과 스택 내에서 다음과 같이 그 속성을 비교하여 설정된다:

1. 애니메이션 효과의 연관 애니메이션을 애니메이션 효과와 연결된 애니메이션으로 둔다.

2. 순서가 결정될 때까지 다음 조건을 차례로 적용하여 A와 B를 정렬한다.

   1. A와 B의 연관 애니메이션이 클래스가 다르면, 해당 클래스에 대해 정의된 클래스 간 합성 순서에 따라 정렬한다.

   2. A와 B가 여전히 정렬되지 않았으면, A와 B의 연관 애니메이션이 공유하는 클래스에 대해 정의된 클래스별 합성 순서에 따라 정렬한다.

   3. A와 B가 여전히 정렬되지 않았으면, 전역 애니메이션 목록에서 그 연관 애니메이션의 위치에 따라 정렬한다.

더 앞에 정렬되는 애니메이션 효과는 더 낮은 합성 순서를 갖는다.

5.4.3. 효과 스택 결과 계산

효과 스택의 최종 값을 계산하기 위해, 스택의 각 키프레임 효과의 효과 값을 합성 순서에 따라 결합한다.

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

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

효과 스택의 최종 값인 합성된 값은 단순히 스택의 마지막 (가장 높은 합성 순서의) 키프레임 효과의 효과 값을 그 시점의 기저 값과 결합한 결과이다.

5.4.4. 효과 합성

효과 값을 기저 값과 결합하는 데 사용되는 특정 연산은 해당 효과 값을 생성한 키프레임 효과의 합성 연산에 의해 결정된다.

이 명세는 다음과 같이 세 가지 합성 연산을 정의한다:

replace

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

add

효과 값은 기저 값에 더해진다. 덧셈 연산이 교환 법칙을 만족하지 않도록 정의된 애니메이션 유형의 경우, 피연산자의 순서는 기저 값 + 효과 값이다.

accumulate

효과 값은 기저 값에 누적된다. 누적 연산이 교환 법칙을 만족하지 않도록 정의된 애니메이션 유형의 경우, 피연산자의 순서는 기저 값 다음에 효과 값이 오는 순서이다.

5.4.5. 합성된 결과 적용

합성된 값을 대상 속성에 적용하는 것은 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. 대체 상태

애니메이션은 다음 값 중 하나일 수 있는 대체 상태를 유지한다:

• 활성

• 제거됨

• 유지됨

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

대체 상태가 제거됨인 애니메이션의 애니메이션 효과는 그 대상 속성의 효과 스택에 포함되지 않는다.

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

애니메이션은 다음 조건이 모두 참이면 대체 가능이다:

• 애니메이션의 존재가 마크업에 의해 규정되지 않는다. 즉, 소유 요소를 가진 CSS 애니메이션도 아니고, 소유 요소를 가진 CSS 전환도 아니다.

• 애니메이션의 재생 상태가 완료됨이다.

• 애니메이션의 대체 상태가 제거됨이 아니다.

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

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

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

• 애니메이션의 연관 효과에 효과 대상이 있다.

Document doc에 대해 대체된 애니메이션을 제거하도록 요청되면, 다음 조건을 만족하는 모든 애니메이션 animation에 대해:

• doc의 자손인 효과 대상을 가진 애니메이션 효과가 연결되어 있고, 또한

• 대체 가능하며, 또한

• 대체 상태가 활성이고, 또한

• animation과 연결된 모든 애니메이션 효과의 각 대상 속성에 대해, 동일한 대상 속성을 포함하면서 animation보다 합성 순서가 더 높은 대체 가능 애니메이션과 연결된 애니메이션 효과가 존재한다.

다음 단계를 수행한다:

1. animation의 대체 상태를 제거됨으로 설정한다.

2. AnimationPlaybackEvent, removeEvent를 생성한다.

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

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

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

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

   그렇지 않으면 animation에서 removeEvent를 디스패치하도록 태스크를 큐에 넣는다. 이 태스크의 태스크 소스는 DOM 조작 태스크 소스이다.

5.6. 애니메이션의 부작용

현재이거나 효과 적용 중인 하나 이상의 애니메이션 효과가 대상으로 하고, 대체 상태가 제거됨이 아닌 애니메이션과 연결된 모든 속성에 대해, 사용자 에이전트는 효과 대상의 will-change 속성([css-will-change-1])에 해당 속성이 포함된 것처럼 동작해야 한다.

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

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

시간 값은 프로그래밍 인터페이스에서 double 유형으로 표현된다. 미해결 시간 값은 null 값으로 표현된다.

6.2. AnimationTimeline 인터페이스

타임라인은 웹 애니메이션 API에서 AnimationTimeline 인터페이스로 표현된다.

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

6.3. DocumentTimeline 인터페이스

문서 타임라인은 기본 문서 타임라인을 포함하여 웹 애니메이션 API에서 DocumentTimeline 인터페이스로 표현된다.

dictionary DocumentTimelineOptions {
  DOMHighResTimeStamp originTime = 0;
};

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

6.4. Animation 인터페이스

애니메이션은 웹 애니메이션 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. targets의 각 target에 대해 반복한다:

   1. target이 style 속성 [CSS-STYLE-ATTR]을 가질 수 있는 요소가 아니면 (예를 들어 의사 요소이거나, style 속성이 정의되지 않은 문서 형식의 요소인 경우) "NoModificationAllowedError" DOMException을 던지고 이 단계를 중단한다.

   2. 대기 중인 모든 스타일 변경을 적용한 후 target이 렌더링 중이 아니면, "InvalidStateError" DOMException을 던지고 이 단계를 중단한다.

      display: contents와 관련된 렌더링 중 [HTML]의 정의는 아직 논의 중이다. 이 절차의 목적상, 다른 경우라면 연관된 레이아웃 박스를 가질 display: contents인 요소 (즉, 연결되어 있고 display: none 하위 트리의 일부가 아닌 요소)는 렌더링 중이라고 가정한다.

   3. inline style을 target의 style 속성에 대응하는 CSS 선언 블록을 가져온 결과로 둔다. target이 style 속성을 가지지 않으면, inline style을 소유자 노드가 target으로 설정된 새로운 빈 CSS 선언 블록으로 둔다.

   4. targeted properties를 animation과 연결되어 있고 효과 대상이 target인 하나 이상의 애니메이션 효과의 대상 속성인 물리적 장축 속성의 집합으로 둔다.

   5. targeted properties의 각 속성 property에 대해:

      1. partialEffectStack을 target의 property에 대한 효과 스택의 복사본으로 둔다.

      2. animation의 대체 상태가 제거됨이면, animation과 연결되어 있고, 효과 대상이 target이며 property를 대상 속성으로 포함하는 모든 애니메이션 효과를 partialEffectStack에 추가한다.

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

      4. effect value를 target의 계산된 스타일을 사용하여 property에 대한 partialEffectStack의 결과를 계산한 값으로 둔다 (§ 5.4.3 효과 스택 결과 계산 참조).

      5. inline style에서 effect value에 대한 property CSS 선언을 설정한다.

   6. inline style에 대해 style 속성을 업데이트한다.

6.4.1. AnimationPlayState 열거형

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

idle

유휴 재생 상태에 대응한다.

running

실행 중 재생 상태에 대응한다.

paused

일시 중지됨 재생 상태에 대응한다.

finished

완료됨 재생 상태에 대응한다.

6.4.2. AnimationReplaceState 열거형

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

active

활성 대체 상태에 대응한다.

removed

제거됨 대체 상태에 대응한다.

persisted

유지됨 대체 상태에 대응한다.

6.5. AnimationEffect 인터페이스

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

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

remove() 메서드를 사용하여 효과를 그 부모 그룹이나 애니메이션에서 제거할 수 있다. 이를 레벨 1에 유지하고 단순히 애니메이션 효과를 그 애니메이션에서 제거하는 것으로 정의해야 하는가? [이슈 #2082]

6.5.1. EffectTiming 및 OptionalEffectTiming 딕셔너리

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

OptionalEffectTiming 딕셔너리는 일부 멤버가 존재하지 않을 수 있도록 하는 EffectTiming 딕셔너리의 변형이다. 이는 AnimationEffect 인터페이스의 updateTiming() 메서드에서 애니메이션 효과의 타이밍 속성을 델타 업데이트하는 데 사용된다.

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

순방향으로 채운다.

backwards

역방향으로 채운다.

both

역방향과 순방향으로 채운다.

auto

채우기 없음. 이 명세의 후속 레벨에서는 다른 유형의 애니메이션 효과에 대해 다른 동작을 생성할 수 있다.

6.5.3. PlaybackDirection 열거형

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

normal

모든 반복은 지정된 대로 재생된다.

reverse

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

alternate

짝수 반복은 지정된 대로 재생되고, 홀수 반복은 지정된 순서의 반대 방향으로 재생된다.

alternate-reverse

짝수 반복은 지정된 순서의 반대 방향으로 재생되고, 홀수 반복은 지정된 대로 재생된다.

6.5.4. AnimationEffect의 타이밍 업데이트

EffectTiming 또는 OptionalEffectTiming 객체 input에서 effect의 애니메이션 효과의 타이밍 속성을 업데이트하려면 다음 단계를 수행한다:

1. input의 iterationStart 멤버가 존재하고 0보다 작으면 TypeError를 던지고 이 절차를 중단한다.

   참고: RangeError가 아니라 TypeError를 사용하는 이유는 향후 WebIDL의 [EnforceRange] 주석을 부동 소수점 값과 함께 사용할 수 있게 될 경우 그 동작을 따르기 위해서이다.

2. input의 iterations 멤버가 존재하고, 0보다 작거나 값이 NaN이면 TypeError를 던지고 이 절차를 중단한다.

3. input의 duration 멤버가 존재하고, 0보다 작거나 값이 NaN이면 TypeError를 던지고 이 절차를 중단한다.

4. input의 easing 멤버가 존재하지만 <easing-function> 생성 규칙 [CSS-EASING-1]을 사용하여 구문 분석할 수 없으면 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 이름

property에 대한 애니메이션 속성 이름을 IDL 속성 이름으로 변환하는 알고리즘은 다음과 같다:

1. property가 <custom-property-name> 생성 규칙을 따르면, property를 반환한다.

2. property가 CSS float 속성을 가리키면, 문자열 "cssFloat"를 반환한다.

3. property가 CSS offset 속성을 가리키면, 문자열 "cssOffset"을 반환한다.

4. 그렇지 않으면 property에 CSS 속성을 IDL 속성으로 변환하는 알고리즘 [CSSOM]을 적용한 결과를 반환한다.

attribute에 대한 IDL 속성 이름을 애니메이션 속성 이름으로 변환하는 알고리즘은 다음과 같다:

1. attribute가 <custom-property-name> 생성 규칙을 따르면, attribute를 반환한다.

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

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

4. 그렇지 않으면 attribute에 IDL 속성을 CSS 속성으로 변환하는 알고리즘 [CSSOM]을 적용한 결과를 반환한다.

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'이 적용된다.
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 {
    // ... 속성-값 쌍 ...
    // 즉, DOMString propertyName
    double?                   offset = null;
    DOMString                 easing = "linear";
    CompositeOperationOrAuto  composite = "auto";
};

dictionary PropertyIndexedKeyframes {
    // ... 속성-값 및 속성-값목록 쌍 ...
    // 즉, (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 인수를 받는 각 메서드에 대해, 입력에 키프레임 인수를 처리하는 절차를 실행하고 그 절차의 결과를 유지한다.

먼저 두 가지 보조 정의를 정의한다.

ECMAScript 연산 호출에서 얻은 완료 레코드인 result의 완료 레코드를 확인하라는 지시는 다음 단계와 동등하다:

1. result가 갑작스러운 완료이면, result의 [[value]] 필드에 포함된 예외를 던지고 절차를 중단한다.

   [[type]]이 break, continue 또는 return이면 어떻게 해야 하는가? 그런 경우가 가능한가?

2. result를 result의 [[value]] 필드에 포함된 값으로 대체한다.

키프레임 유사 객체를 처리하는 절차는 두 인수를 받는다:

• ECMAScript 객체 keyframe input, 그리고

• allow lists 불리언 플래그

그리고 다음 절차를 사용하여 allow lists가 false이면 속성 이름에서 DOMString 값으로의 맵을, 그렇지 않으면 속성 이름에서 DOMString 값 시퀀스로의 맵을 반환한다:

1. keyframe input을 ECMAScript 값으로 하여 ECMAScript 값을 딕셔너리 유형으로 변환하는 절차 [WEBIDL]를 실행하고, 딕셔너리 유형은 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를 구현이 애니메이션할 수 있는 속성 이름(애니메이션 가능한 장축 하위 속성을 가진 단축 속성 포함)의 목록으로 둔다.

   2. 애니메이션 속성 이름을 IDL 속성 이름으로 변환하는 알고리즘을 적용하여 animatable properties의 각 속성 이름을 대응하는 IDL 속성으로 변환한다.

3. keyframe input을 객체로 하여 EnumerableOwnNames 연산을 호출한 결과를 input properties로 둔다.

4. input properties와 animatable properties에 모두 포함되거나, input properties에 포함되면서 <custom-property-name> 생성 규칙을 따르는 모든 속성으로 구성된 새 목록 animation properties를 만든다.

5. 각 속성 이름을 정의하는 유니코드 코드 포인트를 기준으로 animation properties를 오름차순 정렬한다.

6. animation properties의 각 property name에 대해,

   1. keyframe input에서 속성 키로 property name을, 수신자로 keyframe input을 사용하여 [[Get]] 내부 메서드를 호출한 결과를 raw value로 둔다.

   2. raw value의 완료 레코드를 확인한다.

   3. raw value를 다음과 같이 DOMString 또는 DOMString 시퀀스 property values로 변환한다:

      allow lists가 true이면,

      ECMAScript 값을 IDL 값으로 변환하기 위해 정의된 절차 [WEBIDL]를 사용하여 raw value를 IDL 유형 (DOMString or sequence<DOMString>)으로 변환한 결과를 property values로 둔다.

      property values가 단일 DOMString이면, property values를 원래 property values 값만을 유일한 항목으로 갖는 DOMString 시퀀스로 대체한다.

      그렇지 않으면,

      ECMAScript 값을 DOMString으로 변환하는 절차 [WEBIDL]를 사용하여 raw value를 DOMString으로 변환한 결과를 property values로 둔다.

   4. property name에 IDL 속성 이름을 애니메이션 속성 이름으로 변환하는 알고리즘을 적용한 결과를 normalized property name으로 계산한다.

   5. normalized property name을 속성 이름으로 하고 property values를 속성 값으로 하는 속성을 keyframe output에 추가한다.

7. keyframe output을 반환한다.

키프레임 인수를 처리하는 절차는 null 허용 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를 던지고 이 단계를 중단한다.

      7. nextItem을 keyframe input으로 전달하고 allow lists 플래그를 false로 설정하여 키프레임 유사 객체를 처리하는 절차를 실행한 결과를 processed keyframes에 추가한다.

   그렇지 않으면,

   1. object를 keyframe input으로 전달하고 allow lists 플래그를 true로 설정하여 키프레임 유사 객체를 처리하는 절차를 실행한 결과를 property-indexed keyframe으로 둔다.

   2. property-indexed keyframe의 각 멤버 m에 대해 다음 단계를 수행한다:

      1. property name을 m의 키로 둔다.

      2. property name이 "composite", "easing" 또는 "offset"이면, 이 루프의 나머지 단계를 건너뛰고 property-indexed keyframe에서 m 다음 멤버부터 계속한다.

      3. property values를 m의 값으로 둔다.

      4. property keyframes를 빈 키프레임 시퀀스로 둔다.

      5. property values의 각 값 v에 대해 다음 단계를 수행한다:

         1. k를 null 키프레임 오프셋을 가진 새 키프레임으로 둔다.

         2. 속성-값 쌍 property name → v를 k에 추가한다.

         3. k를 property keyframes에 추가한다.

      6. property keyframes에 누락된 키프레임 오프셋 계산 절차를 적용한다.

      7. property keyframes의 키프레임을 processed keyframes에 추가한다.

   3. processed keyframes를 각 키프레임의 계산된 키프레임 오프셋을 기준으로 오름차순 정렬한다.

   4. processed keyframes에서 인접한 키프레임의 계산된 키프레임 오프셋이 같으면 병합한다.

   5. offsets를 property-indexed keyframe의 "offset" 멤버 유형에 따라 다음과 같이 할당된 null 허용 double 값의 시퀀스로 둔다:

      sequence<double?>,

      "offset"의 값을 그대로 사용한다.

      double?,

      "offset"의 값을 유일한 항목으로 갖는 길이 1의 시퀀스, 즉 « offset »,

   6. 두 시퀀스 중 하나의 끝에 도달할 때까지 offsets의 각 값을 processed keyframes에서 대응하는 위치의 키프레임의 키프레임 오프셋에 할당한다.

   7. easings를 property-indexed keyframe의 "easing" 멤버 유형에 따라 다음과 같이 할당된 DOMString 값의 시퀀스로 둔다:

      sequence<DOMString>,

      "easing"의 값을 그대로 사용한다.

      DOMString,

      "easing"의 값을 유일한 항목으로 갖는 길이 1의 시퀀스, 즉 « easing »,

   8. easings가 빈 시퀀스이면, 단일 값 "linear"를 포함하는 길이 1의 시퀀스, 즉 « "linear" »로 둔다.

   9. easings의 항목 수가 processed keyframes보다 적으면, easings가 processed keyframes와 같은 수의 항목을 가질 때까지 목록의 처음부터 easings의 요소를 차례로 반복한다.

      예를 들어 processed keyframes에 5개 항목이 있고 easings가 « "ease-in", "ease-out" » 시퀀스이면, easings는 « "ease-in", "ease-out", "ease-in", "ease-out", "ease-in" »이 되도록 반복된다.

   10. easings의 항목 수가 processed keyframes보다 많으면, 초과 항목을 unused easings로 저장한다.

   11. processed keyframes의 끝에 도달할 때까지 easings의 각 값을 processed keyframes에서 대응하는 위치의 키프레임에 있는 "easing"이라는 이름의 속성에 할당한다.

   12. property-indexed keyframe의 "composite" 멤버가 빈 시퀀스가 아니면:

       1. composite modes를 property-indexed keyframe의 "composite" 멤버에서 할당된 CompositeOperationOrAuto 값의 시퀀스로 둔다. 해당 멤버가 단일 CompositeOperationOrAuto 값 연산이면, composite modes를 "composite"의 값을 유일한 항목으로 갖는 길이 1의 시퀀스로 둔다.

       2. easings와 마찬가지로 composite modes의 항목 수가 processed keyframes보다 적으면, composite modes가 processed keyframes와 같은 수의 항목을 가질 때까지 목록의 처음부터 composite modes의 요소를 차례로 반복한다.

       3. processed keyframes의 끝에 도달할 때까지 composite modes에서 auto가 아닌 각 값을 processed keyframes에서 대응하는 위치의 키프레임의 키프레임별 합성 연산에 할당한다.

6. processed keyframes가 오프셋을 기준으로 느슨하게 정렬되어 있지 않으면 TypeError를 던지고 이 단계를 중단한다.

7. processed keyframes에 null이 아니며 0보다 작거나 1보다 큰 키프레임 오프셋을 가진 키프레임이 하나라도 존재하면 TypeError를 던지고 이 단계를 중단한다.

8. processed keyframes의 각 frame에 대해 다음 단계를 수행한다:

   1. frame의 각 속성-값 쌍에 대해, 해당 속성에 지정된 구문을 사용하여 속성 값을 구문 분석한다.

      속성 값이 속성 구문에 따라 유효하지 않으면 해당 속성-값 쌍을 버린다. 콘텐츠의 오류 진단을 지원하는 사용자 에이전트는 유효하지 않은 속성 값을 강조하는 적절한 경고를 생성해야 한다.

   2. frame의 타이밍 함수를 EffectTiming 딕셔너리의 easing 멤버에 정의된 CSS 구문을 사용하여 frame의 "easing" 속성을 구문 분석한 결과로 둔다.

      "easing" 속성 구문 분석에 실패하면 TypeError를 던지고 이 절차를 중단한다.

      참고: 위 두 단계 모두에서 CSS 파서를 사용한다는 것은 CSS 주석과 이스케이프가 허용되지만 값이 성공적으로 구문 분석되면 유지되지 않음을 의미한다.

      참고: "easing" 속성의 구문 분석에 실패한 경우, object의 모든 속성을 읽은 후에 TypeError를 던지는 것이 중요하다. 그렇지 않으면 그 차이가 관찰 가능하며, 나중에 WebIDL에서 부분적으로 개방된 딕셔너리를 지원할 경우의 동작과 일치하지 않는다.

9. EffectTiming 인터페이스의 easing 멤버에 정의된 CSS 구문을 사용하여 unused easings의 각 값을 구문 분석하고, 값 중 하나라도 구문 분석에 실패하면 TypeError를 던지고 이 절차를 중단한다.

   다음 모든 경우에 TypeError가 발생하도록 일관된 동작을 제공하기 위해 이 마지막 단계가 필요하다:

   elem.animate({ easing: 'invalid' });
   elem.animate({ easing: ['invalid'] });
   elem.animate([{ easing: 'invalid' }]);