CSS Transitions Level 2

1. Delta specification

This is a delta specification, meaning that it currently contains only the differences from CSS Transitions Level 1 [CSS3-TRANSITIONS]. Once the Level 1 specification is closer to complete, it will be merged with the additions here into a complete level 2 specification.

2. Starting of transitions

Associated with each top-level browsing context is a current transition generation#current-transition-generationReferenced in:2. Starting of transitions that is incremented on each style change event.

Each time a new transition is generated, the current value of the (already incremented) current transition generation is stored as the transition’s transition generation#transition-generationReferenced in:2.3. Animation composite order (2).

2.1. The transition property name

Although the transition-property may specify shorthand properties and the all keyword, individual transitions are generated for each longhand sub-property that is animatable. The expanded transition property name#expanded-transition-property-nameReferenced in:2.3. Animation composite order4.1. The CSSTransition interface of a transition is the name of the longhand sub-property for which the transition was generated (e.g. border-left-width).

2.2. Owning element

The owning element#owning-elementReferenced in:2.2. Owning element (2) (3)2.3. Animation composite order (2) (3) (4) (5) (6) (7) (8) of a transition refers to the element or pseudo-element to which the transition-property property was applied that generated the animation.

If a transition was generated directly by script (e.g. using the CSSTransition constructor) then it has no owning element.

If a transition generated using the markup defined in this specification is later disassociated from that markup because it is cancelled or replaced by a newer transition, the animation is disassociated from its owning element (that is, it has no owning element from that point forwards).

Define the above more precisely once we rewrite firing of transitions in terms of Web Animations concepts (specifically when we spell out when we cancel an animation).

2.3. Animation composite order

Animations generated from the markup and interfaces (e.g. the CSSTransition constructor) defined in this specification have an animation class of ‘CSS Transition’.

CSS Transitions have an earlier composite order that CSS Animations and animations without a specific animation class.

Within the set of CSS Transitions, two animations A and B are sorted in composite order (first to last) as follows:

1. If neither A nor B has an owning element, sort based on their relative position in the global animation list.

2. Otherwise, if only one of A or B has an owning element, let the animation with an owning element sort first.

3. Otherwise, if the owning element of A and B differs, sort A and B by tree order of their corresponding owning elements. With regard to pseudo-elements, the sort order is as follows:

   • element

   • ::before

   • ::after

   • element children

4. Otherwise, if A and B have different transition generation values, sort by their corresponding transition generation in ascending order.

5. Otherwise, sort A and B in ascending order by the Unicode codepoints that make up the expanded transition property name of each transition (i.e. without attempting case conversion and such that ‘-moz-column-width’ sorts before ‘column-width’).

Transitions generated using the markup defined in this specification are not added to the global animation list when they are created. Instead, these animations are appended to the global animation list at the first moment when they transition out of the idle play state after being disassociated from their owning element. Transitions that have been disassociated from their owning element but are still idle do not have a defined composite order.

Note, this behavior relies on the fact that disassociating a transition from its owning element always causes it to enter (or remain) in the idle play state.

Transitions created using the CSSTransition constructor are appended to the global animation list at the moment they are constructed.

3. Transition Events

3.1. Types of TransitionEvent

The additional types of transition events that can occur are:

transitionstart#eventdef-transitionevent-transitionstartReferenced in:3.1. Types of TransitionEvent

The transitionstart event occurs when a transition is started (i.e., when it is added to the set of running transitions).

• Bubbles: Yes
• Cancelable: No
• Context Info: propertyName, elapsedTime, pseudoElement

transitioncancel#eventdef-transitionevent-transitioncancelReferenced in:3.1. Types of TransitionEvent

The transitioncancel event occurs when a transition is cancelled.

• Bubbles: Yes
• Cancelable: No
• Context Info: propertyName, elapsedTime, pseudoElement

4. DOM Interfaces

4.1. The CSSTransition interface

interface CSSTransition#csstransitionReferenced in:2.2. Owning element2.3. Animation composite order (2)4.1. The CSSTransition interface (2)4.2. Requirements on pending style changes (2) : Animation {
  readonly attribute DOMString transitionProperty;
};

transitionProperty#dom-csstransition-transitionpropertyReferenced in:4.1. The CSSTransition interface, of type DOMString, readonly

The expanded transition property name of this transition.

[Constructor (Animatable? target,
              DOMString transitionProperty,
              any transitionValue,
              optional (unrestricted double or KeyframeEffectOptions) options),
 Constructor (Animatable? target,
              DOMString transitionProperty,
              any transitionValue,
              (unrestricted double or KeyframeEffectOptions) options,
              AnimationTimeline? timeline)]
partial interface CSSTransition { };

var transition = new CSSTransition(elem, 'opacity', 1, 2000);
transition.play();

4.2. Requirements on pending style changes

Various operations may affect the computed values of properties on elements. User agents may, as an optimization, defer recomputing these values until it becomes necessary. However, all operations included in programming interface defined in this specification, as well as those operations defined in Web Animations [WEB-ANIMATIONS] that may return objects defined by this specification, must produce a result consistent with having fully processed any such pending changes to computed values.

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

5. Issues commonly raised as issues with previous levels

These issues were commonly reported issues with the previous level of the specification.

6. Issues deferred from previous levels of the spec

These issues were in previous levels of the specification, but may not turn out to be important in this level either.