CSS 전환 모듈 레벨 1

1. 소개

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

이 문서는 암시적 전환을 가능하게 하는 새로운 CSS 기능을 소개하며, CSS 속성이 일정 기간 동안 한 값에서 다른 값으로 부드럽게 변경될 수 있도록 하는 방법을 설명합니다.

1.1. 값 정의

이 명세는 CSS 속성 정의 관례를 [CSS2]에서 따르며, 값 정의 구문을 [CSS-VALUES-3]에서 사용합니다. 이 명세에서 정의되지 않은 값 타입은 CSS 값 & 단위 [CSS-VALUES-3]에서 정의합니다. 다른 CSS 모듈과의 조합으로 이러한 값 타입의 정의가 확장될 수 있습니다.

각 속성의 정의에 명시된 속성별 값 외에도, 이 명세에서 정의된 모든 속성은 CSS-wide 키워드도 속성 값으로 허용합니다. 가독성을 위해 따로 반복하지 않았습니다.

2. 전환

일반적으로 CSS 속성의 값이 변경될 때, 렌더링 결과는 즉시 업데이트되어, 해당 요소들이 기존 속성 값에서 새로운 속성 값으로 즉시 변경됩니다. 이 섹션에서는 새로운 CSS 속성을 사용하여 점진적인 전환을 지정하는 방법을 설명합니다. 이 속성들은 이전 상태에서 새 상태로 시간에 따라 부드럽게 애니메이션됩니다.

예를 들어, left 및 background-color 속성에 대해 1초의 전환이 정의되어 있다고 가정합시다. 다음 다이어그램은 해당 속성을 요소에 업데이트했을 때의 효과, 즉 오른쪽으로 이동하며 배경이 빨간색에서 파란색으로 바뀌는 것을 보여줍니다. 이 예시는 다른 전환 매개변수들이 여전히 기본값인 것으로 가정합니다.

전환은 표현 효과(presentational effect)입니다. 계산된 값은 시간에 따라 이전 값에서 새로운 값으로 전환됩니다. 따라서 스크립트가 속성의 계산된 값 또는 그에 의존하는 다른 데이터를 전환 중에 쿼리하면, 현재 애니메이션된 속성의 중간 값을 얻게 됩니다.

속성의 전환은 여러 개의 새 속성을 사용해 정의합니다. 예시:

div {
  transition-property: opacity;
  transition-duration: 2s;
}

각 전환 속성은 쉼표로 구분된 목록을 허용하여 여러 전환을 정의할 수 있으며, 각각이 서로 다른 속성에 적용됩니다. 이 경우 각각의 전환은 모든 목록에서 같은 인덱스의 매개변수를 사용합니다. 예시:

div {
  transition-property: opacity, left;
  transition-duration: 2s, 4s;
}

전환 속성의 값 목록 길이가 같지 않은 경우, transition-property 목록의 길이가 전환을 시작할 때 각각의 목록에서 검사되는 항목의 개수를 결정합니다. 목록은 처음 값부터 매칭하며, 끝부분의 초과 값은 사용되지 않습니다. 다른 속성이 transition-property의 값 수만큼 충분한 값을 갖고 있지 않으면, 사용자 에이전트는 값을 반복하여 필요한 수만큼 사용 값을 계산해야 합니다. 이 잘림 또는 반복은 계산된 값에 영향을 주지 않습니다. 참고: 이 동작은 background-* 속성의 동작과 유사하며, background-image는 transition-property와 유사합니다.

div {
  transition-property: opacity, left, top, width;
  transition-duration: 2s, 1s;
}

저자들은 전환을 이용해 동적으로 변경되는 콘텐츠를 만들 수 있지만, 동적으로 변경되는 콘텐츠는 일부 사용자에게 발작을 유발할 수 있습니다. 발작을 유발할 수 있는 콘텐츠를 피하는 방법에 대한 정보는 지침 2.3: 발작: 발작을 유발하는 것으로 알려진 방식으로 콘텐츠를 설계하지 마십시오 ([WCAG20])를 참조하십시오.

2.1. transition-property 속성

transition-property 속성은 전환이 적용될 CSS 속성의 이름을 지정합니다.

none 값은 어떤 속성도 전환되지 않음을 의미합니다. 그렇지 않은 경우, 전환 대상 속성 목록 또는 모든 속성을 전환함을 나타내는 all 키워드를 지정할 수 있습니다.

나열된 식별자 중 인식되지 않는 속성 이름이 있다면, 구현체는 여전히 애니메이션 가능한 속성들에 대해 transition-duration, transition-delay, transition-timing-function 값의 인덱스에 해당하는 지속 시간, 지연, 타이밍 함수로 전환을 시작해야 합니다. 즉, 인식되지 않는 속성도 인덱스 일치를 보존하기 위해 목록에 남겨 두어야 합니다.

<custom-ident> 규칙은 <single-transition-property>에서도 항상 제외되는 키워드 외에 none 키워드를 추가로 제외합니다. 즉, none, inherit, initial은 둘 이상의 식별자를 가지는 목록에 항목으로 사용할 수 없으며, 이들을 사용하는 목록은 문법적으로 유효하지 않습니다.

all 키워드, 또는 나열된 식별자 중 하나가 약식 속성인 경우, 구현체는 해당 약식의 모든 롱핸드 서브 속성(또는 all 의 경우 모든 속성)에 대해, 약식과 일치하는 인덱스의 지속 시간, 지연, 타이밍 함수로 전환을 시작해야 합니다.

transition-property 값에 속성이 여러 번 지정된 경우(개별적으로, 해당 속성을 포함하는 약식을 통해, 또는 all 값을 통해) 그 전환은 해당 속성을 애니메이션 하도록 지정한 transition-property 값의 마지막 항목 인덱스의 지속 시간, 지연, 타이밍 함수를 사용합니다.

참고: all 값과 all 약식 속성은 비슷하게 동작하므로, all 값은 모든 속성을 포함하는 약식과 같습니다.

2.2. transition-duration 속성

transition-duration 속성은 전환에 걸리는 시간을 정의합니다.

이 속성은 이전 값에서 새 값으로 전환이 얼마나 오래 걸릴지 지정합니다. 기본값은 0s로, 전환이 즉시 일어난다는 의미입니다(즉, 애니메이션 없음). transition-duration에 음수 값을 지정하면 선언 전체가 무효가 됩니다.

2.3. transition-timing-function 속성

transition-timing-function 속성은 전환 중 사용되는 중간 값이 어떻게 계산되는지 설명합니다. 전환이 전체 지속 시간 동안 변화하는 속도를 제어할 수 있으며, 이러한 효과를 이징(easing) 함수라고 합니다.

타이밍 함수는 별도의 CSS Easing Functions 모듈 [css-easing-1]에 정의되어 있습니다. 사용되는 입력 진행 값은 전환 지속 시간의 백분율이고, 출력 진행 값은 속성 값을 보간할 때 p 값으로 사용됩니다(자세한 내용은 § 4 전환의 적용 참조).

2.4. transition-delay 속성

transition-delay 속성은 전환이 언제 시작될지 정의합니다. 이 속성을 통해 전환이 적용된 후 일정 시간 지연되어 실행을 시작할 수 있습니다. transition-delay 값이 0s이면 속성이 변경되자마자 전환이 실행됩니다. 그렇지 않으면, 값은 속성이 변경된 순간부터의 오프셋을 지정하고, 전환은 그 오프셋만큼 실행을 지연합니다.

transition-delay 값이 음수인 경우, 전환은 속성이 변경되는 즉시 실행되지만, 명시된 오프셋만큼 이전에 실행이 시작된 것처럼 보입니다. 즉, 전환은 재생 사이클 도중에 시작된 것처럼 보입니다. 전환에 묵시적 시작 값이 있고 음수 transition-delay가 있는 경우, 시작 값은 속성이 변경된 순간의 값을 사용합니다.

2.5. transition 단축 속성

transition 단축 속성은 위에서 설명한 네 가지 속성을 하나의 속성으로 결합합니다.

이 속성 내 항목의 순서가 중요함에 유의하십시오. 시간 값으로 구문 분석할 수 있는 첫 번째 값은 transition-duration에 할당되고, 두 번째 시간 값은 transition-delay에 할당됩니다.

이 단축 속성에 <single-transition>이 둘 이상 있고, 어떤 전환이라도 none을 <single-transition-property>로 지정한다면, 해당 선언은 무효입니다.

3. 전환 시작

구현체는 실행 중인 전환 집합을 유지해야 하며, 각각은 특정 요소와 축약형이 아닌 속성에 적용됩니다. 이러한 각 전환은 시작 시간, 종료 시간, 시작 값, 종료 값, 반전 조정 시작 값, 반전 단축 계수도 가집니다. 전환은 이 섹션에 설명된 대로 이 집합에 추가되며, 완료되거나 구현체가 취소해야 할 때 이 집합에서 제거됩니다. 반전 조정 시작 값과 반전 단축 계수의 근거에 대해서는 § 3.1 중단된 전환의 빠른 역전을 참고하십시오.

구현체는 또한 완료된 전환 집합을 유지해야 하며, 각 항목은 (실행 중인 전환과 마찬가지로) 특정 요소와 축약형이 아닌 속성에 적용됩니다. 이 명세는 같은 속성과 요소에 대해 실행 중인 전환과 완료된 전환이 동시에 존재하는 일은 없도록 불변성을 유지합니다.

요소가 더 이상 문서에 존재하지 않는 경우, 구현체는 해당 요소의 실행 중인 전환을 취소하고, 해당 요소에 대한 전환을 완료된 전환에서 제거해야 합니다.

다양한 원인으로 요소의 속성 계산 값이 변경될 수 있습니다. 예를 들어 문서 트리에 요소를 추가/제거하는 것(이로 인해 해당 요소에 계산 값이 생기거나 사라지고, 선택자 일치로 다른 요소의 스타일도 변경될 수 있음), 문서 트리 변경, 스타일시트나 스타일 속성 변경 등이 있습니다. 이 명세는 계산 값이 언제 업데이트되는지에 대한 정의를 하지 않습니다. 다만 구현체는 CSS 캐스케이딩, 값 계산, 상속 처리 결과를 표시·사용하기 전에 반드시 계산 값을 업데이트해야 하며, (즉, 단순히 스타일 변경을 처리하면서 계산 값을 업데이트하지 않았다고 주장해서 이 명세의 요구 사항을 회피할 수 없습니다.) 하지만, 구현체가 요소의 속성 계산 값을 이러한 변경 사항을 반영하여 업데이트하거나, 새롭게 문서에 추가된 요소의 속성 계산 값을 계산할 때, 모든 속성과 요소에 대한 계산 값을 한 번에(또는 동시에 이뤄진 것처럼 보이도록) 업데이트해야 합니다. 이러한 일련의 동시 스타일 변경 처리를 스타일 변경 이벤트라 합니다. (구현체마다 스타일 변경 이벤트를 화면 새로고침 주기에 맞춰 두기도 하며, 계산된 스타일이나 레이아웃 정보가 필요한 스크립트 API도 이 이벤트에 맞춰 동작합니다.)

이 명세가 스타일 변경 이벤트가 언제 발생하는지(즉, 어떤 속성 계산 값 변화가 동시에 처리되는지) 정의하지 않으므로, 저자는 전환 유발 가능성이 있는 속성 변경 직후 transition 속성을 변경할 경우, 구현체에 따라 동작이 달라질 수 있다는 점에 주의해야 합니다. 어떤 구현에서는 변경들이 동시에 간주될 수 있고, 어떤 구현에서는 그렇지 않을 수 있습니다.

스타일 변경 이벤트가 발생할 때, 구현체는 해당 이벤트에서 변경된 계산 값을 기준으로 전환을 시작해야 합니다. 만약 요소가 해당 스타일 변경 이벤트 시점 또는 바로 전 이벤트 시점에 문서에 없었다면, 해당 이벤트에서는 해당 요소의 전환을 시작하지 않습니다. 이외의 경우에는 변경 전 스타일을, 해당 요소의 이전 스타일 변경 이벤트 시점의 모든 속성 계산 값으로 정의하되, CSS 전환·CSS 애니메이션 ([CSS3-ANIMATIONS]), SMIL 애니메이션([SMIL-ANIMATION], [SVG11]) 등 선언적 애니메이션에서 파생된 스타일만 현재 시각에 맞게 갱신합니다. 또한 변경 후 스타일은, 해당 스타일 변경 이벤트 시작 시점의 모든 속성 계산 값으로 정의하되, animation-* 속성의 계산 값만 변경 전 스타일을 따르고, CSS 전환에 의한 스타일은 계산에 포함하지 않으며, 부모의 변경 후 스타일에서 상속합니다. 즉 변경 후 스타일과 변경 전 스타일은 새롭게 생성되거나 취소된 CSS 애니메이션과는 다르지 않습니다.

변경 전 스타일과 변경 후 스타일을 가진 각 요소, 그리고 각 속성(축약형 제외)에 대해, 일치 transition-property 값을 해당 요소의 변경 후 스타일에서 해당 속성과 일치하는 transition-property의 마지막 값으로 정의합니다(자세한 내용은 § 2.1 transition-property 속성 참조). 이런 값이 있다면, 이에 대응하는 일치 transition duration, 일치 transition delay 및 일치 transition timing function이 변경 후 스타일의 transition-duration, transition-delay, transition-timing-function 값(목록 매칭 규칙 참고)에 존재합니다. 전환의 결합 지속 시간은 max(일치 transition duration, 0s)과 일치 transition delay의 합으로 정의합니다.

특정 속성에 대해 변경 전 스타일과 변경 후 스타일을 비교할 때, 두 속성 값에 애니메이션 타입이 not animatable도 아니고 불연속(discrete)도 아니라면 해당 값들은 전이 가능입니다.

참고: 속성이 애니메이션 타입이 불연속이 아니더라도, 특정 속성 값 쌍에 대해 애니메이션 타입이 불연속(discrete)일 수 있습니다. 예를 들어, box-shadow 속성의 애니메이션 타입은 shadow list인데, 값 중 한쪽에는 inset 키워드가 있고 한쪽엔 없으면 불연속 애니메이션이 사용됩니다. 이로써 0px 0px black과 inset 10px 10px black은 전이 가능하지 않습니다.

각 요소와 속성에 대해 구현체는 다음과 같이 동작해야 합니다:

1. 다음 모두가 참이면:
   • 해당 요소에 그 속성에 대한 실행 중인 전환이 없음
   • 변경 전 스타일과 변경 후 스타일이 다르고, 값들이 전이 가능함
   • 해당 요소에 그 속성에 대한 완료된 전환이 없거나, 종료 값이 완료된 전환의 것과 속성의 변경 후 스타일이 다름
   • 일치 transition-property 값이 있음
   • 결합 지속 시간이 0s보다 큼
   그러면 구현체는 완료된 전환(있다면)을 완료된 전환 집합에서 제거하고 다음을 가지는 전환을 시작해야 합니다:
   • 시작 시간은 스타일 변경 이벤트 시각 + 일치 transition delay
   • 종료 시간은 시작 시간 + 일치 transition duration
   • 시작 값은 변경 전 스타일의 값
   • 종료 값은 변경 후 스타일의 값
   • 반전 조정 시작 값은 시작 값과 같음
   • 반전 단축 계수는 1
2. 그렇지 않고, 해당 속성에 대한 완료된 전환이 있고, 그 종료 값이 변경 후 스타일의 값과 다르다면, 해당 완료된 전환을 완료된 전환 집합에서 제거해야 함.
3. 해당 속성에 대한 실행 중인 전환이나 완료된 전환이 있고, 일치 transition-property 값이 없다면, 해당 전환을 취소하거나 완료된 전환 집합에서 제거해야 함.
4. 해당 속성에 실행 중인 전환이 있고, 일치 transition-property 값이 있고, 종료 값이 실행 중인 전환의 값과 변경 후 스타일의 값과 다르면:
   1. 현재 값이 실행 중인 전환의 값과 변경 후 스타일 값이 같거나, 두 값이 전이 가능하지 않다면, 해당 실행 중인 전환을 취소해야 함.
   2. 그렇지 않으면서, 결합 지속 시간이 0초 이하이거나, 현재 값과 변경 후 스타일의 값이 전이 가능하지 않다면, 해당 실행 중인 전환을 취소해야 함.
   3. 그렇지 않고, 반전 조정 시작 값이 실행 중인 전환의 값과 변경 후 스타일 값이 같으면 (이러한 경우의 근거는 전환의 역반전에서 설명), 실행 중인 전환을 취소하고, 다음을 가지는 새 전환을 시작:
      • 반전 조정 시작 값은 실행 중인 전환의 종료 값 (이는 논리적인 전환 시작 상태를 나타내며, 일부 계산이 실제로는 해당 상태에 도달하기 전에 전환이 시작되었다는 점을 무시할 수 있게 해 줍니다. 이를 통해 동일한 전환의 반복 역전이 정상적으로 동작할 수 있습니다),
      • 반전 단축 계수는 다음의 합의 절댓값을 [0, 1] 범위로 조정한 값이며:
        1. 이전 전환의 타이밍 함수 출력과 이전 전환의 반전 단축 계수의 곱
        2. 1 - 이전 전환의 반전 단축 계수
        이는 예전 전환이 (시간이 아닌 값 관점에서) 반전 조정 시작 값과 종료 값 사이를 얼마나 진행했는지 나타냅니다. 단, y1, y2가 [0,1] 범위 밖이면 클램핑 처리함.
      • 시작 시간은 스타일 변경 이벤트 시각 +
        1. 일치 transition delay가 0 이상인 경우, 일치 transition delay
        2. 음수인 경우, 새 전환의 반전 단축 계수와 일치 transition delay의 곱
      • 종료 시간은 시작 시간 + 새 전환의 반전 단축 계수와 일치 transition duration의 곱
      • 시작 값은 실행 중인 전환의 현재 값
      • 종료 값은 변경 후 스타일 값
   4. 그렇지 않으면, 구현체는 취소 후 다음 값을 가지는 새 전환을 시작:
      • 시작 시간: 스타일 변경 이벤트 시각 + 일치 transition delay
      • 종료 시간: 시작 시간 + 일치 transition duration
      • 시작 값: 실행 중인 전환의 현재 값
      • 종료 값: 변경 후 스타일 값
      • 반전 조정 시작 값: 시작 값과 동일
      • 반전 단축 계수: 1

li {
  transition: background-color linear 1s;
  background: blue;
}
li:hover {
  background-color: green;
  transition-duration: 2s; /* :hover 상태로의 전환 */
}

속성의 전환이 한 번 시작되면(지연 상태 포함) 원래의 타이밍 함수·지속 시간·지연 시간에 따라 끝까지 실행되며, transition-timing-function, transition-duration, transition-delay 속성이 전환 도중 바뀌어도 그대로 동작합니다. 단, transition-property 속성이 바뀌어 전환이 시작될 수 없으면 전환이 멈추고(즉, 속성이 즉시 마지막 값으로 이동) 즉시 끝납니다.

위 규칙에 따라 선언적 애니메이션 결과로(스크립트가 아닌) 속성의 계산 값이 변할 때에는 전환이 시작되지 않습니다. 이는 변경 전 스타일이 최신의 선언적 애니메이션 스타일을 포함하기 때문입니다.

3.1. 중단된 전환의 빠른 역전

4. 전환의 적용

요소의 속성이 전환되는 중일 때 (즉, 전환이 시작된 뒤 종료 시간(end time) 전까지) 전환은 현재 값이라는 스타일을 [CSS3CASCADE]에 정의된 전환 레벨로 CSS 캐스케이드에 추가합니다.

CSS 전환으로 생성된 계산 값도 다른 계산 값처럼 하위 요소에 상속될 수 있습니다. 일반적으로 이는 상속 속성의 전환도 저자가 기대하는 대로 하위 요소에 적용됨을 의미합니다.

구현체는 동일 요소에 대해 CSS 애니메이션([CSS3-ANIMATIONS])이 적용되지 않을 때에만 해당 값을 캐스케이드에 추가해야 합니다.

같은 요소·속성에 애니메이션이 진행 중이라면 전환이 캐스케이드에 적용되지 않지만, 이것은 전환이 시작·종료됨에 영향을 주지 않습니다. (예: 전환 이벤트에서) 전환이 실행 중임을 보고하기는 계속합니다.

현재 시간이 전환의 start time 전이거나 같은 경우 (즉, 전환 지연구간에 있는 동안), 현재 값은 지정된 스타일이며 계산 값은 전환의 시작 값이 됩니다.

현재 시간이 전환의 start time 이후라면 (즉, 전환 지속 구간), 현재 값은 지정된 스타일이며 아래의 값으로 보간해 계산됩니다:

• V_a: 전환의 시작 값

• V_b: 전환의 종료 값

• p: 타이밍 함수의 출력값(입력: (현재 시간-시작 시간)/(종료 시간-시작 시간))

구체적인 보간 방법은 속성의 애니메이션 타입에서 정의합니다.

5. 전환의 완료

실행 중인 전환은 완료 시간(종료 시간과 같거나 이후)이거나, 그 시간과 같거나 이후인 최초의 스타일 변경 이벤트 이전에 완료됩니다. 전환이 완료되면, 구현체는 그 시점에 완료되는 전환을 모두 실행 중인 전환 집합에서 완료된 전환 집합으로 옮기고, 해당 완료에 대한 이벤트를 발행해야 합니다. (만약 먼저 해당 이벤트들을 발행하고 이동 작업을 나중에 하면, 스타일 변경 이벤트가 필요한 전환이 완료되지 않은 채 진행될 수 있습니다. 이벤트를 발행하는 시점에 스타일 최신화나 레이아웃 데이터 접근 요청이 이벤트 핸들러에서 발생하면, 스타일 변경 이벤트가 일어날 수 있기 때문입니다.)

6. 전환 이벤트

CSS 전환의 생성, 시작, 완료, 취소 시 대응되는 DOM 이벤트가 발생합니다. 각 속성이 해당 요소에서 전환될 때마다 요소에 이벤트가 디스패치됩니다. 이를 통해 개발자는 전환 시 변화와 동기화된 동작을 구현할 수 있습니다.

각 이벤트는 전환과 연관된 속성 이름과 전환 시간을 제공합니다.

6.1. 인터페이스 TransitionEvent

TransitionEvent 인터페이스는 전환과 연관된 특정 컨텍스트 정보를 제공합니다.

6.1.1. IDL 정의

[Exposed=Window]
interface TransitionEvent : Event {
  constructor(CSSOMString type, optional TransitionEventInit transitionEventInitDict = {});
  readonly attribute CSSOMString propertyName;
  readonly attribute double elapsedTime;
  readonly attribute CSSOMString pseudoElement;
};

dictionary TransitionEventInit : EventInit {
  CSSOMString propertyName = "";
  double elapsedTime = 0.0;
  CSSOMString pseudoElement = "";
};

6.1.2. 속성

propertyName, of type CSSOMString, readonly

전환과 연관된 CSS 속성의 이름.

참고: 항상 롱핸드 속성의 이름입니다. 축약 속성 지정이 롱핸드 전환을 만드는 상황은 transition-property 참고.

elapsedTime, of type double, readonly

이 이벤트가 발생한 시점까지의 전환 실행 시간(초)으로, 지연 구간 시간은 제외함. 이 값의 계산 방법은 각 이벤트 종류별로 정의되어 있습니다.

pseudoElement, of type CSSOMString, readonly

전환이 발생한 CSS 의사요소의 이름(두 개의 콜론으로 시작) 또는, 요소에서 발생한 경우 빈 문자열. 이 경우 이벤트의 타겟은 해당 요소.

TransitionEvent(type, transitionEventInitDict) 는 이벤트 생성자입니다.

6.2. TransitionEvent의 종류

발생 가능한 전환 이벤트의 종류는 다음과 같습니다:

transitionrun

transitionrun 이벤트는 전환이 생성(즉, 실행 중인 전환 집합에 추가)될 때 발생합니다.

음수 transition-delay의 경우, 이벤트의 elapsedTime 은 딜레이 절대값의 애니메이션의 transition-duration으로 제한된값. 즉, min(max(-transition-delay, 0), transition-duration).

• 버블: Yes
• 취소 가능: No
• Context Info: propertyName, elapsedTime, pseudoElement

transitionstart

transitionstart 이벤트는 전환의 지연 구간이 끝날 때 발생합니다.

elapsedTime 값은 transitionrun 값과 같습니다.

• 버블: Yes
• 취소 가능: No
• Context Info: propertyName, elapsedTime, pseudoElement

transitionend

transitionend 이벤트는 전환 완료 시 발생합니다. 전환이 완료 전 제거(예: transition-property 삭제)되면 이벤트는 발생하지 않습니다.

이 이벤트의 elapsedTime 은 transition-duration 값과 같습니다.

• 버블: Yes
• 취소 가능: No
• Context Info: propertyName, elapsedTime, pseudoElement

테스트

• events-001.html (실시간 테스트) (소스)
• events-002.html (실시간 테스트) (소스)
• events-003.html (실시간 테스트) (소스)
• events-004.html (실시간 테스트) (소스)
• events-005.html (실시간 테스트) (소스)
• events-006.html (실시간 테스트) (소스)
• events-007.html (실시간 테스트) (소스)

transitioncancel

transitioncancel 이벤트는 전환이 취소될 때 발생합니다.

elapsedTime 은 (전환 딜레이 이후부터) 전환이 취소된 시점까지의 초입니다. 음수 transition-delay의 경우, 전환 시작은 실제 트리거보다 transition-delay만큼 전인 시점입니다. 양수 transition-delay로, 이벤트가 전환 딜레이 기간 내 발생하면 elapsedTime 값은 0입니다.

• 버블: Yes
• 취소 가능: No
• Context Info: propertyName, elapsedTime, pseudoElement

테스트

• transitioncancel-001.html (실시간 테스트) (소스)
• transitioncancel-002.html (실시간 테스트) (소스)

6.3. 요소, Document 객체, Window 객체에서의 이벤트 핸들러

다음은 모든 HTML 요소에서 지원해야 하는 이벤트 핸들러(및 해당하는 이벤트 핸들러 이벤트 유형)으로, 이벤트 핸들러 콘텐츠 속성과 이벤트 핸들러 IDL 속성 둘 다로서 지원되어야 하며; 모든 Document 및 Window 객체에서는 이벤트 핸들러 IDL 속성으로 지원되어야 합니다:

7. DOM 인터페이스

이 명세는 HTML의 GlobalEventHandlers 인터페이스 믹스인을 확장하여, 이벤트 핸들러 IDL 속성으로 전환 이벤트를 추가합니다(자세한 내용 § 6.3 요소, Document, Window 객체의 이벤트 핸들러 참고).

7.1. IDL 정의

partial interface mixin GlobalEventHandlers {
  attribute EventHandler ontransitionrun;
  attribute EventHandler ontransitionstart;
  attribute EventHandler ontransitionend;
  attribute EventHandler ontransitioncancel;
};

8. 보안 고려사항

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

이 명세는 웹 콘텐츠가 기존에 할 수 없던 새로운 기능을 허용하는 것이 아니므로 보안 영향은 제한적입니다. 오히려, 스크립트로 할 수 있던 작업을 선언적으로 할 수 있게 해주거나, 구현체가(프레임률, CPU 사용 등을) 최적화하기 쉬운 방법을 추가합니다.

구현체가 할 수 있는 주요 최적화 중 하나는 특정 중요 속성(transform, opacity 등)의 애니메이션을 브라우저의 합성 쓰레드 또는 프로세스에서 실행하며, 메인 웹 콘텐츠 쓰레드에서 스타일/레이아웃을 갱신하지 않아도 되는 경우(즉, 최신 스타일 데이터가 필요하지 않은 한)에 해당합니다. 이 최적화는 일반적으로 애니메이션되는 요소의 그래픽 메모리 할당이 필요합니다. 구현체는 웹 콘텐츠가 대규모 영역(변환 전이나 후의 크기 기준)에 많은 수의 애니메이션을 통해 위험한 메모리 부족 처리를 유발하지 않도록 주의해야 합니다.

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

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

보안과 마찬가지로, 이 명세의 개인정보 보호 고려사항도 웹 콘텐츠가 이전에 불가능하던 일을 할 수 있게 하지 않기 때문에 제한적입니다.

이 명세는 사용자의 하드웨어·소프트웨어 특성 파악에 도움이 되는 추가 메커니즘을 제공할 수 있습니다. 하지만 사용자의 성능 특성 파악 능력은 많은 웹 기술에서 공통적이며, 이 명세가 새로운 기능을 추가하는 것은 아닙니다.

§ 10 접근성 고려사항에서 설명한 것처럼, 구현체는 장애를 가진 사용자를 돕기 위한 완화 기능을 제공할 수 있습니다. 이러한 완화는 웹 콘텐츠에서 감지될 수 있기 때문에, 완화의 혜택이 필요한 사용자는 웹 콘텐츠에 장애 정보를 노출하지 않고서 완화 혜택을 받을지 선택해야 할 수도 있습니다.

10. 접근성 고려사항

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

10.1. 모션

이 명세는 기존에 스크립트가 필요했던 애니메이션에 대한 선언적 메커니즘을 제공합니다. 선언적 메커니즘 제공은 여러 가지 효과를 가지는데, 이러한 애니메이션을 보다 쉽게 만들 수 있으므로 사용 빈도가 늘 수 있고, 동시에 사용자 에이전트가 접근성 요구에 맞춰 애니메이션을 수정하기도 쉬워집니다.

따라서 움직임에 민감한 사용자나, 읽거나 이해하는 데 추가 시간이 필요한 사용자는 애니메이션을 비활성화하거나 느리게 하는 기능을 제공하는 사용자 에이전트의 도움을 받을 수 있습니다. (다만, 이러한 완화 조치의 개인정보 보호 영향은 § 9 개인정보 보호 고려사항 참고)

사용자 에이전트 구현자는 웹 콘텐츠가 전환 이벤트의 발생에 의존할 수 있음을 알고 있어야 하며, 완화 구현 시 실제로 애니메이션을 연속적으로 실행하지 않아도 전환 이벤트를 발행할 수 있습니다. 그러나 이런 이벤트에 기능 구현이 의존하는 것은 바람직하지 않습니다.

10.2. 계단식

CSS 캐스케이드는 사용자의 요구가 저자 스타일과 상호작용하게 하는 일반 CSS 메커니즘입니다. 이 명세도 캐스케이드와 상호작용하지만, 기존 캐스케이드 규칙에서 결과로 나오는 값들 사이에서만 애니메이션이 허용되므로 사용자가 CSS 속성에 특정 값을 강제로 지정할 수 있는 능력은 침해하지 않습니다.

캐스케이드는 사용자가 전환 속성을 오버라이드하여 전환을 아예 비활성화할 수 있게도 합니다.

11. 변경 사항

11.1. 2018년 10월 11일 워킹 드래프트 이후의 변경 사항

다음은 2018년 10월 11일자 워킹 드래프트 이후의 주요 변경 사항입니다:

• GlobalEventHandlers가 믹스인임을 명확히 했습니다.

• 더 이상 사용하지 않는 <timing-function>을 <easing-function>으로 대체했습니다.

• transitionEventInitDict 딕셔너리에 기본값을 추가했습니다.

• <single-transition-property> 구문에서 끝 세미콜론을 제거했습니다.

• 이벤트 정의를 GlobalEventHandlers 컨테이너와 연결했습니다.

• 속성 값에 범위 정의 표기를 추가했습니다.

• Web Platform Tests 커버리지를 추가했습니다.

• 사소한 편집상 수정과 개선이 있었습니다.

이 변경 사항에 대한 더 자세한 내용은 버전 관리 변경 로그를 참조하십시오.

11.2. 이전 변경 사항

이전 워킹 드래프트의 변경 사항:

1. 2018년 10월 11일 워킹 드래프트의 변경 사항을 참조하세요.

2. 2017년 11월 30일 워킹 드래프트의 변경 사항을 참조하세요.

3. 2013년 11월 19일 워킹 드래프트의 변경 사항을 참조하세요.

4. 이전 워킹 드래프트의 ChangeLog를 참조하세요.

5. 이 변경 사항에 대한 더 자세한 내용은 버전 관리 변경 로그를 참조하세요. (파일 이름 변경으로 인해 여러 파일로 나뉨):

   • 2017년 10월 12일 이후 변경 로그,

12. 감사의 글

다음 분들께 특별히 감사드립니다: Tab Atkins, Carine Bournez, Aryeh Gregor, Vincent Hardy, Anne van Kesteren, Cameron McCormack, Alex Mogilevsky, Jasper St. Pierre, Estelle Weyl, 그리고 www-style 커뮤니티의 모든 분들.