CSS Animations Module 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 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, animation-play-state, or animation-timeline 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.

When determining the composite order in order to sort animation events where either or both of the events is an animationcancel event, treat the CSS Animation(s) for which the animationcancel event was generated as having an owning element corresponding to the owning element in use at the moment when the CSS Animation was cancelled. Furthermore, use the position of the animation in the animation-name property in effect at the time when the CSS Animation was cancelled sorting such that positions of cancelled animations sort before positions of animations that have not been cancelled.

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 Declaring 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-block> declarations 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-block> declarations, 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-block> declarations 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 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 cssRules 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.

For scroll-driven animations, treated as auto.

If the used animation-duration is 0s, the animation itself still occurs (instantaneously). The animation’s start and end events are still 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; and if animation-fill-mode is set to forwards or both, the last frame of the animation (as defined by animation-direction) will be displayed after the animation-delay. However, if animation-fill-mode is set to none the keyframes of the animation animation will have no noticeable effect.

For backwards-compatibility with Level 1, when the computed value of animation-timeline is auto (i.e. only one list value, and that value being auto), the resolved value of auto for animation-duration is 0s whenever its used value would also be 0s.

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

<dashed-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 §  Declaring a Named Timeline’s Scope: the timeline-scope property.

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-trigger property

The animation-trigger property specifies whether the animation is a triggered animation, and if it is, what trigger it responds to and what actions it takes in response. animation-trigger is a reset-only sub-property of the animation shorthand. Its values are:

none

The corresponding animation is not a triggered animation.

[ <dashed-ident> <animation-action>+ ]+

The corresponding animation is a triggered animation, responding to the triggers named by each <dashed-ident>, and responding by taking the action named by the corresponding <animation-action>. (See § 5.1 Trigger Scope/Resolution for how <dashed-ident>s are resolved to triggers.)

How many <animation-action>s a trigger accepts, and what exactly activates them, is determined by the type of the trigger. (Event triggers only take a single <animation-action>, while timeline triggers can take one or two.) Specifying the wrong number of actions (too many or too few) is valid syntactically, but causes the trigger to have no effect.

If multiple triggers occur simultaneously, they take effect in the order specified.

If the same <dashed-ident> is specified multiple times, all but the last have no effect.

The possible <animation-action> values, and what effect they have in each animation state:

4.11. 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. Triggers

While CSS animations are, by default, automatically run as soon as the appropriate animation values have been set on an element, the animation-trigger property allows the animation’s start to be delayed until an appropriate trigger occurs, and even paused, restarted, or reset by triggers (making it a triggered animation).

This is a simplified and streamlined version of what can be achieved with the Web Animations API in Javascript, allowing simple, common interaction patterns to be created and managed purely in CSS.

Currently, two types of triggers are defined:

• timeline triggers, managed by the timeline-trigger properties, which allow animations to be triggered by entering or leaving certain timeline ranges. (Usually, view progress timelines, so an animation can be started when an element comes on-screen, without actually driving the animation with the scroll progress.)

• event triggers, managed by the event-trigger properties, which allow animations to be triggered by certain user-interaction events, such as clicking an element or pressing certain keys.

A trigger is defined on some specific triggering element. All triggers have a name, and the specific type of trigger dictates how and when it’s activated. A trigger can define multiple "types" of activation. (For example, timeline triggers can do different things on entry and exit.)

A trigger is used on potentially any element, for some specific purpose (currently, just animation-trigger). A trigger-using element specifies what trigger(s) it’s listening to, and what actions (currently, just <animation-action>s) to do in response to that activation.

Note: This design for triggers, and the way they’re associated with triggered animations and <animation-action>s, is intentionally somewhat generic, intended to support using triggers for other purposes in the future. For now, though, triggered animations are the only user of this feature.

5.1. Trigger Scope/Resolution

All triggers are document-global by default, similar to anchor names.

If a single element attempts to define multiple triggers of different types with the same name, it only exposes one of them, with event triggers winning over timeline triggers.

Note: This order is completely arbitrary (based on alphabetic order of the concept name), as this is just an error case.

If multiple elements define triggers with the same name, the trigger defined by the later element in tree order is used.

Note: This behavior will be improved by a trigger-scope property, not yet defined, letting you define triggers that are only visible to subtrees and references that only search in that subtree (just like anchor-scope).

5.2. Timeline Triggers

A timeline trigger is a trigger which is activated when some timeline enters the trigger’s enter range, or leaves the trigger’s exit range. It is defined on an element with the timeline-trigger shorthand property, or its longhands.

A timeline trigger has a binary trigger state associated with it; it is initially "untriggered". While it’s "untriggered", the associated timeline entering (or starting in) the trigger’s enter range performs an associated enter action and switches the trigger state to "triggered"; while it’s "triggered", the associated timeline leaving the trigger’s exit range performs an associated exit action and switches the trigger state to "untriggered".

Note: By default, the exit range is the same as the enter range; even when manually specified, the exit range is always a superset of the enter range. The two ranges allow, for example, an animation-trigger to start an animation when an element is scrolled close the center of the screen (using a view progress timeline with a relatively small window as the enter range), but not stop it until the element is fully off-screen (using cover as the exit range).

I think it’s WebAnim2 that needs to define that exit ranges are interpreted as the bounding range of the enter range and what’s specified for the exit range.

A timeline trigger can have one or two actions associated with it when used as a trigger on an element (such as by animation-trigger). If two are specified, the first is the trigger’s enter action and the second is the trigger’s exit action; if only one is specified, the first is the trigger’s enter action and its exit action is to do nothing.

An element can define multiple timeline triggers, using the same timeline (potentially with different ranges) or different ones. The set of timeline-trigger longhands form a coordinating list property group, with timeline-trigger-name as the coordinating list base property, and each item in the coordinated value list defining the properties of a single timeline trigger.

5.2.1. Naming the Trigger: the timeline-trigger-name property

If none is specified, the element does not define any timeline triggers.

If the same <dashed-ident> appears multiple times in the list, only the last one defines a timeline trigger; the preceding ones have no effect.

5.2.2. Linking a Timeline: the timeline-trigger-source property

The timeline-trigger-source property specifies the timeline trigger’s associated timeline. Values have the same meaning as those of animation-timeline, except that none instead causes the corresponding entry in the coordinated value list to not define a timeline trigger.

5.2.3. The Enter Range: the timeline-trigger-range property

The timeline-trigger-range property is a shorthand property that sets timeline-trigger-range-start and timeline-trigger-range-end together in a single declaration. It has the same syntax as the animation-range property.

The behavior of timeline-trigger-range is defined in Web Animations 2 § 3.6.5 Animation Trigger Ranges.

Need to rewrite WebAnim2 to use the term "enter range".

The timeline-trigger-range-start and timeline-trigger-range-end properties specify the timeline trigger’s associated enter range. Values have the same meaning as animation-range-start and animation-range-end.

5.2.4. The Exit Range: the timeline-trigger-exit-range property

The timeline-trigger-exit-range property is a shorthand property that sets timeline-trigger-exit-range-start and timeline-trigger-exit-range-end together in a single declaration. It has the same syntax as the animation-range property.

The behavior of timeline-trigger-exit-range is defined in Web Animations 2 § 3.6.5 Animation Trigger Ranges.

The timeline-trigger-exit-range-start and timeline-trigger-exit-range-end properties specify the timeline trigger’s associated exit range. Values have the same meaning as animation-range-start and animation-range-end, with the following addition:

auto

The start (for timeline-trigger-exit-range-start) or end (for timeline-trigger-exit-range-end) is equal to the start/end of the timeline trigger’s enter range.

5.2.5. The timeline-trigger Shorthand

The timeline-trigger shorthand property sets all of timeline-trigger-name, timeline-trigger-source, timeline-trigger-range, and optionally timeline-trigger-exit-range at once.

A value of none is equivalent to none none normal.

Note: Due to significant potentially ambiguities in the syntax (timeline-trigger-name vs timeline names in timeline-trigger-source; enter ranges vs exit ranges), this shorthand’s values must be given in the specified order, rather than being settable in any order as is more common.

I think we need the / to disambiguate the two ranges?

5.3. Event Triggers

An event trigger is a trigger which is activated when certain Events are fired at the element. It is defined on an element with the event-trigger shorthand property, or its longhands.

An event trigger only has a single action associated with it, which it performs every time the trigger is activated.

An element can define multiple event triggers, using the same Events or different ones. The set of event-trigger longhands form a coordinating list property group, with event-trigger-name as the coordinating list base property, and each item in the coordinated value list defining the properties of a single event trigger.

5.3.1. Naming the Trigger: the event-trigger-name property

If none is specified, the element does not define any event triggers.

If the same <dashed-ident> appears multiple times in the list, only the last one defines a event trigger; the preceding ones have no effect.

5.3.2. Linking an Event: the event-trigger-source property

The event-trigger-source property specifies what event or events activate the event trigger.

<event-trigger-event> = activate | click | touch | dblclick | keypress(<string>) | ...

Whenever any of the specified Events are fired with this element as its target, the event target activates.

Figure out the full set of events we want to handle.

The proposal I drew this text from specified that it only cares if the element is the *target* of the event. We probably want to allow for bubbling and/or capturing, possibly as an opt in/out.

5.3.3. The event-trigger Shorthand

The event-trigger shorthand property sets both event-trigger-name and event-trigger-source at once.

A value of none is equivalent to none none.

6. Animation Events

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

7. DOM Interfaces

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

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

8. Privacy Considerations

No privacy concerns have been reported on this specification.

9. Security Considerations

No security concerns have been reported on this specification.

10. Changes

10.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 composite.
• 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.

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