CSS 애니메이션 레벨 1

1. 소개

이 섹션은 규범적인 내용이 아닙니다

CSS 트랜지션 [CSS3-TRANSITIONS]은 CSS 속성 값이 변경될 때 그 값을 보간하는 방법을 제공합니다. 이를 통해 간단한 애니메이션을 쉽게 만들 수 있지만, 애니메이션의 시작 및 종료 상태는 기존 속성 값에 의해 제어되며, 트랜지션은 애니메이션이 진행되는 방식에 대해 작성자가 제어할 수 있는 부분이 적습니다.

이 제안은 작성자가 시간에 따라 CSS 속성의 변화를 키프레임 세트로 지정할 수 있는 정의된 애니메이션을 도입합니다. 애니메이션은 트랜지션처럼 시간에 따라 CSS 속성의 표현 값을 변경한다는 점에서 비슷합니다. 주된 차이점은 트랜지션은 속성 값이 변경될 때 암묵적으로 트리거되는 반면, 애니메이션은 애니메이션 속성이 적용될 때 명시적으로 실행된다는 것입니다. 이러한 이유로, 애니메이션은 애니메이션되는 속성의 명시적인 값이 필요합니다. 이러한 값은 아래에서 설명하는 애니메이션 키프레임을 사용해 지정됩니다.

애니메이션의 반복 횟수, 시작 및 종료 값 사이의 교대 여부, 애니메이션의 실행 또는 일시정지 상태, 시작 지연 등 애니메이션의 다양한 측면을 제어할 수 있습니다.

1.1. 값 정의

이 명세는 CSS 속성 정의 규칙을 [CSS2]에서 따르며, 값 정의 문법을 [CSS-VALUES-3]에서 사용합니다. 이 명세에서 정의되지 않은 값 유형은 CSS Values & Units [CSS-VALUES-3]에서 정의됩니다. 다른 CSS 모듈과의 결합으로 값 유형의 정의가 확장될 수 있습니다.

각 속성 정의에 명시된 속성별 값 외에도, 이 명세에서 정의된 모든 속성은 CSS 전체 키워드를 속성 값으로 사용할 수 있습니다. 가독성을 위해 명시적으로 반복하지 않았습니다.

2. 애니메이션

CSS 애니메이션은 계산된 속성 값에 영향을 미칩니다. 이 효과는 CSS cascade ([CSS3CASCADE]) 내에서 (CSS 애니메이션 수준에서) 지정된 값을 추가하여 애니메이션의 현재 상태에 맞는 올바른 계산값을 생성함으로써 발생합니다. [CSS3CASCADE]에서 정의된 바와 같이, 애니메이션은 모든 일반 규칙을 오버라이드하지만, !important 규칙에 의해 오버라이드됩니다.

일정 시점에 여러 애니메이션이 동일한 속성에 대해 동작을 지정하는 경우, animation-name 값에서 마지막에 나타나는 애니메이션이 해당 시점에서 다른 애니메이션을 오버라이드합니다.

애니메이션은 적용되기 전에는 계산된 값에 영향을 주지 않으며 (즉, animation-name 속성이 요소에 설정될 때), 또는 제거된 후에도 영향을 주지 않습니다. 또한 일반적으로 애니메이션 지연이 끝나기 전이나 애니메이션이 끝난 후에는 계산값에 영향을 주지 않지만, animation-fill-mode 속성에 따라 달라질 수 있습니다.

실행 중일 때, 애니메이션은 애니메이션된 속성의 값을 계산합니다. 다른 값은 CSS cascade ([CSS3CASCADE])에 따라 애니메이션 값보다 우선될 수 있습니다.

애니메이션이 적용되어 있지만 끝나지 않았거나, 끝났지만 animation-fill-mode가 forwards 또는 both인 경우, 사용자 에이전트는 요소의 will-change 속성 ([css-will-change-1])이 해당 애니메이션이 애니메이션하는 모든 속성을 추가로 포함하는 것처럼 동작해야 합니다.

애니메이션의 시작 시간은 애니메이션을 적용하는 스타일과 해당하는 @keyframes 규칙이 모두 해석되는 시간입니다. 요소에 애니메이션이 지정되어 있지만 해당하는 @keyframes 규칙이 아직 존재하지 않으면, 애니메이션은 시작할 수 없습니다. 일치하는 @keyframes 규칙이 해석될 수 있게 되면 애니메이션은 처음부터 시작합니다. 요소의 스타일을 동적으로 수정하여 지정된 애니메이션은 해당 스타일이 해석될 때 시작되며, hover와 같은 의사 스타일 규칙의 경우 즉시 시작될 수 있고, 스크립트에 의해 스타일이 적용된 경우 브라우저로 스크립팅 엔진이 제어를 반환할 때 시작될 수 있습니다. 키프레임 스타일 규칙을 동적으로 업데이트해도 애니메이션이 시작되거나 재시작되지는 않습니다.

애니메이션은 그 이름이 animation-name 속성의 계산된 값 중 하나의 식별자로 나타나고, 애니메이션이 유효한 @keyframes 규칙을 사용할 때 요소에 적용됩니다. 애니메이션이 시작되면 종료되거나 animation-name이 제거될 때까지 계속됩니다. 애니메이션 속성의 값이 애니메이션 실행 중에 변경되면, 애니메이션이 시작했을 때 해당 값이 적용된 것처럼 동작합니다. 예를 들어, animation-delay를 짧게 하면, 애니메이션이 앞으로 점프하거나 즉시 끝나 animationend 이벤트가 발생할 수 있습니다. 반대로, animation-delay를 늘리면 애니메이션이 다시 시작되고 animationstart 이벤트가 발생할 수 있습니다.

동일한 @keyframes 규칙 이름은 animation-name 내에서 반복될 수 있습니다. animation-name을 변경하면, 새로운 애니메이션 목록을 마지막부터 처음까지 반복하여, 각 애니메이션에 대해 기존 애니메이션 목록에서 마지막으로 일치하는 애니메이션을 찾습니다. 일치 항목이 있으면, 기존 애니메이션은 새로운 애니메이션 목록에서 해당 위치의 애니메이션 속성으로 갱신되며, 현재 재생 시간은 위에서 설명한 대로 유지됩니다. 일치한 애니메이션은 기존 애니메이션 목록에서 제거되어 두 번 일치하지 않습니다. 일치 항목이 없으면 새 애니메이션이 생성됩니다. 결과적으로 animation-name을 ‘a’에서 ‘a, a’로 변경하면 기존 ‘a’ 애니메이션이 목록의 두 번째 애니메이션이 되고, 첫 번째 항목에 대해 새 애니메이션이 생성됩니다.

div {
  animation-name: diagonal-slide;
  animation-duration: 5s;
  animation-iteration-count: 10;
}

@keyframes diagonal-slide {

  from {
    left: 0;
    top: 0;
  }

  to {
    left: 100px;
    top: 100px;
  }

}

display 속성을 none으로 설정하면 해당 요소 및 그 자손에 적용된 실행 중인 애니메이션이 종료됩니다. 요소의 display가 none인 경우, display를 none이 아닌 값으로 변경하면, animation-name 속성으로 요소에 적용된 모든 애니메이션과, display가 none이 아닌 자손에 적용된 모든 애니메이션이 시작됩니다.

작성자는 애니메이션을 이용해 동적으로 변화하는 콘텐츠를 만들 수 있지만, 동적으로 변화하는 콘텐츠는 일부 사용자에게 발작을 유발할 수 있습니다. 발작을 유발할 수 있는 콘텐츠를 피하는 방법은 Guideline 2.3: Seizures: 발작을 유발하는 것으로 알려진 방식으로 콘텐츠를 설계하지 마십시오 ([WCAG20])을 참조하세요.

구현체는 렌더링 미디어가 상호작용적이지 않을 때(예: 인쇄 시) 애니메이션을 무시할 수 있습니다. 향후 버전의 이 명세에서는 이러한 미디어에 대한 애니메이션 렌더링 방법을 정의할 수 있습니다.

3. 키프레임

키프레임은 애니메이션이 진행되는 동안 애니메이션되는 속성의 값을 다양한 시점에 지정하는 데 사용됩니다. 키프레임은 애니메이션의 한 사이클의 동작을 지정하며, 애니메이션은 0회 이상 반복될 수 있습니다.

키프레임은 다음과 같이 정의된 @keyframes at-규칙을 사용하여 지정합니다:

@keyframes = @keyframes <keyframes-name> { <rule-list> }

<keyframes-name> = <custom-ident> | <string>

<keyframe-block> = <keyframe-selector># { <declaration-list> }

<keyframe-selector> = from | to | <percentage [0,100]>

<rule-list>는 @keyframes 내부에서 <keyframe-block> 규칙만 포함할 수 있습니다.

<declaration-list>는 <keyframe-block> 내부에서 이 명세에서 정의된 속성을 제외한 모든 CSS 속성을 허용하지만, animation-timing-function 속성은 허용되며 특별하게 해석됩니다. 모든 속성은 cascade와 상호작용하지 않으므로 !important를 사용하면 무효이며, 해당 속성은 무시됩니다.

@keyframes 블록은 프렐루드에 있는 <custom-ident> 또는 <string> 값으로 이름이 지정됩니다. 두 문법은 기능적으로 동등하며, 이름은 ident 또는 string의 값입니다. <custom-ident>와 <string>은 일반적으로 완전히 대소문자 구분되며, 두 이름이 코드포인트별로 동일할 때만 같다고 봅니다. <custom-ident>는 none 키워드를 추가로 제외합니다.

@keyframes foo { /* ... */ }
@keyframes "foo" { /* ... */ }

@keyframes FOO { /* ... */ }

@keyframes initial { /* ... */ }
@keyframes None { /* ... */ }

@keyframes "initial" { /* ... */ }
@keyframes "None" { /* ... */ }

<keyframe-selector>는 <keyframe-block>에 대해 쉼표로 구분된 백분율 값 또는 from 또는 to 키워드로 구성됩니다. 선택자는 키프레임이 애니메이션의 전체 지속 시간 중 어느 시점에 해당하는지 백분율로 지정합니다. 키프레임은 선택자에 선언된 속성 값 블록으로 지정됩니다. from 키워드는 0% 값과 동일하며, to 키워드는 100% 값과 동일합니다. 0% 미만이나 100% 초과 값은 무효이며, 해당 <keyframe-block>은 무시됩니다.

백분율 값에는 반드시 단위(%)가 포함되어야 합니다. 따라서 0은 유효한 키프레임 선택자가 아닙니다.

0% 또는 from 키프레임이 지정되지 않으면, 사용자 에이전트가 애니메이션될 속성의 계산된 값으로 0% 키프레임을 생성합니다. 100% 또는 to 키프레임이 지정되지 않으면, 사용자 에이전트가 애니메이션될 속성의 계산된 값으로 100% 키프레임을 생성합니다.

<keyframe-block>에는 속성과 값이 포함됩니다. 이 명세에서 정의된 속성은 animation-timing-function을 제외하고 무시됩니다. 또한 !important가 붙은 속성은 무효이며 무시됩니다.

동일한 이름의 @keyframes 규칙이 여러 개 정의된 경우, 문서 순서상 마지막 규칙만 적용되며, 그 이전 규칙들은 모두 무시됩니다.

div {
  animation-name: slide-right;
  animation-duration: 2s;
}

@keyframes slide-right {

  from {
    margin-left: 0px;
  }

  50% {
    margin-left: 110px;
    opacity: 1;
  }

  50% {
    opacity: 0.9;
  }

  to {
    margin-left: 200px;
  }

}

@keyframes slide-right {

  from {
    margin-left: 0px;
  }

  50% {
    margin-left: 110px;
    opacity: 0.9;
  }

  to {
    margin-left: 200px;
  }

}

키프레임 집합을 결정할 때, 선택자에 있는 모든 값은 시간 기준으로 오름차순 정렬됩니다. @keyframes 규칙 내의 규칙은 cascade되며, 동일한 선택자 값에 대해 여러 @keyframes 규칙의 속성이 적용될 수 있습니다.

특정 키프레임에 대해 속성이 지정되지 않았거나, 지정되었지만 무효인 경우 해당 속성의 애니메이션은 해당 키프레임이 존재하지 않는 것처럼 진행됩니다. 개념적으로, 모든 키프레임에 등장하는 각 속성에 대해 키프레임 집합이 만들어지고, 각 속성마다 독립적으로 애니메이션이 실행되는 것과 같습니다.

@keyframes wobble {
  0% {
    left: 100px;
  }

  40% {
    left: 150px;
  }

  60% {
    left: 75px;
  }

  100% {
    left: 100px;
  }
}

"wobble"라는 이름의 애니메이션에 대해 네 개의 키프레임이 지정되어 있습니다. 첫 번째 키프레임(애니메이션 사이클의 시작)에서는 애니메이션되는 left 속성 값이 100px입니다. 애니메이션 기간의 40% 시점에서 left는 150px로 애니메이션됩니다. 60% 시점에서는 left가 다시 75px로 이동합니다. 사이클의 마지막에는 left 값이 100px으로 돌아옵니다. 아래 다이어그램은 애니메이션 기간이 10s일 때의 상태를 보여줍니다.

이 명세는 CSS 트랜지션의 트랜지션 적용 섹션처럼, 키프레임에서 값이 어떻게 결정되는지 정의되어야 합니다.

3.1. 키프레임의 타이밍 함수

키프레임 스타일 규칙에서는 애니메이션이 다음 키프레임으로 이동할 때 사용할 타이밍 함수를 선언할 수도 있습니다.

@keyframes bounce {

  from {
    top: 100px;
    animation-timing-function: ease-out;
  }

  25% {
    top: 50px;
    animation-timing-function: ease-in;
  }

  50% {
    top: 100px;
    animation-timing-function: ease-out;
  }

  75% {
    top: 75px;
    animation-timing-function: ease-in;
  }

  to {
    top: 100px;
  }

}

to 또는 100% 키프레임에 지정된 타이밍 함수는 무시됩니다.

자세한 내용은 animation-timing-function 속성을 참조하세요.

3.2. animation-name 속성

animation-name 속성은 적용할 애니메이션 목록을 정의합니다. 각 이름은 애니메이션에 대한 속성 값을 제공하는 키프레임 at-규칙을 선택하는 데 사용됩니다. 이름이 어떠한 키프레임 at-규칙과도 일치하지 않으면 애니메이션되는 속성이 없으므로 애니메이션이 실행되지 않습니다. 또한, 애니메이션 이름이 none이면 애니메이션이 없습니다. 이는 cascade로부터 오는 애니메이션을 덮어쓰는 데 사용할 수 있습니다. 여러 애니메이션이 동일한 속성을 수정하려고 할 경우, 이름 목록의 끝에 가까운 애니메이션이 우선합니다.

이름으로 나열된 각 애니메이션은 아래에 나열된 다른 애니메이션 속성에 대해 해당하는 값을 가져야 합니다. 다른 애니메이션 속성의 값 목록 길이가 같지 않으면, animation-name 목록의 길이가 애니메이션 시작 시 각 목록에서 검사할 항목 수를 결정합니다. 목록은 첫 번째 값부터 맞춰집니다. 끝에 초과된 값은 사용되지 않습니다. 다른 속성 중 값이 부족하면, UA는 목록 값을 반복해서 충분히 채웁니다. 이 잘림 또는 반복은 계산된 값에는 영향을 주지 않습니다.

참고: 이는 background-* 속성의 동작과 유사하며, background-image는 animation-name과 유사하게 동작합니다.

animation-name 값의 의미는 다음과 같습니다:

none

키프레임이 전혀 지정되지 않으므로 애니메이션이 없습니다. 이 애니메이션에 대해 지정된 다른 애니메이션 속성은 아무 효과가 없습니다.

<keyframes-name>

애니메이션은 지정된 <keyframes-name> 이름의 키프레임을 사용합니다(존재하는 경우). 해당 이름의 @keyframes 규칙이 없으면 애니메이션이 없습니다.

3.3. animation-duration 속성

animation-duration 속성은 단일 애니메이션 사이클의 지속 시간을 정의합니다.

<time [0s,∞]>

<time>은 애니메이션이 한 사이클을 완료하는 데 걸리는 시간을 지정합니다. 음수 <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이면, 애니메이션은 시각적 효과가 없습니다.

3.4. animation-timing-function 속성

animation-timing-function 속성은 애니메이션이 각 키프레임 쌍 사이에서 어떻게 진행될지 기술합니다. 타이밍 함수는 별도의 CSS Easing Functions 모듈 [css-easing-1]에서 정의됩니다.

사용되는 input progress value는 animation-direction 속성의 효과가 적용된 후, 현재 키프레임과 다음 키프레임 사이에 경과한 시간의 백분율입니다.

animation-delay 동안에는 animation-timing-function이 적용되지 않습니다.

참고: 이 정의가 필요한 이유는, 그렇지 않으면 step easing function의 step position이 start일 때, 함수의 첫 단계 꼭대기와 동일한 backwards fill이 생성되기 때문입니다.

output progress value는 현재 키프레임과 다음 키프레임 사이의 속성 값을 보간할 때 p 값으로 사용됩니다.

키프레임에서 지정된 경우, animation-timing-function은 애니메이션되는 속성에 대해 현재 키프레임과 다음 키프레임(정렬된 키프레임 선택자 순서, 암시적 100% 키프레임일 수 있음) 사이의 애니메이션 진행을 정의합니다.

3.5. animation-iteration-count 속성

animation-iteration-count 속성은 애니메이션 사이클이 재생되는 횟수를 지정합니다. 초기값은 1로, 애니메이션이 처음부터 끝까지 한 번만 재생됨을 의미합니다. 이 속성은 종종 animation-direction 값이 alternate일 때 함께 사용되며, 이 경우 애니메이션이 번갈아 역방향으로 재생됩니다.

애니메이션이 활성화되는 시간 창 (duration x iteration-count) 을 active duration이라고 합니다.

<single-animation-iteration-count> = infinite | <number [0,∞]>

infinite

애니메이션이 무한 반복됩니다.

<number [0,∞]>

애니메이션은 지정한 횟수만큼 반복됩니다. 숫자가 정수가 아니면, 애니메이션은 마지막 사이클 중간에 종료됩니다. 음수 숫자는 무효입니다.

0 값도 유효하며, animation-duration이 0s일 때와 마찬가지로, 애니메이션이 즉시 발생합니다.

애니메이션의 지속 시간이 0s이면, animation-iteration-count의 모든 유효 값(예: infinite)에 대해 즉시 애니메이션이 발생합니다.

3.6. animation-direction 속성

animation-direction 속성은 애니메이션이 일부 또는 모든 사이클에서 역방향으로 재생되어야 하는지 정의합니다. 애니메이션이 역방향으로 재생될 때는 타이밍 함수도 역방향으로 적용됩니다. 예를 들어, 역방향으로 재생할 때 ease-in 애니메이션은 ease-out 애니메이션처럼 보입니다.

<single-animation-direction> = normal | reverse | alternate | alternate-reverse

normal

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

reverse

애니메이션의 모든 반복이 지정된 방식과 반대 방향으로 재생됩니다.

alternate

애니메이션 사이클의 홀수 번째 반복은 정상 방향으로, 짝수 번째 반복은 역방향으로 재생됩니다.

alternate-reverse

애니메이션 사이클의 홀수 번째 반복은 역방향으로, 짝수 번째 반복은 정상 방향으로 재생됩니다.

참고: 반복이 홀수인지 짝수인지 판단할 때 반복은 1부터 셉니다.

3.7. animation-play-state 속성

animation-play-state 속성은 애니메이션이 실행 중인지 일시정지 상태인지를 정의합니다.

<single-animation-play-state> = running | paused

running

이 속성이 running으로 설정되어 있으면, 애니메이션은 정상적으로 진행됩니다.

paused

이 속성이 paused로 설정되어 있으면, 애니메이션이 일시정지됩니다. 애니메이션은 일시정지되기 전까지의 진행 상태로 요소에 계속 적용됩니다. 다시 running으로 변경하면, 중단된 시점부터 다시 시작합니다. 즉, 애니메이션을 제어하는 "시계"가 멈췄다가 다시 시작된 것처럼 동작합니다.

애니메이션 지연 단계에서 paused로 설정되면, 지연 타이머도 일시정지되며, animation-play-state가 다시 running으로 바뀌는 순간 다시 시작됩니다.

3.8. animation-delay 속성

animation-delay 속성은 애니메이션이 언제 시작할지를 정의합니다. 이 속성을 사용하면 애니메이션이 적용된 후 일정 시간 후에 실행을 시작하거나, 적용되기 이전에 이미 실행이 시작된 것처럼 보이게 할 수 있습니다.

<time>

<time>은 애니메이션이 시작되는 시점(이 속성들을 통해 요소에 애니메이션이 적용된 시점)과 실제 실행이 시작되는 시점 사이의 지연 시간을 정의합니다. 0s (초기값)이면 애니메이션은 적용되는 즉시 실행됩니다.

음수 지연 값도 유효합니다. 0s 지연과 유사하게, 애니메이션이 즉시 실행되지만, 지연의 절대값만큼 자동으로 진행된 것처럼 처리되어, 애니메이션이 지정된 시간 전에 시작된 것처럼 보입니다. 따라서 active duration의 중간에서 시작하는 것처럼 나타납니다. 만약 애니메이션의 키프레임에 암시적 시작값이 있으면, 애니메이션이 시작되는 시점의 값을 사용하며, 과거의 값을 사용하지 않습니다.

3.9. animation-fill-mode 속성

animation-fill-mode 속성은 애니메이션이 실행되지 않는 시간에 어떤 값이 적용될지 정의합니다. 기본적으로 애니메이션은 적용된 시점(animation-name 속성이 요소에 설정된 시점)과 실제 실행되는 시점(animation-delay 속성에 의해 결정됨) 사이에는 속성 값에 영향을 주지 않습니다. 또한, 애니메이션이 끝난 후(animation-duration 및 animation-iteration-count 속성에 의해 결정됨)에는 영향이 없습니다. animation-fill-mode 속성은 이러한 동작을 변경할 수 있습니다. 속성의 동적 업데이트는 필요에 따라 애니메이션 지연 중이나 애니메이션 종료 후에도 속성 값에 반영됩니다.

<single-animation-fill-mode> = none | forwards | backwards | both

none

애니메이션이 적용되어 있지만 실행 중이 아닐 때는 아무런 효과가 없습니다.

forwards

애니메이션이 끝난 후(animation-iteration-count에 의해 결정됨), 애니메이션은 종료 시점의 속성 값을 적용합니다. animation-iteration-count가 0보다 큰 정수인 경우, 마지막으로 완료된 반복의 종료값이 적용됩니다(다음 반복의 시작값이 아니라). animation-iteration-count가 0이면, 첫 번째 반복의 시작값이 적용됩니다(animation-fill-mode가 backwards인 경우와 동일).

backwards

animation-delay로 정의된 기간 동안, 애니메이션은 첫 번째 반복이 시작될 때의 키프레임 값(즉, from 키프레임, animation-direction이 normal 또는 alternate인 경우) 또는 to 키프레임 값(animation-direction이 reverse 또는 alternate-reverse인 경우)을 적용합니다.

both

forwards와 backwards fill의 효과가 모두 적용됩니다.

3.10. animation 단축 속성

animation 단축 속성은 애니메이션 정의의 쉼표로 구분된 목록입니다. 목록의 각 항목은 단축 속성의 모든 하위 속성(즉, 애니메이션 속성)의 값을 제공합니다. (다른 애니메이션 속성의 값 목록 길이가 다를 때 어떻게 처리되는지는 animation-name 정의를 참고하세요. animation 단축 속성만 사용할 때는 이 문제가 발생하지 않습니다.)

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

각 애니메이션 정의 내에서 값의 순서가 중요합니다: 각 <single-animation>에서 <time>로 해석될 수 있는 첫 번째 값은 animation-duration에, 두 번째 <single-animation>에서 <time>로 해석될 수 있는 값은 animation-delay에 할당됩니다.

각 애니메이션 정의 내에서 <keyframes-name> 값을 다른 키워드와 구분하는 데에도 순서가 중요합니다. 파싱 시, 단축 속성에서 이전에 찾지 못한 다른 속성에 유효한 키워드는 animation-name이 아닌 다른 속성에 적용되어야 합니다. 또한, 직렬화 시에는 animation-name이 다른 속성 값이 될 수 있음을 구분하기 위해 최소한의 경우에 다른 속성의 기본값을 출력해야 하며, 추가로 출력할 수도 있습니다.

4. 애니메이션 이벤트

여러 애니메이션 관련 이벤트가 DOM Event 시스템을 통해 제공됩니다. 애니메이션의 시작 및 종료, 그리고 각 반복의 종료 시 DOM 이벤트가 발생합니다. 하나의 요소에서 여러 속성이 동시에 애니메이션될 수 있습니다. 이는 하나의 animation-name 값이 여러 속성을 포함한 키프레임을 가지거나, 복수의 animation-name 값을 가질 때 발생할 수 있습니다. 이벤트 측면에서 각 animation-name은 하나의 애니메이션을 지정하므로, 이벤트는 각 animation-name 값마다 발생하며, 애니메이션되는 각 속성마다 발생하는 것은 아닙니다.

유효한 키프레임 규칙이 정의된 모든 애니메이션은 실행되고 이벤트를 발생시킵니다. 이는 키프레임 규칙이 비어 있어도 해당됩니다.

애니메이션이 실행된 시간은 각 이벤트와 함께 제공됩니다. 이를 통해 이벤트 핸들러는 반복 애니메이션의 현재 반복 또는 교대 애니메이션의 현재 위치를 알 수 있습니다. 이 시간에는 paused 상태에서의 시간은 포함되지 않습니다.

4.1. AnimationEvent 인터페이스

AnimationEvent 인터페이스는 애니메이션 이벤트에 연결된 특정 컨텍스트 정보를 제공합니다.

4.1.1. IDL 정의

[Exposed=Window]
interface AnimationEvent : Event {
  constructor(CSSOMString type, optional AnimationEventInit animationEventInitDict = {});
  readonly attribute CSSOMString animationName;
  readonly attribute double elapsedTime;
  readonly attribute CSSOMString pseudoElement;
};
dictionary AnimationEventInit : EventInit {
  CSSOMString animationName = "";
  double elapsedTime = 0.0;
  CSSOMString pseudoElement = "";
};

4.1.2. 속성

animationName, 타입 CSSOMString, 읽기 전용

이벤트가 발생한 애니메이션의 animation-name 속성 값입니다.

elapsedTime, 타입 double, 읽기 전용

이벤트가 발생했을 때 애니메이션이 실행된 시간(초 단위, 일시정지된 시간 제외)입니다. 이 멤버의 정확한 계산은 각 이벤트 타입에 따라 정의되어 있습니다.

pseudoElement, 타입 CSSOMString, 읽기 전용

애니메이션이 실행되는 CSS 의사 요소의 이름(::으로 시작, 이 경우 이벤트 대상은 해당 의사 요소의 연결된 요소), 또는 애니메이션이 요소에서 실행되는 경우 빈 문자열(이 경우 이벤트 대상은 해당 요소)입니다.

AnimationEvent(type, animationEventInitDict) 는 이벤트 생성자입니다.

4.2. AnimationEvent의 종류

발생할 수 있는 애니메이션 이벤트의 유형은 다음과 같습니다:

animationstart

animationstart 이벤트는 애니메이션이 시작될 때 발생합니다. animation-delay가 있으면 지연 기간이 끝난 후 이벤트가 발생합니다.

음수 delay가 있으면, elapsedTime 값이 delay의 절대값(최대 active duration 까지)으로 설정되어 발생합니다. min(max(-animation-delay, 0), active duration); 이 경우 이벤트는 animation-play-state가 running이든 paused이든 발생합니다.

• 버블링: 예
• 취소 가능: 아니오
• 컨텍스트 정보: animationName, elapsedTime, pseudoElement

animationend

animationend 이벤트는 애니메이션이 완료될 때 발생합니다. 이때 이벤트의 elapsedTime 값은 active duration과 같습니다.

• 버블링: 예
• 취소 가능: 아니오
• 컨텍스트 정보: animationName, elapsedTime, pseudoElement

animationiteration

animationiteration 이벤트는 애니메이션의 각 반복이 끝날 때 발생합니다(단, 동일한 시점에 animationend 이벤트가 발생하는 경우 제외). 즉, 반복 횟수가 1 이하인 애니메이션에는 이 이벤트가 발생하지 않습니다.

이때 elapsedTime 값은 현재 반복 × animation-duration 입니다. 현재 반복은 0부터 시작하는 인덱스입니다. 예를 들어, 음수 animation-delay가 없는 경우, 첫 번째 반복이 끝나면 현재 반복 값은 1입니다.

• 버블링: 예
• 취소 가능: 아니오
• 컨텍스트 정보: animationName, elapsedTime, pseudoElement

animationcancel

animationcancel 이벤트는 animationend 이벤트가 발생하지 않는 방식으로 애니메이션 실행이 중단될 때 발생합니다(예: animation-name 변경으로 애니메이션이 제거되거나, 애니메이션 요소 또는 그 상위 요소가 display:none이 된 경우).

이 이벤트의 elapsedTime 값은 애니메이션이 취소된 시점까지 경과된 초 단위 시간입니다. 일시정지된 시간은 제외됩니다. 만약 애니메이션에 음수 animation-delay가 있으면, 애니메이션 시작 시점은 실제 트리거된 시점보다 animation-delay 초만큼 이전입니다. 반대로 양수 animation-delay가 있고, 애니메이션 지연이 끝나기 전에 이벤트가 발생하면 elapsedTime 값은 0입니다.

• 버블링: 예
• 취소 가능: 아니오
• 컨텍스트 정보: animationName, elapsedTime, pseudoElement

4.3. 요소, Document 객체, Window 객체의 이벤트 핸들러

다음은 모든 HTML 요소가 이벤트 핸들러 콘텐츠 속성 및 이벤트 핸들러 IDL 속성 모두로 지원해야 하는 이벤트 핸들러와 이벤트 타입입니다. 또한, 모든 Document 및 Window 객체는 이벤트 핸들러 IDL 속성으로 지원해야 합니다:

5. DOM 인터페이스

CSS 애니메이션은 keyframes를 설명하는 새로운 인터페이스 쌍을 통해 CSSOM에 노출됩니다.

참고: 아래 정의된 인터페이스는 이 명세 레벨에서 상호운용 가능한 API를 반영합니다. 향후 레벨에서는 API 일부가 더 이상 사용되지 않거나 확장될 수 있습니다.

5.1. CSSRule 인터페이스

다음 두 규칙 타입이 CSSRule 인터페이스에 추가됩니다. 이들은 새로운 keyframe 및 keyframes 규칙을 식별합니다.

5.1.1. IDL 정의

partial interface CSSRule {
    const unsigned short KEYFRAMES_RULE = 7;
    const unsigned short KEYFRAME_RULE = 8;
};

5.2. CSSKeyframeRule 인터페이스

CSSKeyframeRule 인터페이스는 단일 key에 대한 스타일 규칙을 나타냅니다.

5.2.1. IDL 정의

[Exposed=Window]
interface CSSKeyframeRule : CSSRule {
  attribute CSSOMString keyText;
  [SameObject, PutForwards=cssText] readonly attribute CSSStyleDeclaration style;
};

5.2.2. 속성

keyText, 타입 CSSOMString

이 속성은 키프레임 선택자를 퍼센트 값의 쉼표 구분 목록 형태로 나타냅니다. from과 to 키워드는 각각 0%와 100%에 대응됩니다.

keyText를 잘못된 키프레임 선택자로 갱신하면 SyntaxError 예외가 발생하며, keyText 값은 변경되지 않습니다.

style, 타입 CSSStyleDeclaration, 읽기 전용

해당 키프레임 규칙에 대한 CSSStyleDeclaration 객체를 반환해야 하며, 다음 속성을 가집니다:

읽기 전용 플래그

설정하지 않음.

선언

규칙에 선언된 선언들, 지정된 순서대로.

상위 CSS 규칙

context object(즉, 이 CSSKeyframeRule).

소유 노드

null.

5.3. CSSKeyframesRule 인터페이스

CSSKeyframesRule 인터페이스는 하나의 애니메이션에 대한 전체 keyframes 집합을 나타냅니다.

5.3.1. IDL 정의

[Exposed=Window]
interface CSSKeyframesRule : CSSRule {
           attribute CSSOMString name;
  readonly attribute CSSRuleList cssRules;
  readonly attribute unsigned long length;

  getter CSSKeyframeRule (unsigned long index);
  undefined        appendRule(CSSOMString rule);
  undefined        deleteRule(CSSOMString select);
  CSSKeyframeRule? findRule(CSSOMString select);
};

5.3.2. 속성

name, 타입 CSSOMString

이 속성은 animation-name 속성에서 사용되는 keyframes의 이름입니다.

cssRules, 타입 CSSRuleList, 읽기 전용

이 속성을 통해 목록의 keyframes에 접근할 수 있습니다.

length, 타입 unsigned long, 읽기 전용

목록에 있는 keyframe의 개수입니다.

5.3.3. 인덱스 속성 getter

indexed property getter는 keyframes 목록에서 지정된 위치의 CSSKeyframeRule 을 반환합니다.

파라미터:

index 타입 unsigned long

반환할 규칙의 0 기반 인덱스입니다.

반환값:

CSSKeyframeRule

찾은 규칙 또는 지정된 인덱스에 규칙이 없으면 undefined 입니다.

예외 없음

5.3.4. appendRule 메서드

appendRule 메서드는 전달된 CSSKeyframeRule을 keyframes 규칙의 마지막에 추가합니다.

매개변수:

rule 타입 CSSOMString

추가될 규칙으로, @keyframes 규칙 내 항목과 같은 문법으로 표현됩니다. 유효한 규칙은 항상 추가됩니다(키가 이미 존재하더라도).

반환값 없음

예외 없음

5.3.5. deleteRule 메서드

deleteRule 메서드는 지정된 keyframe selector와 일치하는 마지막으로 선언된 CSSKeyframeRule을 삭제합니다. 일치하는 규칙이 없으면 아무 동작도 하지 않습니다.

매개변수:

select 타입 CSSOMString

삭제할 규칙의 keyframe selector: 0%~100% 사이의 퍼센트 값 쉼표 구분 목록 또는 from 또는 to 키워드(각각 0%, 100%로 해석됨).

지정된 keyframe selector의 값 개수와 순서는 대상 keyframe 규칙과 일치해야 합니다. 값 목록의 공백은 매칭에 영향을 주지 않습니다.

반환값 없음

예외 없음

5.3.6. findRule 메서드

findRule 메서드는 지정된 keyframe selector와 일치하는 마지막으로 선언된 CSSKeyframeRule을 반환합니다. 일치하는 규칙이 없으면 아무 동작도 하지 않습니다.

매개변수:

select 타입 CSSOMString

찾을 규칙의 keyframe selector: 0%~100% 사이의 퍼센트 값 쉼표 구분 목록 또는 from 또는 to 키워드(각각 0%, 100%로 해석됨).

지정된 keyframe selector의 값 개수와 순서는 대상 keyframe 규칙과 일치해야 합니다. 값 목록의 공백은 매칭에 영향을 주지 않습니다.

반환값:

CSSKeyframeRule

찾은 규칙.

예외 없음

@keyframes colorful-diagonal-slide {

  from {
    left: 0;
    top: 0;
  }

  10% {
    background-color: blue;
  }

  10% {
    background-color: green;
  }

  25%, 75% {
    background-color: red;
  }

  100% {
    left: 100px;
    top: 100px;
  }

}

anim.deleteRule('10%');
var tenPercent = anim.findRule('10%');

var red = anim.findRule('75%');

var red = anim.findRule('25%,75%');

var from = anim.findRule('0%'); // from { left: 0; top: 0; } 규칙 반환
var to = anim.findRule('to');   // 100% { left: 100px; top: 100px; } 규칙 반환

5.4. GlobalEventHandlers 인터페이스 믹스인 확장

이 명세는 HTML의 GlobalEventHandlers 인터페이스 믹스인을 확장하여 이벤트 핸들러 IDL 속성을 애니메이션 이벤트용으로 추가합니다(§ 4.3 요소, Document, Window 객체의 이벤트 핸들러 참조).

5.4.1. IDL 정의

partial interface mixin GlobalEventHandlers {
  attribute EventHandler onanimationstart;
  attribute EventHandler onanimationiteration;
  attribute EventHandler onanimationend;
  attribute EventHandler onanimationcancel;
};

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

이 명세에 대해 보고된 개인정보 보호 우려 사항은 없습니다.

7. 보안 고려사항

이 명세에 대해 보고된 보안 우려 사항은 없습니다.

8. 변경사항

8.1. 2018년 10월 11일 작업 초안 이후 변경사항

다음과 같은 실질적 변경이 있었습니다:

• CSSKeyframesRule의 인덱스 속성 getter 정의
• AnimationEvent 정의에 constructor 타입 추가
• range 표기법에서 단위 필수로 추가
• range 정의 표기법을 descriptor와 rule의 prelude 값에 적용
• range 정의 표기법을 속성 값에 적용
• 이벤트 정의와 EventHandler 컨테이너 연결
• 생성식 마크업 개선
• 오타 수정(찾을 규칙, 삭제할 규칙 아님)
• 값 정의 참조를 다른 CSS 명세와 일관되게 정리
• IDL을 Web IDL 명세와 맞춤
• 생성자에 기본 딕셔너리 값 추가
• 혼란스러운 예시 재작성(#4118)
• 지속 시간이 0인 애니메이션 처리 명확화
• "none" 대신 "not animatable" 사용
• 타이밍 함수를 이제 easing 함수로 명명
• GlobalEventHandlers를 믹스인으로 변경

9. 감사의 글

특히 Tab Atkins, Brian Birtles, Shane Stephens, Carine Bournez, Christian Budde, Anne van Kesteren, Øyvind Stenhaug, Estelle Weyl, 그리고 www-style 커뮤니티의 모든 분들께 감사드립니다.

10. 기타 미해결 이슈

키프레임 상호작용 방식을 명세로 지정해야 함.

11. 작업 그룹 결의(편집 대기 중)

이 섹션은 설명 용도로 임시로 제공됩니다.

에디터들이 현재 명세 편집이 지연되고 있습니다. 다음 작업 그룹 결의 사항은 아직 반영되지 않았습니다:

• 2014-09-09 회의록(Antibes f2f)
  • Issue(7335): 키프레임 값 계산 시점/방법 상세화; dbaron의 메일 G.beta 참고
  • 트랜지션과 애니메이션 모두 모든 속성을 애니메이션하도록 동의. css-transitions에 비상호운용/비연속 값 애니메이션 정의. 50% 타이밍 함수 진행 미만에서 시작 값을, 50% 초과에서 끝 값을 사용
  • 애니메이션 속성과 키프레임의 동적 변경. Tab이 결의안 제안 예정(Bug 14713)
  • 음수 animation-delay 값은 애니메이션의 active duration(즉, (animation-duration*animation-iteration-count))에 대해 적용. 이 지연은 iteration 이벤트가 발생하지 않는 반복을 삼킬 수 있음. 시작/끝 이벤트는 여전히 발생. delay == (-1*active_duration)일 때도
  • animation-duration이 0일 때도 start/end 이벤트와 0 elapsedTime 발생
  • animation-iteration-count가 infinite이고 duration이 0이면, iteration-count를 유한으로 간주하고 0초짜리 1회 실행(option A, Brian의 메일)
  • 음수 animation delay로 애니메이션이 처음에 일시정지 상태여도 start 이벤트는 발생함
• 2012-10-29 회의록
  • 애니메이션 속성을 동적으로 변경 가능하게 함
  • @keyframes도 동적으로 변경 가능
  • 중복 애니메이션 이름 발견 시 마지막 것이 적용됨.
  • *animations*이 *all* 속성을 트랜지션하도록. 별도 지정 없는 한, 비연속 속성은 50% 타이밍 함수 진행 미만에서는 시작값, 초과에서는 종료값 사용.
• 2012-12-12 회의록 및 중간 논의 그리고 2012-12-19 회의록
  • 적어도 하나의 유효한 keyframe 규칙이 포함되어야 애니메이션 실행(Bug)
  • 요소가 display:none에서 display:non-none으로 변경될 때 애니메이션 즉시 시작(Bug)
  • 처음에 일시정지된 애니메이션도 시작 이벤트 등 발생(Bug)
  • 애니메이션이 delay 단계에서 일시정지될 수 있으며, 해제 후 남은 delay만큼 적용됨(Bug)
  • animation-play-state도 다른 애니메이션 속성처럼 리스트 동작, animation-name 길이에 맞춤(Bug)
• 2013-02-20 회의록
  • Øyvind의 명확화 수락
  • 키프레임 규칙 cascade
  • pseudoElement at-risk로 표시
• 2013-05-30 회의록
  • 비상호작용 미디어에서 애니메이션에 대한 기대 명확화
• 2014-01-27 회의록
  • 문서 로드 대기 관련 텍스트 삭제