CSS 트랜지션

1. 소개

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

이 문서는 CSS 속성이 주어진 기간 동안 한 값에서 다른 값으로 부드럽게 변경되도록 하는 암시적 트랜지션을 가능하게 하는 새로운 CSS 기능을 소개합니다.

2. 트랜지션

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

예를 들어, left와 background-color 속성에 1초 트랜지션이 정의되어 있다고 가정해 봅시다. 아래 다이어그램은 해당 속성이 요소에 적용되어, 요소가 오른쪽으로 이동하고 배경이 빨간색에서 파란색으로 변경되는 효과를 보여줍니다. 다른 트랜지션 매개변수는 기본값을 사용한다고 가정합니다.

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

속성의 트랜지션은 여러 새로운 속성을 사용하여 정의됩니다. 예시:

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 키워드나, 나열된 식별자 중 하나가 축약 속성(shorthand)인 경우, 구현체는 해당 축약 속성의 모든 longhand 하위 속성(또는 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 캐스케이딩, 값 계산, 상속 처리 결과를 [CSS3CASCADE]에 따라 계산값을 업데이트하지 않고 사용, 표시, 렌더링해서는 안된다고만 명시합니다(즉, 구현체가 스타일 변경을 처리할 때 계산값을 업데이트하지 않았다고 주장하여 명세 요구사항을 회피할 수 없습니다). 하지만, 구현체가 요소의 속성 계산값을 이러한 변경을 반영하도록 업데이트하거나, 문서에 새로 추가된 요소의 속성 계산값을 계산할 때, 이러한 모든 변경을 동시에 반영하여 계산값을 업데이트해야 하며 (또는 최소한 동시에 처리되지 않은 것이 감지되지 않아야 합니다). 이러한 일련의 동시 스타일 변경 처리를 스타일 변경 이벤트라고 합니다. (구현체는 보통 스타일 변경 이벤트를 화면 리프레시 레이트에 맞춰 처리하며, 최신 계산 스타일이나 레이아웃 정보가 필요한 스크립트 API에서 사용됩니다.)

이 명세가 스타일 변경 이벤트가 언제 발생하는지, 즉 어떤 계산값 변경이 동시로 간주되는지 정의하지 않으므로, 작성자는 트랜지션 속성을 변경한 뒤 트랜지션을 유발할 수 있는 속성 변경을 짧은 시간 내에 수행하면 구현체마다 동작이 달라질 수 있음을 인지해야 합니다. 어떤 구현체에서는 변경이 동시로 간주될 수 있고, 다른 구현체에서는 그렇지 않을 수 있습니다.

스타일 변경 이벤트가 발생하면, 구현체는 해당 이벤트로 변경된 계산값에 근거해 트랜지션을 시작해야 합니다. 요소가 해당 스타일 변경 이벤트 중 문서에 속해 있지 않거나, 이전 스타일 변경 이벤트 중에 문서에 없었으면, 해당 스타일 변경 이벤트에서 그 요소에 대해 트랜지션을 시작하지 않습니다. 그렇지 않으면, 변경 전 스타일을 이전 스타일 변경 이벤트 당시 요소의 모든 속성 계산값으로 정의하되, CSS 트랜지션, CSS 애니메이션 ([CSS3-ANIMATIONS]), SMIL 애니메이션 ([SMIL-ANIMATION], [SVG11]) 등 선언적 애니메이션에서 파생된 스타일은 현재 시간 기준으로 업데이트합니다. 마찬가지로, 변경 후 스타일은 해당 스타일 변경 이벤트 시작 시점의 정보로 요소의 모든 속성 계산값을 기반으로 계산하되, animation-* 속성의 계산값은 변경 전 스타일에서 가져오고, CSS 트랜지션에서 파생된 스타일은 계산에 포함하지 않으며, 부모의 변경 후 스타일을 상속받습니다. 즉, 변경 후 스타일은 새로 생성되거나 취소된 CSS 애니메이션으로 인해 변경 전 스타일과 달라지지 않습니다.

각 요소의 변경 전 스타일과 변경 후 스타일, 그리고 각 속성(약식 제외)에 대해, 일치하는 transition-property 값을 해당 속성에 일치하는 요소의 변경 후 스타일의 transition-property의 마지막 값으로 정의합니다. 일치하는 값이 있으면, 이에 대응하는 일치하는 트랜지션 지속시간, 일치하는 트랜지션 지연, 일치하는 트랜지션 타이밍 함수가 변경 후 스타일의 transition-duration, transition-delay, transition-timing-function 값에 대응하여 존재합니다(목록 매칭 규칙 참고). 트랜지션의 총 지속시간은 max(일치하는 트랜지션 지속시간, 0s)와 일치하는 트랜지션 지연의 합으로 정의합니다.

변경 전 스타일과 변경 후 스타일에서 해당 속성 값을 비교할 때, 해당 속성 값에 애니메이션 타입 이 애니메이션 불가(not animatable) 또는 불연속(discrete)이 아니면 트랜지션 가능으로 간주합니다.

참고: 속성이 애니메이션 타입이 불연속(discrete)이 아니라고 정의되어 있더라도, 특정 속성 값 쌍에 대해 애니메이션 타입이 불연속(discrete)일 수 있습니다. 예를 들어, box-shadow 속성의 애니메이션 타입은 shadow list입니다. 한 값에 inset 키워드가 없고, 다른 값에는 있으면 불연속(discrete) 애니메이션을 사용합니다. 따라서 0px 0px black과 inset 10px 10px black은 트랜지션 가능하지 않습니다.

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

1. 아래 조건이 모두 참이면:
   • 요소에 해당 속성에 대한 실행 중인 트랜지션이 없음
   • 변경 전 스타일이 해당 속성에 대해 변경 후 스타일과 다르며, 값이 트랜지션 가능함
   • 요소에 해당 속성에 대한 완료된 트랜지션이 없거나, 완료된 트랜지션의 종료 값이 해당 속성의 변경 후 스타일과 다름
   • 일치하는 transition-property 값이 있음
   • 총 지속시간이 0s보다 큼
   구현체는 완료된 트랜지션(존재 시)를 완료된 트랜지션 집합에서 제거하고, 다음 특성을 갖는 트랜지션을 시작해야 합니다:
   • 시작 시간은 스타일 변경 이벤트 시각 + 일치하는 트랜지션 지연
   • 종료 시간은 시작 시간 + 일치하는 트랜지션 지속시간
   • 시작 값은 변경 전 스타일에서 트랜지션되는 속성의 값
   • 종료 값은 변경 후 스타일에서 트랜지션되는 속성의 값
   • 반전 조정 시작 값은 시작 값과 같음
   • 반전 단축 계수는 1
2. 그렇지 않고, 요소에 해당 속성의 완료된 트랜지션이 있고, 완료된 트랜지션의 종료 값이 해당 속성의 변경 후 스타일과 다르면, 완료된 트랜지션을 완료된 트랜지션 집합에서 제거해야 합니다.
3. 요소에 해당 속성의 실행 중인 트랜지션 또는 완료된 트랜지션이 있고, 일치하는 transition-property 값이 없다면, 실행 중인 트랜지션 취소 또는 완료된 트랜지션을 완료된 트랜지션 집합에서 제거해야 합니다.
4. 요소에 해당 속성의 실행 중인 트랜지션이 있고, 일치하는 transition-property 값이 있으며, 실행 중인 트랜지션의 종료 값이 변경 후 스타일의 속성값과 다르면, 다음을 수행:
   1. 실행 중인 트랜지션의 속성 현재 값이 변경 후 스타일의 속성값과 같거나, 두 값이 트랜지션 가능하지 않으면, 실행 중인 트랜지션 취소
   2. 그렇지 않고, 총 지속시간이 0s 이하이거나, 실행 중인 트랜지션의 속성 현재 값이 변경 후 스타일의 속성값과 트랜지션 가능하지 않으면, 실행 중인 트랜지션 취소
   3. 그렇지 않고, 실행 중인 트랜지션의 반전 조정 시작 값이 변경 후 스타일의 속성값과 같으면 (이 경우의 이유는 반전 트랜지션 섹션 참고), 실행 중인 트랜지션 취소 후 다음 특성의 새 트랜지션 시작:
      • 반전 조정 시작 값은 실행 중인 트랜지션의 종료 값 (논리적 시작 상태로, 반복 반전시에 정확히 동작하도록 계산)
      • 반전 단축 계수는 절대값([0, 1]로 클램프)으로, 다음 합입니다:
        1. 이전 트랜지션의 타이밍 함수 출력값 × 이전 트랜지션의 반전 단축 계수
        2. 1 - 이전 트랜지션의 반전 단축 계수
        이 값은 이전 트랜지션이 반전 조정 시작 값과 종료 값 사이를 얼마나 값 단위로 이동했는지 나타냅니다(시간이 아니라 값), y1/y2가 [0, 1] 범위 밖인 경우 절대값 및 클램프).
      • 시작 시간은 스타일 변경 이벤트 시각 +
        1. 일치하는 트랜지션 지연이 0 이상이면, 해당 값
        2. 일치하는 트랜지션 지연이 음수면, 새 트랜지션의 반전 단축 계수 × 해당 값
      • 종료 시간은 시작 시간 + 새 트랜지션의 일치하는 트랜지션 지속시간 × 반전 단축 계수
      • 시작 값은 실행 중인 트랜지션의 현재 값
      • 종료 값은 변경 후 스타일의 속성값
   4. 그렇지 않으면, 실행 중인 트랜지션 취소 후 다음 특성의 새 트랜지션 시작:
      • 시작 시간은 스타일 변경 이벤트 시각 + 일치하는 트랜지션 지연
      • 종료 시간은 시작 시간 + 일치하는 트랜지션 지속시간
      • 시작 값은 실행 중인 트랜지션의 현재 값
      • 종료 값은 변경 후 스타일의 속성값
      • 반전 조정 시작 값은 시작 값과 같음
      • 반전 단축 계수는 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. 트랜지션의 적용

요소의 속성이 트랜지션 중일 때(즉, 트랜지션이 시작되었거나 종료 시간 이전일 때), 트랜지션은 현재 값이라는 스타일을 CSS 캐스케이드에 CSS Transitions에 정의된 레벨로 추가합니다([CSS3CASCADE] 참고).

이는 CSS 트랜지션에 의해 생성된 계산값이 다른 계산값과 동일하게 자손에 상속될 수 있음을 의미합니다. 일반적으로, 상속되는 속성의 트랜지션은 작성자가 기대하는 대로 자손 요소에도 적용됩니다.

구현체는 해당 속성이 동일 요소에서 CSS 애니메이션([CSS3-ANIMATIONS]) 중이 아닐 때에만 이 값을 캐스케이드에 추가해야 합니다.

동일 요소 및 속성에 애니메이션이 실행 중일 때 트랜지션이 캐스케이드에 적용되지 않는 이 동작은 트랜지션의 시작/종료 여부에는 영향을 주지 않습니다. 트랜지션 실행 여부를 노출하는 API(트랜지션 이벤트 등)는 트랜지션이 실행 중임을 계속 보고합니다.

현재 시간이 트랜지션의 시작 시간 이전이거나 같은 경우(즉, 트랜지션 지연 단계인 경우), 현재 값은 계산 시 트랜지션의 시작 값이 되는 스타일입니다.

현재 시간이 트랜지션의 시작 시간 이후인 경우(즉, 트랜지션 지속 단계인 경우), 현재 값은 다음 값들을 사용하여 보간(interpolating)된 결과값이 되는 스타일입니다:

• V_a: 트랜지션의 시작 값

• V_b: 트랜지션의 종료 값

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

사용되는 구체적인 보간(interpolation) 절차는 해당 속성의 애니메이션 타입에 의해 정의됩니다.

5. 트랜지션의 완료

실행 중인 트랜지션은 완료 시간이 종료 시간 이상이면서, 종료 시간 이상인 첫 스타일 변경 이벤트 이전에 완료됩니다. 트랜지션이 완료될 때, 구현체는 해당 시점에 완료되는 모든 트랜지션을 실행 중인 트랜지션 집합에서 완료된 트랜지션 집합으로 옮기고, 그 완료 이벤트를 발생시켜야 합니다. (그렇지 않고, 일부 이벤트만 실행 중 집합에서 완료 집합으로 옮기기 전에 발생시키면, 필요한 트랜지션이 완료되지 않은 채 스타일 변경 이벤트가 발생할 수 있습니다. 왜냐하면 이벤트 핸들러가 최신 계산 스타일이나 레이아웃 데이터를 요청하면 스타일 변경 이벤트가 발생할 수 있기 때문입니다.)

6. 트랜지션 이벤트

CSS 트랜지션의 생성, 시작, 완료, 취소는 각각에 대응하는 DOM 이벤트를 생성합니다. 각 속성이 해당 요소에서 트랜지션될 때마다 이벤트가 디스패치됩니다. 이를 통해 콘텐츠 개발자는 트랜지션 변화에 맞는 동작을 동기화할 수 있습니다.

각 이벤트는 트랜지션과 연결된 속성명과 트랜지션의 지속시간 정보를 제공합니다.

6.1. 인터페이스 TransitionEvent

TransitionEvent 인터페이스는 트랜지션 관련 구체적인 문맥 정보를 제공합니다.

6.1.1. IDL 정의

[Exposed=Window,
 Constructor(CSSOMString type, optional TransitionEventInit transitionEventInitDict)]
interface TransitionEvent : Event {
  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, 타입 CSSOMString, 읽기 전용

트랜지션과 연결된 CSS 속성 이름입니다.

참고: 항상 longhand 속성 이름입니다. 약식 속성 지정이 longhand 트랜지션을 유발하는 방법은 transition-property 참고.

elapsedTime, 타입 double, 읽기 전용

이 이벤트가 발생할 때 트랜지션이 실행된 시간(초 단위, 지연 단계 시간 제외). 멤버 계산 방법은 각 이벤트 타입과 함께 정의됩니다.

pseudoElement, 타입 CSSOMString, 읽기 전용

트랜지션이 발생한 CSS 의사 요소의 이름(::로 시작, 이벤트 타겟이 해당 의사 요소의 대응 요소임), 아니면 요소에서 발생한 경우 빈 문자열(이때 이벤트 타겟은 해당 요소).

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

6.2. TransitionEvent의 타입

발생할 수 있는 트랜지션 이벤트 타입은 다음과 같습니다:

transitionrun

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

음수 transition-delay 값은 이벤트의 elapsedTime 을 지연의 절대값(애니메이션의 transition-duration까지 제한)으로 하여 발생시킵니다. 즉, elapsed time은 min(max(-transition-delay, 0), transition-duration) 입니다.

• Bubbles: 예
• Cancelable: 아니오
• Context Info: propertyName, elapsedTime, pseudoElement

transitionstart

transitionstart 이벤트는 트랜지션의 지연 단계가 끝날 때 발생합니다.

elapsedTime 값은 transitionrun 이벤트와 동일합니다.

• Bubbles: 예
• Cancelable: 아니오
• Context Info: propertyName, elapsedTime, pseudoElement

transitionend

transitionend 이벤트는 트랜지션 완료 시 발생합니다. 트랜지션이 완료 전에 제거될 경우(예: transition-property가 제거된 경우), 이벤트는 발생하지 않습니다.

이 이벤트의 elapsedTime 값은 transition-duration 값과 동일합니다.

• Bubbles: 예
• Cancelable: 아니오
• Context Info: propertyName, elapsedTime, pseudoElement

transitioncancel

transitioncancel 이벤트는 트랜지션이 취소될 때 발생합니다.

elapsedTime 값은 트랜지션 지연 종료 이후부터 트랜지션이 취소된 시점까지의 초 단위 시간입니다. 트랜지션에 음수 transition-delay가 있으면, 트랜지션 시작은 트랜지션이 실제로 트리거된 시점보다 transition-delay 초 만큼 앞선 시점입니다. 반대로, 양수 transition-delay가 있고 이벤트가 지연 만료 전에 발생하면, elapsedTime 값은 0입니다.

• Bubbles: 예
• Cancelable: 아니오
• Context Info: propertyName, elapsedTime, pseudoElement

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

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

7. DOM 인터페이스

이 명세는 HTML의 GlobalEventHandlers 인터페이스를 확장하여 트랜지션 이벤트의 이벤트 핸들러 IDL 속성을 transition events에 대해 추가합니다. 자세한 내용은 §6.3 요소, Document 객체, Window 객체의 이벤트 핸들러를 참고하세요.

7.1. IDL 정의

partial interface 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. 2017년 11월 30일 워킹 드래프트 이후의 변경사항

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

• 부드럽게 보간(interpolate)할 수 없는 일부 값이 불연속(discrete) 애니메이션을 통해 트랜지션되도록 하는 변경을 되돌림. 해당 변경은 어떤 구현체에서도 구현되지 않았고, 호환성 문제를 유발할 수 있음.

• 속성이 어떻게 보간되는지에 대한 정의를 Web Animations 및 CSS Values and Units로 이동.

이러한 변경에 대한 자세한 내용은 버전 관리 변경 로그를 참조하세요.

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

1. 2017년 11월 30일 워킹 드래프트의 변경사항 섹션 참고.

2. 2013년 11월 19일 워킹 드래프트의 변경사항 섹션 참고.

3. 이전 워킹 드래프트의 ChangeLog 참고.

4. 변경사항에 대한 자세한 내용은 버전 관리 변경 로그를 참조하세요. 파일명 변경 등으로 여러 부분으로 나뉘어 있습니다:

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

   • 2015년 1월 26일부터 2017년 10월 12일까지 변경 로그

   • 2013년 3월 28일부터 2015년 1월 26일까지 변경 로그

   • 2013년 3월 28일 이전 변경 로그

12. 감사의 글

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