CSS Animations Level 2

1. Delta specification

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

2. Animations

Changes to any of the animation properties defined in this specification cause the corresponding CSSAnimation object and its associated objects to be updated according to the correspondence between these properties and Web Animations concepts defined in § 3 Assembling Keyframes.

However, if the author modifies the animation using the Web Animations programming interface, the changes from the programming interface take precedence as follows:

• After a successful call to setKeyframes() on the KeyframeEffect associated with a CSSAnimation, any subsequent change to matching @keyframes rules or the resolved value of the animation-timing-function property for the target element will not be reflected in that animation.

  However, if the last matching @keyframes rule is removed the animation must still be canceled.

• After a successful call to updateTiming() on the KeyframeEffect associated with a CSSAnimation, for each property included in the timing parameter, any subsequent change to a corresponding animation property will not be reflected in that animation.

  For example, calling cssAnimation.effect.updateTiming({ duration: 1000 }) would cause subsequent changes to animation-duration to be ignored whilst changes to animation-delay would still be reflected in the KeyframeEffect's timing.

• After a successful call to play() or pause() on a CSSAnimation, any subsequent change to the animation-play-state will no longer cause the CSSAnimation to be played or paused as defined in § 4.5 The animation-play-state property.

• After a successful call to reverse() on a CSSAnimation or after successfully setting the startTime on a CSSAnimation, if, as a result of that call the play state of the CSSAnimation changes to or from the paused play state, any subsequent change to the animation-play-state will no longer cause the CSSAnimation to be played or paused as defined in § 4.5 The animation-play-state property.

  The requirement for a change to or from the paused play state ensures that even after calling reverse() or setting the startTime on a running animation, the animation continues to observe changes in animation-play-state.

• After successfully setting the effect of a CSSAnimation to null or some AnimationEffect other than the original KeyframeEffect, all subsequent changes to animation properties other than animation-name or animation-play-state will not be reflected in that animation. Similarly, any change to matching @keyframes rules will not be reflected in that animation. However, if the last matching @keyframes rule is removed the animation must still be canceled.

Note, the reference to a successful call in the above rules is necessary to ensure that when an exception is thrown by any of these methods, the override behavior is not applied.

2.1. Owning element

The owning element of an animation refers to the element or pseudo-element to which the animation-name property was applied that generated the animation.

If the display property of an element is set to none and its display value would compute to none when ignoring the Transitions and Animations cascade origins, then terminate running animations with this owning element. If an element has a display of none and its display value had computed to none when ignoring the Transitions and Animations cascade origins, updating display to a value other than none will start all animations applied to the element by the animation-name property.

Note: In practice, this means that an animation to a display value of none will not terminate running animations unless the style also computes to none without the effect of the animations.

If an animation generated using the markup defined in this specification is later disassociated from that markup by an update to the computed value of the animation-name property on the owning element, the animation is disassociated from its owning element (that is, it has no owning element from that point forwards).

elem.style.animation = 'spin 1s';
let animation = elem.getAnimations()[0]; // animation’s owning element is elem
elem.style.animation = ''; // animation no longer has an owning element

elem.style.animation = 'move 1s';
let animation = elem.getAnimations()[0];
// animation.effect.target == elem == animation’s owning element

animation.effect.target = elem2;
// animation.effect.target == elem2 != animation’s owning element

animation.effect = null;
// animation.effect?.target is undefined != animation’s owning element

2.2. Animation composite order

Animations generated from the markup defined in this specification have an animation class of ‘CSS Animation’.

CSS Animations with an owning element have a later composite order than CSS Transitions but an earlier composite order than animations without a specific animation class.

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

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

2. Otherwise, sort A and B based on their position in the computed value of the animation-name property of the (common) owning element.

The composite order of CSS Animations without an owning element is based on their position in the global animation list.

This differs from the behavior defined for transitions. We should probably sort transitions first, then animation, then use the global animation list. The reason being that when developer tools etc. hang on to orphaned animations and transitions in order to replay them, they should maintain roughly the same composite order.

CSS Animations 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. CSS Animations 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 an animation from its owning element always causes it to enter (or remain) in the idle play state.

3. Assembling Keyframes

3.1. Declaring Keyframes: the @keyframes rule

See CSS Animations 1 § 3 Keyframes.

3.2. Processing Keyframes

For each animation effect defined by the Nth item in the coordinated value list of the animation-* properties on target (pseudo-)element element, its associated keyframes are generated as follows:

1. Set Defaults:

   • Let default timing function be the corresponding computed value of animation-timing-function on element.

   • Let default composite be the corresponding computed value of animation-composition on element.

   • Let keyframes be an empty sequence of keyframe objects, each possessing a keyframe offset, keyframe timing function, keyframe composite, and keyframe values.

   • Let animated properties be an empty set of CSS property names.

2. Collect Declared Keyframes:

   1. Find the last @keyframes at-rule in document order with <keyframes-name> matching the corresponding animation-name value name.

      If there is no @keyframes at-rule with <keyframes-name> matching name (or if name is none), abort this procedure. In this case no animation is generated, and any existing animation matching name is canceled.

   2. Group together all keyframe blocks that share the same specified <keyframe-selector> (treating from as 0% and to as 100%), last declared animation-timing-function computed value (defaulting to default timing function if there is no such declaration), and last declared animation-composition computed value (defaulting to default composite if there is no such declaration).

   3. For each such group of matching keyframe blocks, ordered by their earliest keyframe block in the sorted order:

      1. Cascade together all of its declaration blocks such that for each CSS property (except those that are “not animatable”, which must be ignored) the last declaration among all its keyframe blocks takes precedence. [CSS-CASCADE-4]

         Note: The cascade will expand shorthand properties into their sub-properties and map together corresponding property pairs in each logical property group according to the element’s computed writing mode.

      2. Append to keyframes a new empty keyframe keyframe with the group’s keyframe offset, keyframe timing function, and keyframe composite. Give its keyframe values the set of declared values resulting from this cascade.

      3. Add each property name that was added to its keyframe properties to animated properties.

3. Generate Initial and Final Frames:

   1. Find or create the initial keyframe, a keyframe with a keyframe offset of 0%, default timing function as its keyframe timing function, and default composite as its keyframe composite.

   2. For any property in animated properties that is not otherwise present in a keyframe with an offset of 0% or one that would be positioned earlier in the used keyframe order, add the computed value of that property on element to initial keyframe’s keyframe values.

   3. If initial keyframe’s keyframe values is not empty, prepend initial keyframe to keyframes.

   4. Repeat for final keyframe, using an offset of 100%, considering keyframes positioned later in the used keyframe order, and appending to keyframes.

4. Sort Frames:

   • The specified order of keyframes is the order resulting from the steps above, i.e. document order with duplicate keyframes collapsed to the earliest position.

   • The computed order of keyframes—which is the order returned by getKeyframes()—is found by shifting any keyframes whose offset was specified as a <percentage>, from keyword, or to keyword to the front of the list (after the generated initial keyframe, if any), and performing a stable sort on these keyframes by their keyframe offsets.

   • The used order of keyframes—which is the order used to interpolate and compute the actual animation frames—is found by attaching the keyframes onto the animation effect’s timeline assuming an iteration count of 1 and ordering them from earliest to latest, breaking ties by using the computed keyframe order.

   Any specific requirements on sorting computed keyframes introduced by this spec should be integrated into Web Animations § 5.3.3 Calculating computed keyframes. Any specific requirements on used keyframes introduced by this spec should be integrated into Web Animations § 5.3.4 The effect value of a keyframe effect. The above description of the distinction between these sets of keyframes should be moved to an informative note.

   Note: Although the computed keyframe order sorts keyframes with <percentage> offsets, it maintains keyframes specified with a <timeline-range-name> in their specified keyframe order—after any <percentage> keyframes (other than a generated final keyframe), even if these come later in the used keyframe order.

4. Declaring Animations

CSS Animations are defined by binding keyframes to an element using the animation-* properties. These list-valued properties, which are all longhands of the animation shorthand, form a coordinating list property group with animation-name as the coordinating list base property and each item in the coordinated value list defining the properties of a single animation effect.

See CSS Values 4 § A Coordinating List-Valued Properties for how the individual animation-* property values coordinate.

4.1. The animation-duration property

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

auto

For time-driven animations, equivalent to 0s.

For scroll-driven animations, equivalent to the duration necessary to fill the timeline in consideration of animation-range, animation-delay, and animation-iteration-count. See Scroll-driven Animations § 4.1 Finite Timeline Calculations.

<time [0s,∞]>

For time-driven animations, specifies the length of time that an animation takes to complete one cycle. A negative <time> is invalid.

If the <time> is 0s, like the initial value, the keyframes of the animation have no effect, but the animation itself still occurs instantaneously. Specifically, start and end events are fired; if animation-fill-mode is set to backwards or both, the first frame of the animation, as defined by animation-direction, will be displayed during the animation-delay. After the animation-delay the last frame of the animation, as defined by animation-direction, will be displayed if animation-fill-mode is set to forwards or both. If animation-fill-mode is set to none the animation will have no visible effect.

For scroll-driven animations, treated as auto.

4.2. The animation-timing-function property

The animation-timing-function is used to determine the timing function applied to each keyframe as defined in § 3 Assembling Keyframes.

4.3. The animation-iteration-count property

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

4.4. The animation-direction property

The animation-direction property specifies the playback direction of the animation’s associated animation effect.

4.5. The animation-play-state property

The animation-play-state is used to pause or play the animation.

If at any time, including when the animation is first generated, the resolved value of animation-play-state corresponding to an animation is newly running, the implementation must run the procedure to play an animation for the given animation with the auto-rewind flag set to false.

If at any time, including when the animation is first generated, the resolved value of animation-play-state corresponding to an animation is newly paused, the implementation must run the procedure to pause an animation for the given animation.

The above requirements do not apply if the animation’s play state is being overridden by the Web Animations API as described in § 2 Animations.

4.6. The animation-delay property

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

4.7. The animation-fill-mode property

The animation-fill-mode property specifies the fill mode of the animation’s associated animation effect.

4.8. The animation-composition property

The animation-composition property defines the composite operation used when multiple animations affect the same property simultaneously.

<single-animation-composition> = replace | add | accumulate

The values of animation-composition have the meaning defined for the corresponding values of the composite operation defined in Web Animations [WEB-ANIMATIONS].

When specified in a keyframe, animation-composition defines the composite operation to use for each property specified in that keyframe until the next keyframe specifying each property.

@keyframes heartbeat {
  from {
    scale: 1;
    animation-timing-function: ease-out;
  }
  30% {
    scale: 1.3;
  }
}
.heartbeat {
  animation: heartbeat 0.3s 2s infinite;
}

@keyframes throb {
  50% {
    scale: 1.8;
  }
}
.icon:mouseover {
  animation: throb 0.4s add;
}

.icon {
  filter: blur(20px);
  transition: filter 0.5s;
}
.icon:hover {
  filter: blur(0px);
  animation: brightness-pulse 3s infinite add;
}

@keyframes brightness-pulse {
  0% {
    scale: 1.1;
    filter: brightness(130%);
  }
  10% {
    scale: 1;
    filter: brightness(100%);
  }
}

4.9. The animation-timeline property

The animation-timeline property defines the timeline used with the animation.

Note: This specification does not introduce any syntax to specify animation timelines but instead it is up to others specifications such as Scroll-linked Animations [SCROLL-ANIMATIONS] to do so.

<single-animation-timeline> = auto | none | <custom-ident> | <scroll()> | <view()>

The animation-timeline property is similar to properties like animation-name and animation-duration in that it can have one or more values, each one imparting additional behavior to a corresponding animation on the element, with the timelines matched up with animations as described here.

Each value has type <single-animation-timeline>, whose possible values have the following effects:

auto

The animation’s timeline is a DocumentTimeline, more specifically the default document timeline.

none

The animation is not associated with a timeline.

<custom-ident>

If a named scroll progress timeline or view progress timeline is in scope on this element, use the referenced timeline as defined in Scroll-driven Animations § 4.2 Named Timeline Scoping and Lookup.

Otherwise the animation is not associated with a timeline.

<scroll()>

Use the scroll progress timeline indicated by the given scroll() function. See Scroll-driven Animations § 2.2.1 The scroll() notation.

<view()>

Use the view progress timeline indicated by the given view() function. See Scroll-driven Animations § 3.3.1 The view() notation.

Make it easier to use animation-name to select the timeline when animation-timeline is not specified. Allowing animation-name to be used for selecting timeline enables most common animations to have to use a single name for both their keyframes and timeline which is simple and ergonomics. The animation-timeline property gives authors additional control to independently select keyframes and timeline if necessary.

When multiple animation-* properties are set simultaneously, animation-timeline is updated first, so e.g. a change to animation-play-state applies to the simultaneously-applied timeline specified in animation-timeline.

4.10. The animation shorthand property

The animation shorthand property syntax is as follows:

<single-animation> = <'animation-duration'> || <easing-function> || <'animation-delay'> || <single-animation-iteration-count> || <single-animation-direction> || <single-animation-fill-mode> || <single-animation-play-state> || [ none | <keyframes-name> ] || <single-animation-timeline>

5. Animation Events

5.1. Event dispatch

Note, this is a more general description of event dispatch than that of CSS Animations Level 1 [CSS3-ANIMATIONS] since it must account for the possibility of animations being seeked or reversed using the Web Animations API [WEB-ANIMATIONS].

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

For the purpose of determining which events to dispatch, the phases defined in the Web Animations model are used. These definitions apply to an animation effect, however, for the purpose of dispatching events, we consider a CSS Animation to have the same phase as its associated effect. For example, a CSS Animation is in the before phase if its associated effect is in the before phase.

A CSS Animation that does not have an associated effect is considered to be in the idle phase if its current time is unresolved, in the before phase if its current time is less than zero, and in the after phase otherwise.

Similarly, subsequent references to the start delay, active duration, current iteration, iteration start, and iteration duration of a CSS animation should be understood to refer to the corresponding properties of the animation’s 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)

Each time a new animation frame is established and the animation does not have a pending play task or pending pause task, the events to dispatch are determined by comparing the animation’s phase before and after establishing the new 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.

† The elapsed time for an animationiteration event is defined as follows:

1. Let previous current iteration be the current iteration from the previous animation frame.

2. If previous current iteration is greater than current iteration, let iteration boundary be current iteration + 1, otherwise let it be current iteration.

3. The elapsed time is the result of evaluating (iteration boundary - iteration start) × iteration duration).

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

6. DOM Interfaces

6.1. The CSSAnimation interface

[Exposed=Window]
interface CSSAnimation : Animation {
  readonly attribute CSSOMString animationName;
};

animationName, of type CSSOMString, readonly

The key used to find matching keyframes rules that define the associated effect at the point when the animation was created. This is the value of the animation-name property that caused this object to be generated.

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 or animation state defined by this specification, must produce a result consistent with having fully processed any such pending changes to computed values.

elem.style.animation = 'fadeOut 1s';
elem.getAnimations()[0].pause();

elem.style.animation = 'fadeOut 1s paused';
const anim = elem.getAnimations()[0];
elem.style.animationPlayState = 'running';
console.log(anim.playState); // Should be 'running'.

7. Privacy Considerations

No privacy concerns have been reported on this specification.

8. Security Considerations

No security concerns have been reported on this specification.

9. Changes

9.1. Recent Changes

Changes since the 2 March 2023 Working Draft include:

• Added auto as the initial value of animation-duration. (Issue 6530)
• Rewrote § 3.2 Processing Keyframes to re-use the cascade, to handle non-percentage keyframe offsets, to handle keyframes with offsets outside the [0,1] range, and to use the value of animation-composition as the default composit.
• Reduced the cases where display: none cancel an animation. (Issue 6429)
• Cross-linked to CSS Values 4 § A Coordinating List-Valued Properties to define how the various animation-* properties interact.
• Clarified that among the animation properties, animation-timeline is applied first.

9.2. Changes since CSS Animations, Level 1

• The interaction between CSS Animations and Web Animations is defined, and the concepts of the owning element and animation composite order are introduced.
• Generation of keyframe objects is described in detail.
• The animation-composition property is introduced, which defines the composite operation used when multiple animations affect the same property simultaneously.
• The animation-timeline property is introduced, which defines the timeline used with the animation.
• The animation shorthand property is updated to account for these new properties.
• Dispatch of animation events is described.
• The CSSAnimation interface is added.
• Requirements on pending style changes are described.