CSS 애니메이션 레벨 2

1. 델타 명세

이 문서는 델타 명세로, 현재 CSS Animations Level 1 [CSS3-ANIMATIONS]과의 차이점만을 포함합니다. Level 1 명세가 완성에 가까워지면, 여기에 추가된 내용과 통합되어 완전한 레벨 2 명세가 될 예정입니다.

2. 애니메이션

이 명세에서 정의된 애니메이션 속성 중 어느 하나라도 변경되면, 해당 CSSAnimation 객체와 관련 객체들이, 이러한 속성과 § 3 키프레임 조립에서 정의된 Web Animations 개념 간의 대응에 따라 업데이트됩니다.

하지만 작성자가 Web Animations 프로그래밍 인터페이스를 사용하여 애니메이션을 수정하는 경우, 아래와 같이 프로그래밍 인터페이스에서의 변경 사항이 우선합니다:

• setKeyframes()를 KeyframeEffect에 성공적으로 호출하고, 이 CSSAnimation에 연결된 경우, 이후에 매칭되는 @keyframes 규칙이나 대상 요소의 animation-timing-function 속성의 해석된 값의 변경 사항은 해당 애니메이션에 반영되지 않습니다.

  그러나 마지막으로 매칭되는 @keyframes 규칙이 제거되면, 애니메이션은 반드시 취소되어야 합니다.

• updateTiming()을 KeyframeEffect에 성공적으로 호출하고, 이 CSSAnimation에 연결된 경우, timing 파라미터에 포함된 각 속성에 대해 이후 해당 애니메이션 속성의 변경 사항은 애니메이션에 반영되지 않습니다.

  예를 들어 cssAnimation.effect.updateTiming({ duration: 1000 })를 호출하면 이후 animation-duration 변경은 무시되고, animation-delay의 변경은 KeyframeEffect의 timing에 반영됩니다.

• play() 또는 pause()를 CSSAnimation에 성공적으로 호출한 경우, 이후 animation-play-state의 변경은 CSSAnimation을 § 4.5 animation-play-state 속성에서 정의한 대로 재생 또는 일시정지시키지 않습니다.

• reverse()를 CSSAnimation에 성공적으로 호출하거나, startTime을 CSSAnimation에 성공적으로 설정한 뒤, 해당 CSSAnimation의 플레이 상태가 일시정지 상태로 변경되거나 해제되면, 이후 animation-play-state 변경은 CSSAnimation을 재생하거나 일시정지시키지 않습니다. § 4.5 animation-play-state 속성 참고.

  일시정지 상태로 변경되는 요구는, reverse()를 호출하거나 startTime을 실행 중인 애니메이션에 설정한 후에도, animation-play-state의 변화를 계속 관찰함을 보장합니다.

• effect를 CSSAnimation에 null 또는 원래 KeyframeEffect가 아닌 AnimationEffect로 성공적으로 설정한 경우, animation-name 또는 animation-play-state를 제외한 모든 애니메이션 속성의 이후 변경은 해당 애니메이션에 반영되지 않습니다. 마찬가지로 매칭되는 @keyframes 규칙의 변경도 반영되지 않습니다. 그러나 마지막 매칭 @keyframes 규칙이 제거되면 애니메이션은 반드시 취소되어야 합니다.

참고, 위 규칙에서 "성공적으로 호출"을 명시하는 이유는, 이 메서드들에서 예외가 발생할 경우 오버라이드 동작이 적용되지 않도록 하기 위함입니다.

2.1. 소유 엘리먼트

애니메이션의 소유 엘리먼트란, 해당 애니메이션을 생성한 animation-name 속성이 적용된 요소 또는 의사 요소를 의미합니다.

요소의 display 속성이 none으로 설정되고, Transitions와 Animations cascade origins를 무시했을 때 display 값이 none으로 계산된다면, 해당 소유 엘리먼트를 가진 실행 중인 애니메이션을 종료합니다. 만약 요소의 display 값이 none이고, Transitions와 Animations cascade origins를 무시했을 때 display 값이 none이었다면, display 값을 none이 아닌 값으로 변경하면 animation-name 속성에 의해 요소에 적용된 모든 애니메이션이 시작됩니다.

참고: 실제로, display 값을 none으로 애니메이션해도, 스타일이 애니메이션의 효과 없이 none으로 계산되지 않는 한 실행 중인 애니메이션은 종료되지 않습니다.

이 명세에서 정의된 마크업을 사용해 생성된 애니메이션이 나중에 animation-name 속성의 계산 값 업데이트에 의해 소유 엘리먼트와 연결이 끊어지면, 해당 애니메이션은 소유 엘리먼트에서 분리됩니다(즉, 그 시점부터 소유 엘리먼트가 없습니다).

elem.style.animation = 'spin 1s';
let animation = elem.getAnimations()[0]; // animation의 소유 엘리먼트는 elem
elem.style.animation = ''; // animation은 더 이상 소유 엘리먼트가 없음

elem.style.animation = 'move 1s';
let animation = elem.getAnimations()[0];
// animation.effect.target == elem == animation의 소유 엘리먼트

animation.effect.target = elem2;
// animation.effect.target == elem2 != animation의 소유 엘리먼트

animation.effect = null;
// animation.effect?.target은 undefined != animation의 소유 엘리먼트

2.2. 애니메이션 합성 순서

이 명세에서 정의된 마크업으로 생성된 애니메이션은 ‘CSS Animation’ 애니메이션 클래스를 가집니다.

소유 엘리먼트가 있는 CSS 애니메이션은 CSS 트랜지션보다 나중 합성 순서를 가지며, 특정 애니메이션 클래스가 없는 애니메이션보다는 더 빠른 합성 순서입니다.

소유 엘리먼트가 있는 CSS 애니메이션 집합 내에서, 두 애니메이션 A와 B의 합성 순서(앞에서부터 뒤까지)는 다음과 같이 정렬됩니다:

1. A와 B의 소유 엘리먼트가 다르면, 해당 소유 엘리먼트의 트리 순서로 정렬합니다. 의사 요소의 경우, 정렬 순서는 다음과 같습니다:

   • element

   • ::marker

   • ::before

   • 이 목록에 특별히 언급되지 않은 기타 의사 요소는 각각의 선택자를 구성하는 유니코드 코드포인트 순으로 오름차순 정렬합니다

   • ::after

   • element의 자식

2. 그 외의 경우, A와 B는 (공통된) animation-name 속성의 계산 값 내에서 위치에 따라 정렬됩니다.

소유 엘리먼트가 없는 CSS 애니메이션의 합성 순서는 글로벌 애니메이션 목록 내 위치를 기반으로 합니다.

이 동작은 트랜지션에서 정의된 것과 다릅니다. 트랜지션을 먼저 정렬하고, 그 다음 애니메이션, 마지막으로 글로벌 애니메이션 리스트를 사용하는 것이 좋을 듯합니다. 개발자 도구 등이 고아 애니메이션과 트랜지션을 재생하기 위해 유지할 경우, 합성 순서가 대략적으로 동일하게 유지되어야 하기 때문입니다.

이 명세에서 정의된 마크업을 통해 생성된 CSS 애니메이션은 생성 시 글로벌 애니메이션 목록에 추가되지 않습니다. 대신, 애니메이션이 유휴(play idle) 상태에서 소유 엘리먼트와 분리된 후 처음으로 유휴 상태를 벗어날 때 글로벌 애니메이션 목록에 추가됩니다. 소유 엘리먼트와 분리되었지만 아직 유휴 상태인 CSS 애니메이션은 합성 순서가 정의되지 않습니다.

참고, 이 동작은 애니메이션을 소유 엘리먼트와 분리하면 항상 유휴(play idle) 상태가 되거나 유지된다는 점에 기반합니다.

3. 키프레임 조립

3.1. 키프레임 선언: @keyframes 규칙

CSS Animations 1 § 3 키프레임을 참고하세요.

3.2. 키프레임 처리

타겟 (의사)요소 element의 coordinated value list에서 N번째 아이템으로 정의된 각 애니메이션 효과에 대해, 연결된 키프레임은 다음과 같이 생성됩니다:

1. 기본값 설정:

   • default timing function을 element의 계산된 값인 animation-timing-function으로 설정합니다.

   • default composite를 element의 계산된 값인 animation-composition으로 설정합니다.

   • keyframes를 키프레임 객체의 빈 시퀀스로 설정합니다. 각 객체는 keyframe offset, keyframe timing function, keyframe composite, 그리고 keyframe values를 가집니다.

   • animated properties를 CSS 속성 이름의 빈 집합으로 설정합니다.

2. 선언된 키프레임 수집:

   1. 문서 순서상 마지막 @keyframes at-rule을 찾습니다. <keyframes-name>이 해당 animation-name 값 name과 일치해야 합니다.

      @keyframes at-rule이 name과 일치하는 <keyframes-name>이 없거나, name이 none인 경우, 이 절차를 중단합니다. 이 경우 애니메이션이 생성되지 않으며, name에 일치하는 기존 애니메이션은 취소됩니다.

   2. 동일한 키프레임 블록을 그룹화합니다. 지정된 <keyframe-selector>가 같은 것끼리 묶고 (from을 0%, to를 100%로 간주), 마지막으로 선언된 animation-timing-function 계산된 값(선언이 없으면 default timing function 사용), 그리고 마지막으로 선언된 animation-composition 계산된 값(선언이 없으면 default composite 사용)으로 묶습니다.

   3. 이렇게 그룹화된 각 키프레임 블록에 대해, 정렬된 순서상 가장 이른 키프레임 블록부터 다음을 수행합니다:

      1. 모든 선언 블록을 캐스케이드합니다. 각 CSS 속성(애니메이션이 불가능한 속성은 무시)은 모든 키프레임 블록 중 마지막 선언이 우선합니다. [CSS-CASCADE-4]

         참고: 캐스케이드는 축약 속성을 세부 속성으로 확장시키며, 각 논리적 속성 그룹 내에서 해당 속성 쌍을 element의 계산된 writing mode에 맞게 매핑합니다.

      2. 그룹의 keyframe offset, keyframe timing function, keyframe composite을 가진 새로운 빈 키프레임 keyframe을 keyframes에 추가합니다. keyframe values에는 캐스케이드된 선언 값 집합을 할당합니다.

      3. keyframe properties에 추가된 각 속성 이름을 animated properties에 추가합니다.

3. 초기 및 최종 프레임 생성:

   1. initial keyframe을 찾거나 생성합니다. 키프레임은 keyframe offset이 0%, keyframe timing function은 default timing function, keyframe composite은 default composite입니다.

   2. animated properties에 포함된 속성 중 0% 오프셋을 가진 키프레임에 존재하지 않거나, used keyframe order상 더 이른 위치에 없는 속성에 대해, element의 해당 속성 계산된 값을 initial keyframe의 keyframe values에 추가합니다.

   3. initial keyframe의 keyframe values가 비어 있지 않으면, initial keyframe을 keyframes 앞에 추가합니다.

   4. final keyframe에 대해서도 반복합니다. 오프셋은 100%를 사용하고, used keyframe order상 더 늦은 위치의 키프레임을 고려하며, keyframes 뒤에 추가합니다.

4. 프레임 정렬:

   • 지정된 순서는 위 단계에서 생성된 keyframes의 순서입니다. 즉, 문서 순서대로 중복 키프레임은 가장 앞의 위치로 합쳐집니다.

   • 계산된 순서는 keyframes의 순서입니다. getKeyframes()에서 반환됩니다. 오프셋이 <percentage>, from 키워드, to 키워드로 지정된 키프레임은 목록의 앞(생성된 initial keyframe 이후)에 이동시키고, keyframe offset별로 안정적으로 정렬합니다.

   • 사용된 순서는 keyframes를 애니메이션 효과의 타임라인에 배치하여 결정됩니다. iteration count가 1이라고 가정하고, 가장 빠른 것부터 늦은 것까지 정렬합니다. 동점은 계산된 순서로 해결합니다.

   이 명세에서 도입된 계산된 키프레임 정렬에 대한 구체적 요구 사항은 Web Animations § 5.3.3 Calculating computed keyframes에 통합되어야 합니다. 사용된 키프레임에 대한 요구 사항 역시 Web Animations § 5.3.4 The effect value of a keyframe effect에 통합되어야 합니다. 위의 키프레임 집합간의 구분 설명은 안내 노트로 이동해야 합니다.

   참고: 계산된 순서는 <percentage> 오프셋 키프레임을 정렬하지만, <timeline-range-name>으로 지정된 키프레임은 지정된 키프레임 순서를 유지합니다. (생성된 final keyframe을 제외한 <percentage> 키프레임 뒤에 위치) 이는 사용된 키프레임 순서상 더 늦게 와도 마찬가지입니다.

4. 애니메이션 선언

CSS 애니메이션은 animation-* 속성을 사용하여 키프레임을 요소에 바인딩함으로써 정의됩니다. 이 속성들은 모두 세부 속성(longhands)이며, animation 축약 속성(shorthand)의 구성 요소입니다. coordinating list property group을 형성하며, animation-name이 기본 속성이 되고, coordinated value list의 각 항목이 하나의 애니메이션 효과의 속성을 정의합니다.

CSS Values 4 § A Coordinating List-Valued Properties에서 개별 animation-* 속성값이 어떻게 조정되는지 확인할 수 있습니다.

4.1. animation-duration 속성

animation-duration 속성은 애니메이션에 연결된 iteration duration을 지정합니다.

auto

시간 기반 애니메이션에서는 0s와 동일합니다.

스크롤 기반 애니메이션에서는 animation-range, animation-delay, animation-iteration-count를 고려하여 타임라인을 채우는 데 필요한 지속 시간과 동일하게 간주됩니다. Scroll-driven Animations § 4.1 Finite Timeline Calculations 참고.

<time [0s,∞]>

시간 기반 애니메이션의 경우, 애니메이션이 한 번 완료되는 데 걸리는 시간 길이를 지정합니다. 음수 <time> 값은 허용되지 않습니다.

<time> 값이 0s인 경우(초기값과 같음), 해당 애니메이션의 키프레임은 효과가 없지만, 애니메이션 자체는 즉시 발생합니다. 구체적으로, 시작 및 종료 이벤트가 발생하며; animation-fill-mode가 backwards 또는 both로 설정된 경우, 애니메이션의 첫 프레임은 animation-direction에 따라, animation-delay 동안 표시됩니다. animation-delay 이후에는, animation-direction에 따라 애니메이션의 마지막 프레임이 표시되며, animation-fill-mode가 forwards 또는 both로 설정된 경우에 해당합니다. animation-fill-mode가 none이면 애니메이션은 시각적 효과가 없습니다.

스크롤 기반 애니메이션의 경우, auto로 처리됩니다.

4.2. animation-timing-function 속성

animation-timing-function은 타이밍 함수를 결정하는 데 사용되며, 각 키프레임에 적용됩니다. 자세한 내용은 § 3 키프레임 조립을 참고하세요.

4.3. animation-iteration-count 속성

animation-iteration-count 속성은 애니메이션에 연결된 반복 횟수를 지정합니다.

4.4. animation-direction 속성

animation-direction 속성은 애니메이션에 연결된 재생 방향을 지정합니다.

4.5. animation-play-state 속성

animation-play-state는 애니메이션을 일시정지하거나 재생하는 데 사용됩니다.

애니메이션이 처음 생성될 때를 포함하여 언제든지, 애니메이션에 해당하는 animation-play-state의 해석된 값이 새롭게 running이 되면, 구현체는 애니메이션 재생 절차를 auto-rewind flag를 false로 설정하여 수행해야 합니다.

애니메이션이 처음 생성될 때를 포함하여 언제든지, 애니메이션에 해당하는 animation-play-state의 해석된 값이 새롭게 paused가 되면, 구현체는 해당 애니메이션에 대해 애니메이션 일시정지 절차를 수행해야 합니다.

위 요구사항은 § 2 애니메이션에서 설명한 대로 Web Animations API에 의해 애니메이션의 플레이 상태가 오버라이드 되는 경우에는 적용되지 않습니다.

4.6. animation-delay 속성

animation-delay 속성은 애니메이션에 연결된 시작 지연을 지정합니다.

4.7. animation-fill-mode 속성

animation-fill-mode 속성은 애니메이션에 연결된 채우기 모드(fill mode)를 지정합니다.

4.8. animation-composition 속성

animation-composition 속성은 여러 애니메이션이 동시에 동일한 속성에 영향을 줄 때 사용하는 합성 연산(composite operation)을 정의합니다.

<single-animation-composition> = replace | add | accumulate

animation-composition의 값은 Web Animations에서 정의된 합성 연산(composite operation)의 해당 값과 동일한 의미를 가집니다. [WEB-ANIMATIONS]

키프레임에서 지정된 경우, animation-composition은 해당 키프레임에 지정된 각 속성에 대해 다음 키프레임이 해당 속성을 지정할 때까지 사용할 합성 연산을 정의합니다.

@keyframes heartbeat {
  from {
    scale: 1;
    animation-timing-function: ease-out;
  }
  30% {
    scale: 1.3;
  }
}
.heartbeat {
  animation: heartbeat 0.3s 2s infinite;
}

@keyframes throb {
  50% {
    scale: 1.8;
  }
}
.icon:mouseover {
  animation: throb 0.4s add;
}

.icon {
  filter: blur(20px);
  transition: filter 0.5s;
}
.icon:hover {
  filter: blur(0px);
  animation: brightness-pulse 3s infinite add;
}

@keyframes brightness-pulse {
  0% {
    scale: 1.1;
    filter: brightness(130%);
  }
  10% {
    scale: 1;
    filter: brightness(100%);
  }
}

4.9. animation-timeline 속성

animation-timeline 속성은 애니메이션에 사용할 타임라인을 정의합니다.

참고: 이 명세서는 애니메이션 타임라인을 지정하는 문법을 도입하지 않으며, 대신 Scroll-linked Animations [SCROLL-ANIMATIONS]와 같은 다른 명세에서 도입합니다.

<single-animation-timeline> = auto | none | <custom-ident> | <scroll()> | <view()>

animation-timeline 속성은 animation-name이나 animation-duration처럼 하나 이상의 값을 가질 수 있으며, 각각의 값은 해당 요소의 애니메이션에 추가 동작을 부여합니다. 타임라인과 애니메이션의 매칭 방식은 여기에서 설명합니다.

각 값의 타입은 <single-animation-timeline>이며, 가능한 값은 다음과 같습니다:

auto

애니메이션의 타임라인은 DocumentTimeline이며, 더 구체적으로 기본 문서 타임라인입니다.

none

애니메이션이 타임라인에 연결되지 않습니다.

<custom-ident>

요소 범위 내에 명명된 스크롤 진행 타임라인 또는 뷰 진행 타임라인이 존재하면, Scroll-driven Animations § 4.2 Named Timeline Scoping and Lookup에서 정의된 대로 참조된 타임라인을 사용합니다.

그렇지 않으면 애니메이션은 타임라인에 연결되지 않습니다.

<scroll()>

지정된 scroll() 함수로 표시된 스크롤 진행 타임라인을 사용합니다. Scroll-driven Animations § 2.2.1 The scroll() notation 참고.

<view()>

지정된 view() 함수로 표시된 뷰 진행 타임라인을 사용합니다. Scroll-driven Animations § 3.3.1 The view() notation 참고.

animation-name을 animation-timeline이 지정되지 않았을 때 타임라인 선택에 더 쉽게 활용할 수 있도록 개선 필요. animation-name을 키프레임과 타임라인 모두에 단일 이름으로 사용하면 일반적인 애니메이션을 더 간단하게 만들 수 있습니다. animation-timeline 속성은 키프레임과 타임라인을 독립적으로 선택할 수 있는 추가 제어를 제공합니다.

여러 animation-* 속성이 동시에 설정되었을 때, animation-timeline이 먼저 업데이트됩니다. 예를 들어 animation-play-state의 변경은 동시에 적용된 animation-timeline에 적용됩니다.

4.10. animation 단축 속성

animation 단축 속성의 문법은 다음과 같습니다:

<single-animation> = <'animation-duration'> || <easing-function> || <'animation-delay'> || <single-animation-iteration-count> || <single-animation-direction> || <single-animation-fill-mode> || <single-animation-play-state> || [ none | <keyframes-name> ] || <single-animation-timeline>

5. 애니메이션 이벤트

5.1. 이벤트 디스패치

참고, 이 내용은 CSS Animations Level 1 [CSS3-ANIMATIONS]보다 더 일반적인 이벤트 디스패치 설명이며, Web Animations API [WEB-ANIMATIONS]를 통해 애니메이션이 탐색(seek)되거나 반전(reversed)되는 가능성도 고려해야 하기 때문입니다.

CSS 애니메이션 이벤트의 대상은 해당 애니메이션의 소유 엘리먼트입니다. 소유 엘리먼트가 없으면 CSS 애니메이션 이벤트는 디스패치되지 않습니다. (Web Animations에 정의된 애니메이션 재생 이벤트는 해당 CSSAnimation 객체에서 여전히 디스패치됩니다.)

어떤 이벤트를 디스패치할지 결정하기 위해 Web Animations 모델에 정의된 페이즈를 사용합니다. 이 정의는 애니메이션 효과에 적용되지만, 이벤트 디스패치 목적상 CSS 애니메이션은 연결된 associated effect와 동일한 페이즈를 가진 것으로 간주합니다. 예를 들어, CSS 애니메이션의 before phase는 연결된 associated effect가 before phase일 때입니다.

연결된 associated effect가 없는 CSS 애니메이션은, current time이 unresolved일 때 idle phase로 간주하고, current time이 0보다 작으면 before phase, 그 외에는 after phase로 간주합니다.

마찬가지로 이후에 참조되는 start delay, active duration, current iteration, iteration start, iteration duration 등은 모두 해당 애니메이션의 associated effect의 속성을 참조한다고 이해해야 합니다.

각 이벤트의 elapsedTime 계산을 위해 아래 정의를 사용합니다:

• interval start = max(min(-start delay, active duration), 0)

• interval end = max(min(associated effect end - start delay, active duration), 0)

새로운 animation frame이 설정되고 애니메이션에 pending play task나 pending pause task가 없을 때, 아래와 같이 새로운 animation frame 설정 전후의 애니메이션 페이즈를 비교하여 디스패치할 이벤트를 결정합니다:

٭ 상태 변경에 여러 이벤트가 나열된 경우, 모두 나열된 순서로 즉시 연속적으로 디스패치됩니다.

† 경과 시간(elapsed time)은 animationiteration 이벤트에서 다음과 같이 정의됩니다:

1. previous current iteration을 직전 애니메이션 프레임의 current iteration으로 둡니다.

2. previous current iteration이 current iteration보다 크면 iteration boundary를 current iteration + 1로, 그렇지 않으면 current iteration으로 둡니다.

3. 경과 시간은 (iteration boundary - iteration start) × iteration duration 계산 결과입니다.

위 테이블과 절차에서 정의된 경과 시간은 밀리초(ms) 단위이므로, elapsedTime 멤버에 값을 할당하기 전 AnimationEvent 객체에 1,000으로 나누어 초(second) 단위로 변환해야 합니다.

6. DOM 인터페이스

6.1. CSSAnimation 인터페이스

[Exposed=Window]
interface CSSAnimation : Animation {
  readonly attribute CSSOMString animationName;
};

animationName, 타입 CSSOMString, 읽기 전용

애니메이션이 생성될 때 associated effect를 정의하는 일치하는 키프레임 규칙을 찾기 위한 키입니다. 이 값은 이 객체가 생성되게 한 animation-name 속성의 값입니다.

6.2. 보류 중인 스타일 변경에 대한 요구사항

다양한 동작들이 요소의 계산값(computed values)에 영향을 줄 수 있습니다. 사용자 에이전트는 최적화를 위해 필요해질 때까지 이러한 값의 재계산을 미룰 수 있습니다. 그러나 이 명세에 정의된 프로그래밍 인터페이스의 모든 동작은 물론, Web Animations [WEB-ANIMATIONS]에서 정의된 객체나 애니메이션 상태를 반환할 수 있는 동작도, 이러한 계산값의 보류 중인 변경을 모두 처리한 상태와 일관된 결과를 생성해야 합니다.

elem.style.animation = 'fadeOut 1s';
elem.getAnimations()[0].pause();

elem.style.animation = 'fadeOut 1s paused';
const anim = elem.getAnimations()[0];
elem.style.animationPlayState = 'running';
console.log(anim.playState); // 'running'이어야 합니다.

7. 개인정보 보호 고려사항

이 명세에 대해 보고된 개인정보 보호 이슈는 없습니다.

8. 보안 고려사항

이 명세에 대해 보고된 보안 이슈는 없습니다.

9. 변경사항

9.1. 최근 변경사항

2023년 3월 2일 워킹 드래프트(2 March 2023 Working Draft) 이후의 변경사항:

• auto를 초기값으로 animation-duration에 추가. (Issue 6530)
• § 3.2 키프레임 처리를 캐스케이드로 재사용하도록 재작성, 퍼센트가 아닌 키프레임 오프셋 처리, [0,1] 범위 바깥의 키프레임 오프셋 처리, animation-composition 값을 기본 합성으로 사용하도록 변경.
• display: none이 애니메이션을 취소하는 경우를 축소. (Issue 6429)
• CSS Values 4 § A Coordinating List-Valued Properties와 교차링크하여 다양한 animation-* 속성의 상호작용 정의.
• 애니메이션 속성 중 animation-timeline이 먼저 적용됨을 명확히 함.

9.2. CSS Animations, Level 1 이후 변경사항

• CSS 애니메이션과 Web Animations의 상호작용 정의, 소유 엘리먼트와 애니메이션 합성 순서 개념 도입.
• 키프레임 객체 생성 방식 상세 기술.
• animation-composition 속성 도입, 여러 애니메이션이 동시에 동일한 속성에 영향을 줄 때 사용하는 합성 연산 정의.
• animation-timeline 속성 도입, 애니메이션에 사용할 타임라인을 정의.
• animation 단축 속성 업데이트, 새로운 속성 반영.
• 애니메이션 이벤트 디스패치에 대한 설명 추가.
• CSSAnimation 인터페이스 추가.
• 보류 중인 스타일 변경에 대한 요구사항 기술.