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. Transitions

2.1. The transition-property Property

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 of a transition is the name of the longhand sub-property for which the transition was generated (e.g. border-left-width).

2.2. The transition-duration Property

The transition-duration property specifies the iteration duration of the transition’s associated animation effect.

2.3. The transition-timing-function Property

The transition-timing-function property specifies the timing function of the transition’s associated animation effect (see Web Animations 1 § 4.10 Time transformations).

Note: Unlike CSS animations, the timing function for CSS transitions applies to the animation effect as opposed to the individual keyframes since this allows it to be reflected in the transformed progress as used when calculating the reversing shortening factor.

2.4. The transition-delay Property

The transition-delay property specifies the start delay of the transition’s associated animation effect.

3. Starting of transitions

The owning element of a transition refers to the element or pseudo-element to which the transition-property property was applied that generated the animation. A transition may be disassociated from its owning element such that it has no owning element.

The set of running transitions includes only those transitions that have an owning element.

Whenever an implementation is required to cancel a transition, it must disassociate the transition from its owning element and run the procedure to cancel an animation on the transition.

Although not explicitly defined by level 1 of this specification, in addition to canceling transitions on elements that are no longer connected, implementations must also cancel any running transitions on elements that are no longer being rendered and remove transitions on them from the set of completed transitions.

Note that calling the cancel() method on the CSSTransition object representing a running transition does not cause the transition to be disassociated from its owning element.

3.1. Faster reversing of interrupted transitions

The reversing shortening factor and reversing-adjusted start value associated with a transition in order to produce correct reverse behavior, are associated with the transition itself and not, for example, its animation effect. As a result, transitions will use these same values when producing a reversed transition, even if the transition’s associated animation effect has been updated or replaced using the Web Animations API [WEB-ANIMATIONS].

3.2. The current transition generation

Associated with each top-level browsing context is a current transition generation 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.

4. Application of transitions

4.1. Animation composite order

Animations generated from the markup 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

   • ::marker

   • ::before

   • any other pseudo-elements not mentioned specifically in this list, sorted in ascending order by the Unicode codepoints that make up each selector

   • ::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.

4.2. Animation cascade level

Animations with an animation class of ‘CSS Transition’ that have an owning element are applied to the ‘Transitions declaration’ level of the CSS cascade. All other animations generated by the markup defined in this specification, including animations that no longer have an owning element, are applied to the ‘Animation declarations’ level of the cascade. (See Web Animations 1 § 5.4.5 Applying the composited result.)

5. Transition Events

5.1. Event dispatch

Note, this is a more general description of event dispatch than that of CSS Transitions Level 1 [CSS3-TRANSITIONS] since it must account for the possibility of animations being seeked or reversed using the Web Animations API [WEB-ANIMATIONS]. Furthermore, it is possible using the Web Animations API to substitute the transition effect with an entirely different effect with properties not normally used with transitions (e.g. an effect that repeats multiple times) and hence this section provides a generic definition that accounts for the full complexity of the Web Animations model.

The target for a transition event is the transition’s owning element. If there is no owning element, no transition events are dispatched (although the animation playback events defined in Web Animations are still dispatched at the corresponding CSSTransition object).

To avoid firing redundant events, the set of events to dispatch is based on comparing the phase of the transition in the previous animation frame to its current state.

The transition phase of a transition is initially ‘idle’ and is updated on each animation frame according to the first matching condition from below:

If the transition has no associated effect,

The transition phase is set according to the first matching condition from below:

If the transition has an unresolved current time,

The transition phase is ‘idle’.

If the transition has a current time < 0,

The transition phase is ‘before’.

Otherwise,

The transition phase is ‘after’.

If the transition has a pending play task or a pending pause task and its phase was previously ‘idle’ or ‘pending’,

The transition phase is ‘pending’.

Otherwise,

The transition phase is the phase of its associated effect.

For calculating the elapsedTime of each event, the following definitions are used:

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

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

In the above formulae, references to the start delay, active duration, current iteration, iteration start, and iteration duration of a transition should be understood to refer to the corresponding properties of the transition’s associated effect.

Each time a new animation frame is established, the events to dispatch are determined by comparing the transition phase in the previous and current animation frame as follows:

٭ Where multiple events are listed for a state change, all events are dispatched in the order listed and in immediate succession.

Since the elapsed time defined in the table and procedure above is expressed in milliseconds, it must be divided by 1,000 to produce a value in seconds before being assigned to the elapsedTime member of the TransitionEvent.

6. DOM Interfaces

6.1. The CSSTransition interface

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

✔MDN

CSSTransition/transitionProperty

In all current engines.

Firefox75+Safari13.1+Chrome84+

---

Opera?Edge84+

---

Edge (Legacy)?IENone

---

Firefox for Android?iOS Safari?Chrome for Android?Android WebView?Samsung Internet?Opera Mobile?

transitionProperty, of type CSSOMString, readonly

The expanded transition property name of this transition.

6.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'

7. Issues commonly raised as issues with previous levels

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

8. 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.