CSS 트랜지션 레벨 2

1. 델타 명세

이 문서는 델타 명세로, 현재는 CSS Transitions Level 1 [CSS-TRANSITIONS-1]과의 차이점만 포함하고 있습니다. Level 1 명세가 완성에 가까워지면, 여기의 추가사항과 병합되어 완전한 레벨 2 명세가 될 예정입니다.

2. 트랜지션

2.1. transition-property 속성

CSS Transitions § 2.1 The transition-property Property의 텍스트를 삽입하고 다음 단락을 백포트하세요.

transition-property 속성은 단축 속성과 all 키워드를 지정할 수 있지만, 각각의 트랜지션 가능 장황 서브 속성마다 개별 트랜지션이 생성됩니다. 트랜지션의 확장된 트랜지션 속성명은 트랜지션이 생성된 장황 서브 속성의 이름입니다 (예: border-left-width).

transitionable의 정의 인스턴스가 Level 1에서 포팅되면 업데이트하세요.

CSS Transitions Level 2에서는, 주어진 속성의 변경 전 스타일과 변경 후 스타일을 비교할 때, 속성 값이 다음 조건을 만족하면 트랜지션 가능입니다:

1. 애니메이션 타입이 애니메이션 불가 또는 불연속이 아닌 경우, 또는
2. transition-behavior가 allow-discrete이고, 애니메이션 타입이 불연속인 경우.

참고: 불연속 애니메이션 타입 값을 트랜지션하면, 50% 진행 시 값이 전환됩니다.

2.2. transition-duration 속성

transition-duration 속성은 트랜지션과 연결된 반복 시간을 지정합니다(애니메이션 효과).

2.3. transition-timing-function 속성

transition-timing-function 속성은 트랜지션과 연결된 타이밍 함수를 지정합니다(애니메이션 효과, Web Animations § 4.10 시간 변환 참고).

참고: CSS 애니메이션과 달리, CSS 트랜지션의 타이밍 함수는 개별 키프레임이 아니라 애니메이션 효과에 적용됩니다. 이를 통해 변환된 진행률 계산 시 반전 단축 계수에 반영할 수 있습니다.

2.4. transition-delay 속성

transition-delay 속성은 트랜지션과 연결된 시작 지연을 지정합니다(애니메이션 효과).

2.5. transition-behavior 속성

transition-behavior 속성은 불연속 속성에 대해 트랜지션이 시작될지 여부를 지정합니다.

transition-behavior 지정 문법은 다음과 같습니다:

normal이 지정되면, 불연속 속성에 대해 트랜지션이 시작되지 않고, 인터폴레이션 가능한 속성에만 적용됩니다. allow-discrete가 지정되면, 불연속 속성과 인터폴레이션 가능한 속성 모두에 트랜지션이 시작됩니다.

2.6. transition 단축 속성

transition 단축 속성의 항목 지정 문법은 다음과 같습니다:

3. 트랜지션 시작

owning element는 트랜지션의 transition-property 속성이 적용되어 애니메이션이 생성된 요소 또는 의사 요소를 의미합니다. 트랜지션은 owning element와 연결이 끊길 수 있으며, 이 경우 owning element가 없습니다.

실행 중인 트랜지션 집합에는 owning element가 있는 트랜지션만 포함됩니다.

구현에서 트랜지션 취소가 요구될 때, 해당 트랜지션을 owning element와 분리하고, 애니메이션 취소 절차를 실행해야 합니다.

Level 1 명세에서 명확히 정의되진 않았지만, 취소가 필요하다고 명시된 요소가 더 이상 연결되어 있지 않은 경우 외에도, 구현체는 취소가 필요한 요소가 더 이상 렌더링 중이 아닌 경우 실행 중인 트랜지션도 취소하고, 해당 트랜지션을 완료된 트랜지션 집합에서 제거해야 합니다.

cancel() 메서드를 CSSTransition 객체(실행 중인 트랜지션을 나타냄)에서 호출해도 해당 트랜지션이 owning element와 분리되지는 않습니다.

3.1. 중단된 트랜지션의 빠른 반전

트랜지션과 연관된 반전 단축 계수와 반전-조정 시작 값은 올바른 반전 동작을 위해 트랜지션 자체에 연결되어 있으며, 예를 들어 애니메이션 효과에는 연결되지 않습니다. 따라서, 트랜지션은 반전된 트랜지션을 생성할 때에도 동일한 값을 사용하며, 트랜지션과 연결된 애니메이션 효과가 Web Animations API [WEB-ANIMATIONS]로 업데이트되거나 대체되더라도 변하지 않습니다.

3.2. 현재 트랜지션 세대

각 최상위 브라우징 컨텍스트에는 현재 트랜지션 세대가 연결되어 있으며, 이는 각 스타일 변경 이벤트 발생 시 증가합니다.

새로운 트랜지션이 생성될 때마다, 이미 증가된 현재 트랜지션 세대의 값을 해당 트랜지션의 트랜지션 세대로 저장합니다.

3.3. 변경 전 스타일 정의: @starting-style 규칙

이 명세의 Level 1에서는, 트랜지션은 스타일 변경 이벤트 도중에만 시작할 수 있으며, 이전 스타일 변경 이벤트에서 정의된 변경 전 스타일이 존재하는 요소에만 적용됩니다. 즉, 이전 스타일 변경 이벤트에서 렌더링되지 않았던 요소에는 트랜지션이 시작될 수 없습니다 (CSS Transitions § 3 트랜지션 시작 참고).

때때로 새로 삽입된 요소나 렌더링되지 않음에서 렌더링됨으로 변경되는 요소에도 트랜지션을 시작하는 것이 합리적입니다. 이를 위해 이 명세에서는 @starting-style을 도입합니다.

@starting-style 규칙은 그룹화 규칙입니다. 내부의 스타일 규칙들은 이전 스타일 변경 이벤트에서 해당 요소의 변경 전 스타일이 정의되지 않은 경우, 트랜지션의 시작점이 되는 스타일을 지정합니다.

참고: @starting-style 규칙은 계산된 스타일 갱신 동안 이전 스타일 변경 이벤트에 렌더링되지 않았거나 DOM에 없었던 일부 요소에만 적용됩니다.

요소의 시작 스타일은 변경 후 스타일에 @starting-style 규칙을 추가 적용한 것입니다. 주어진 스타일 변경 이벤트에 대해 요소에 변경 전 스타일이 없다면, 변경 전 스타일 대신 시작 스타일을 변경 후 스타일과 비교하여 트랜지션을 시작합니다 (CSS Transitions § 3 트랜지션 시작 참고).

@starting-style 내부의 규칙은 다른 그룹화 스타일 규칙과 마찬가지로 캐스케이드되며, 새로운 순서를 도입하지 않습니다. 즉, @starting-style 내부 규칙이 외부 규칙보다 반드시 우선하지는 않습니다.

@starting-style 내부의 스타일 규칙은 변경 후 스타일에는 적용되지 않습니다. 따라서, @starting-style에서 일치하는 규칙이 있으면, 해당 요소에 변경 전 스타일이 없어도 트랜지션이 발생할 수 있습니다.

시작 스타일은 부모의 변경 후 스타일로부터 변경 후 스타일과 동일하게 상속됩니다.

h1 {
  transition: background-color 1.5s;
  background-color: green;
}
@starting-style {
  h1 {
    background-color: transparent;
  }
}

h1 {
  transition: background-color 1.5s;
  background-color: green;
  @starting-style {
    background-color: transparent;
  }
}

#target {
  transition-property: opacity, display;
  transition-duration: 0.5s;
  display: block;
  opacity: 1;
  @starting-style {
    opacity: 0;
  }
}
#target.hidden {
  display: none;
  opacity: 0;
}

전역 이름 정의 at-rule(@keyframes, @font-face, @layer 등)은 @starting-style 내부에 포함될 수 있으며, 이 경우 @starting-style 외부에 있을 때와 동일하게 동작합니다.

3.3.1. CSSStartingStyleRule 인터페이스

CSSStartingStyleRule 인터페이스는 @starting-style 규칙을 나타냅니다.

[Exposed=Window]
interface CSSStartingStyleRule : CSSGroupingRule {
};

4. 트랜지션 적용

4.1. 애니메이션 합성 순서

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

CSS 트랜지션은 CSS 애니메이션 및 특정 애니메이션 클래스가 없는 애니메이션보다 더 빠른 합성 순서를 갖습니다.

CSS 트랜지션 집합 내에서 두 애니메이션 A와 B는 다음과 같이 합성 순서(앞에서 뒤로)로 정렬됩니다:

1. A와 B 모두 owning element가 없는 경우, 글로벌 애니메이션 리스트에서 상대적인 위치로 정렬합니다.

2. 한쪽만 owning element가 있는 경우, owning element가 있는 애니메이션을 먼저 정렬합니다.

3. owning element가 서로 다른 경우, A와 B는 각 owning elements의 트리 순서로 정렬합니다. 의사 요소에 대해서는 다음과 같은 정렬 순서를 따릅니다:

   • 요소

   • ::marker

   • ::before

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

   • ::after

   • 요소 자식

4. A와 B가 서로 다른 트랜지션 세대 값을 가지는 경우, 각 트랜지션 세대의 오름차순으로 정렬합니다.

5. 그 외에는, A와 B를 각 트랜지션의 확장된 트랜지션 속성명을 구성하는 유니코드 코드포인트의 오름차순으로 정렬합니다 (즉, 대소문자 변환 없이 ‘-moz-column-width’가 ‘column-width’보다 먼저 정렬됨).

이 명세에서 정의된 마크업으로 생성된 트랜지션은 생성 시 글로벌 애니메이션 리스트에 추가되지 않습니다. 대신, 트랜지션이 대기(play state: idle) 상태를 벗어날 때, owning element와의 연결이 끊긴 첫 순간에 글로벌 애니메이션 리스트에 추가됩니다. owning element와 연결이 끊겼으나 여전히 대기 상태인 트랜지션은 합성 순서가 정의되어 있지 않습니다.

참고, 이 동작은 트랜지션이 owning element와의 연결이 끊기면 항상 대기(play state: idle) 상태로 진입(또는 유지)된다는 사실에 기반합니다.

4.2. 애니메이션 캐스케이드 레벨

애니메이션 클래스가 ‘CSS Transition’인 애니메이션 중 owning element가 있는 애니메이션은 CSS 캐스케이드의 ‘트랜지션 선언’ 레벨에 적용됩니다. 이 명세에서 정의된 마크업으로 생성된 그 외 모든 애니메이션(owning element가 더 이상 없는 애니메이션 포함)은 캐스케이드의 ‘애니메이션 선언’ 레벨에 적용됩니다. (Web Animations § 5.4.5 합성 결과 적용 참고.)

5. 트랜지션 이벤트

5.1. 이벤트 디스패치

참고, 이 내용은 CSS Transitions Level 1 [CSS-TRANSITIONS-1]보다 더 일반적인 이벤트 디스패치 설명입니다. 왜냐하면 Web Animations API [WEB-ANIMATIONS]를 통해 애니메이션 탐색(seek)이나 반전(reverse) 가능성을 고려해야 하기 때문입니다. 또한 Web Animations API를 사용하면 트랜지션 효과를 반복 등 트랜지션에서 일반적으로 사용하지 않는 속성을 가진 완전히 다른 효과로 대체할 수도 있으므로, 이 섹션은 Web Animations 모델의 전체 복잡성을 반영하는 일반 정의를 제공합니다.

트랜지션 이벤트의 target은 트랜지션의 owning element입니다. owning element가 없으면 트랜지션 이벤트는 디스패치되지 않습니다 (단, Web Animations에서 정의된 애니메이션 재생 이벤트는 해당 CSSTransition 객체에서 여전히 디스패치됩니다).

중복 이벤트 발생을 방지하기 위해, 디스패치할 이벤트 집합은 트랜지션의 이전 phase와 현재 상태를 비교하여 결정됩니다.

트랜지션의 transition phase는 최초에는 ‘idle’이며, 매 애니메이션 프레임마다 아래 조건 중 첫 번째로 일치하는 것에 따라 업데이트됩니다:

트랜지션에 연결된 효과(associated effect)가 없는 경우,

트랜지션 phase는 아래 조건 중 첫 번째로 일치하는 것에 따라 결정됩니다:

트랜지션의 미해결(unresolved) 현재 시간(current time)이 있는 경우,

트랜지션 phase는 ‘idle’입니다.

트랜지션의 현재 시간(current time) < 0인 경우,

트랜지션 phase는 ‘before’입니다.

그 외의 경우,

트랜지션 phase는 ‘after’입니다.

트랜지션에 대기 중인 재생 작업(pending play task) 또는 대기 중인 일시 중지 작업(pending pause task)이 있고 이전 phase가 ‘idle’ 또는 ‘pending’인 경우,

트랜지션 phase는 ‘pending’입니다.

그 외의 경우,

트랜지션 phase는 해당 효과의 phase입니다.

각 이벤트의 elapsedTime 계산에는 다음 정의를 사용합니다:

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

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

위 식에서 start delay, active duration, current iteration, iteration start, iteration duration은 트랜지션의 연결된 효과의 해당 속성을 의미합니다.

새로운 애니메이션 프레임이 설정될 때마다, 디스패치할 이벤트는 이전 및 현재 transition phase를 아래와 같이 비교하여 결정합니다:

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

위 표 및 절차에서 정의된 경과 시간(elapsed time)은 밀리초 단위이므로, elapsedTime 멤버에 초 단위 값을 할당하려면 1,000으로 나누어야 합니다. (TransitionEvent 객체의 elapsedTime에 할당될 값)

6. DOM 인터페이스

6.1. CSSTransition 인터페이스

[Exposed=Window]
interface CSSTransition : Animation {
  readonly attribute CSSOMString transitionProperty;
};

transitionProperty, 타입 CSSOMString, 읽기 전용

이 트랜지션의 확장된 트랜지션 속성명입니다.

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

여러 작업이 요소의 계산된 값에 영향을 줄 수 있습니다. 사용자 에이전트는 최적화를 위해 이러한 값의 재계산을 필요할 때까지 연기할 수 있습니다. 그러나 이 명세서에 정의된 프로그래밍 인터페이스의 모든 작업과, 이 명세서에서 정의된 객체를 반환할 수 있는 Web Animations [WEB-ANIMATIONS]에 정의된 작업은 모든 대기 중인 계산값 변경을 완전히 처리한 결과와 일치하는 결과를 반드시 생성해야 합니다.

elem.style.transition = 'opacity 100s';
elem.style.opacity = '0';
window.getComputedStyle(elem).opacity; // 0
elem.style.opacity = '1';
elem.getAnimations()[0].transitionProperty // 'opacity'

7. 프라이버시 고려사항

이 명세서에 대해 새롭게 보고된 프라이버시 고려사항은 없습니다.

8. 보안 고려사항

이 명세서에 대해 새롭게 보고된 보안 고려사항은 없습니다.

9. 변경 사항

9.1. Level 1 이후 최초 공개 작업 초안의 변경 사항

• 이제 불연속적으로 애니메이션 가능한 속성에도 트랜지션이 발생할 수 있습니다. 새로 도입된 transition-behavior 속성을 통해 이 동작을 선택할 수 있습니다.
• @starting-style 규칙 (및 CSSStartingStyleRule 인터페이스) 도입됨에 따라, 스타일이 렌더링되지 않은 상태에서 렌더링되는 상태로 바뀌는 요소에도 트랜지션을 적용할 수 있습니다.
• Web Animations API와의 상호작용이 더 명확하게 정의되었습니다:
  • CSSTransition 인터페이스가 정의됨.
  • 생성된 애니메이션의 합성 순서가 정의됨.
  • 생성된 애니메이션의 애니메이션 클래스가 정의됨.
  • 트랜지션에서 생성된 후 Web Animations API를 통해 재사용된 애니메이션 객체의 캐스케이드 레벨이 정의되며, 이를 정의하기 위해 owning element 개념도 포함됨.
  • 이벤트 디스패치 규칙이 명확히 명시되어, Web Animations API로 애니메이션을 탐색하거나 반전할 때의 동작을 설명함.
  • Web Animations API와 중단된 트랜지션의 빠른 반전 규칙의 상호작용이 명시됨.
  • § 6.2 대기 중인 스타일 변경에 대한 요구사항 명시됨.
• 더 이상 렌더링되지 않는 요소의 트랜지션 처리 방식이 더 명확하게 정의됨 (트랜지션은 취소되고 완료된 트랜지션 집합에서 제거됨).

10. 이전 레벨에서 자주 제기된 이슈

이 이슈들은 이전 레벨의 명세에서 자주 보고된 이슈입니다.

11. 이전 레벨에서 연기된 명세 이슈

이 이슈들은 이전 레벨에 있었지만, 이 레벨에서도 중요하지 않을 수 있습니다.