From b14d0a8b358f244809df426e1a1cfd4f602146eb Mon Sep 17 00:00:00 2001 From: Stefan Zager Date: Thu, 29 May 2025 14:12:02 -0700 Subject: [PATCH 01/11] [css-animations-2] Fix bikeshed errors --- css-animations-2/Overview.bs | 173 ++++++++++++++++++----------------- 1 file changed, 87 insertions(+), 86 deletions(-) diff --git a/css-animations-2/Overview.bs b/css-animations-2/Overview.bs index 070e600bba9..d204cc09600 100644 --- a/css-animations-2/Overview.bs +++ b/css-animations-2/Overview.bs @@ -37,6 +37,8 @@ urlPrefix: https://dom.spec.whatwg.org/; type: dfn; spec: dom text: event target 
+spec:cssom-1; type:dfn;
+    text:property name; for:CSS declaration
 spec:web-animations-1; type:dfn;
     text:active duration
     text:active phase; for:animation effect
@@ -73,8 +75,8 @@ spec:web-animations-2; type:dfn;
     text:default range
     text:exit range
 spec:scroll-animations-1; type:dfn;
-	text:animation-range-start
-	text:animation-range-end
+    text:animation-range-start
+    text:animation-range-end

Delta specification

@@ -127,12 +129,12 @@ the changes from the programming interface take precedence as follows: or after successfully setting the {{Animation/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=], + {{CSSAnimation}} changes to or from the [=play state/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 [[#animation-play-state]]. - The requirement for a change to or from the [=paused play state=] + The requirement for a change to or from the [=play state/paused=] state ensures that even after calling {{Animation/reverse()}} or setting the {{Animation/startTime}} on a running animation, @@ -265,15 +267,14 @@ 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. +the first moment when they transition out of the [=play state/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. +but are still [=play state/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. +[=play state/idle=] play state.

Assembling Keyframes

@@ -286,7 +287,7 @@ See [[css-animations-1#keyframes]].

Processing Keyframes

-For each animation effect defined by the Nth item +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: @@ -306,7 +307,7 @@ its associated [=keyframes=] are generated as follows: |keyframe composite|, and |keyframe values|. - * Let |animated properties| be an empty set of CSS property names. + * Let |animated properties| be an empty set of CSS [=property names=]. 1. Collect Declared Keyframes: 1. Find the last ''@keyframes'' at-rule in document order @@ -320,7 +321,7 @@ its associated [=keyframes=] are generated as follows: In this case no animation is generated, and any existing animation matching |name| is canceled. - 1. Group together all [=keyframe blocks=] + 1. Group together all keyframe blocks that share the same [=specified value|specified=] <> (treating ''@keyframe/from'' as ''0%'' and ''@keyframe/to'' as ''100%''), last declared 'animation-timing-function' [=computed value=] @@ -343,14 +344,14 @@ its associated [=keyframes=] are generated as follows: and map together corresponding property pairs in each [=logical property group=] according to the |element|’s [=computed value|computed=] [=writing mode=]. - 1. Append to |keyframes| a new empty [=keyframe=] |keyframe| + 1. 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. - 1. Add each property name that was added to its |keyframe properties| + 1. Add each [=property name=] that was added to its {{CSSKeyframesRule/cssRules}} to |animated properties|. 1. Generate Initial and Final Frames: @@ -470,11 +471,11 @@ Declaring Animations If the [=used value|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'', + If 'animation-fill-mode' is set to ''single-animation-fill-mode/backwards'' or ''single-animation-fill-mode/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'', + and if 'animation-fill-mode' is set to ''single-animation-fill-mode/forwards'' or ''single-animation-fill-mode/both'', the last frame of the animation (as defined by 'animation-direction') will be displayed after the 'animation-delay'. @@ -746,25 +747,25 @@ The values of 'animation-trigger-behavior' have the following meaning for an [=animation trigger=] that enters its [=animation trigger/active interval|active interval=]:
-
once -
- The animation is triggered and played once and only once. - -
repeat -
- The animation is played from the beginning each time it is triggered. - When the trigger’s [=animation trigger/active interval=] is exited the animation is reset. - -
alternate -
- The animation is played forwards, according to its [=playback direction=], each time it is triggered. - When the trigger’s [=animation trigger/active interval=] is exited the animation is reversed. - -
state -
- The animation is triggered and played once. - When the trigger’s [=animation trigger/active interval=] is exited the animation is paused. - When the trigger’s [=animation trigger/active interval=] is re-entered the animation is resumed. +
once +
+ The animation is triggered and played once and only once. + +
repeat +
+ The animation is played from the beginning each time it is triggered. + When the trigger’s [=animation trigger/active interval=] is exited the animation is reset. + +
alternate +
+ The animation is played forwards, according to its [=playback direction=], each time it is triggered. + When the trigger’s [=animation trigger/active interval=] is exited the animation is reversed. + +
state +
+ The animation is triggered and played once. + When the trigger’s [=animation trigger/active interval=] is exited the animation is paused. + When the trigger’s [=animation trigger/active interval=] is re-entered the animation is resumed.
The behavior of each value is defined in [[web-animations-2#trigger-behaviors]]. @@ -858,7 +859,7 @@ The 'animation-trigger-exit-range' property is a [=shorthand property|shorthand= that sets 'animation-trigger-exit-range-start' and 'animation-trigger-exit-range-end' together in a single declaration, specifying the [=animation trigger=]’s associated [=exit range=]. -It has the same syntax as the 'animation-range' property, with the addition of the ''auto'' keyword. +It has the same syntax as the 'animation-range' property, with the addition of the ''animation-trigger-exit-range-start/auto'' keyword. The [=exit range=] replaces the [=default range=] once the [=animation trigger=]’s [=animation trigger/active interval|active interval=] is entered, @@ -888,31 +889,31 @@ associated [=exit range=]. The values of 'animation-trigger-exit-range-start' have the following meaning:
-
auto -
- The start of the trigger’s [=exit range=] - is equal to the start of its [=default range=]. - -
normal -
- The start of the trigger’s [=exit range=] - is the start of its associated [=timeline=]; - the start of the trigger’s [=animation trigger/active interval|active interval=] - is determined as normal. - -
<> -
- The [=exit range=] starts - at the specified point on the [=timeline=] - measuring from the start of the timeline. - -
<> <>? -
- The [=exit range=] starts - at the specified point on the [=timeline=] - measuring from the start of the specified [=named timeline range=]. - If the <> is omitted, - it defaults to 0%. +
auto +
+ The start of the trigger’s [=exit range=] + is equal to the start of its [=default range=]. + +
normal +
+ The start of the trigger’s [=exit range=] + is the start of its associated [=timeline=]; + the start of the trigger’s [=animation trigger/active interval|active interval=] + is determined as normal. + +
<> +
+ The [=exit range=] starts + at the specified point on the [=timeline=] + measuring from the start of the timeline. + +
<> <>? +
+ The [=exit range=] starts + at the specified point on the [=timeline=] + measuring from the start of the specified [=named timeline range=]. + If the <> is omitted, + it defaults to 0%.
## The 'animation-trigger-exit-range-end' property ## {#animation-trigger-exit-range-end} @@ -934,31 +935,31 @@ associated [=exit range=]. The values of 'animation-trigger-exit-range-start' have the following meaning:
-
auto -
- The end of the trigger’s [=exit range=] - is equal to the end of its [=default range=]. - -
normal -
- The end of the trigger’s [=exit range=] - is the end of its associated [=timeline=]; - the end of the trigger’s [=animation trigger/active interval|active interval=] - is determined as normal. - -
<> -
- The [=exit range=] ends - at the specified point on the [=timeline=] - measuring from the start of the timeline. - -
<> <>? -
- The [=exit range=] ends - at the specified point on the [=timeline=] - measuring from the start of the specified [=named timeline range=]. - If the <> is omitted, - it defaults to 100%. +
auto +
+ The end of the trigger’s [=exit range=] + is equal to the end of its [=default range=]. + +
normal +
+ The end of the trigger’s [=exit range=] + is the end of its associated [=timeline=]; + the end of the trigger’s [=animation trigger/active interval|active interval=] + is determined as normal. + +
<> +
+ The [=exit range=] ends + at the specified point on the [=timeline=] + measuring from the start of the timeline. + +
<> <>? +
+ The [=exit range=] ends + at the specified point on the [=timeline=] + measuring from the start of the specified [=named timeline range=]. + If the <> is omitted, + it defaults to 100%.
## The 'animation-trigger' property ## {#animation-trigger} From a00f16cb982ecbbfdddaf3c1d722694f7c7cf1ef Mon Sep 17 00:00:00 2001 From: Stefan Zager Date: Thu, 29 May 2025 14:52:23 -0700 Subject: [PATCH 02/11] [web-animations-2] Spec for event-based animation triggers --- css-animations-2/Overview.bs | 48 +++++++++++++++++++++- web-animations-2/Overview.bs | 78 +++++++++++++++++++++++++++++------- 2 files changed, 111 insertions(+), 15 deletions(-) diff --git a/css-animations-2/Overview.bs b/css-animations-2/Overview.bs index d204cc09600..8a95f03ee15 100644 --- a/css-animations-2/Overview.bs +++ b/css-animations-2/Overview.bs @@ -307,7 +307,7 @@ its associated [=keyframes=] are generated as follows: |keyframe composite|, and |keyframe values|. - * Let |animated properties| be an empty set of CSS [=property names=]. + * Let |animated properties| be an empty set of CSS property names. 1. Collect Declared Keyframes: 1. Find the last ''@keyframes'' at-rule in document order @@ -962,6 +962,52 @@ The values of 'animation-trigger-exit-range-start' have the following meaning: it defaults to 100%. +## The 'animation-trigger-name' property ## {#animation-trigger-name} + +The 'animation-trigger-name' property is used to associate an {{Element}} with +all [=event-based animation triggers=] whose [=animation trigger name=] matches +the property value. When an {{Event}} is dispatched +with the associated {{Element}} as {{Event/target}}, +and with {{Event/type}} matching an associated trigger's {{animation trigger/event type}}, +the trigger performs its effect on its associated [=animation=]. + +
+Name: animation-trigger-name
+Value: none | [ <> ]#
+Initial: none
+Applies to: all elements
+Inherited: no
+Percentages: N/A
+Computed value: the keyword ''animation-trigger-none'', or a list of case-sensitive css identifiers
+Animation type: not animatable
+
+ +
<trigger-name> = <>
+ +## The 'animation-trigger-event' property ## {#animation-trigger-event} + +The 'animation-trigger-event' property is used to specify the criteria +for an [=event-based animation trigger=] +to perform its effect on its associated [=animation=]. It consists of two parts: +an event type that is matched against the {{Event/type}} of a dispatched {{Event}}, +and a trigger name that is matched against the 'animation-trigger-name' property +of the event's {{Event/target}}. If both criteria match for a given event +the trigger will perform its effect on its associated [=animation=]. + +
+Name: animation-trigger-event
+Value: none | [ <> ]#
+Initial: none
+Applies to: all elements
+Inherited: no
+Percentages: N/A
+Computed value: the keyword ''animation-trigger-event/none'' or a list of case-sensitive css identifiers
+Animation type: not animatable
+
+ +
<single-trigger-event> = <> ( <> )
+
<trigger-event-type> = <>
+ ## The 'animation-trigger' property ## {#animation-trigger} The 'animation-trigger' property is a [=shorthand property|shorthand=] diff --git a/web-animations-2/Overview.bs b/web-animations-2/Overview.bs index 7e244743076..8d0a4e2053d 100644 --- a/web-animations-2/Overview.bs +++ b/web-animations-2/Overview.bs @@ -143,6 +143,7 @@ urlPrefix: http://www.ecma-international.org/ecma-262/6.0/#sec-; type: dfn; spec text: execution contexts urlPrefix: https://drafts.csswg.org/scroll-animations-1/; type: dfn; spec: scroll-animations-1 text: html-processing-model-event-loops +#interface-event 
@@ -2341,7 +2342,7 @@ Some alternatives under consideration:
 Since custom effects, unlike animation effects, are not limited to
 a single target property, the steps for assessing their
-order of execution differs from animation effects.f
+order of execution differs from animation effects.
 
 Custom effects are executed after all
 animation effects have completed and
@@ -2366,15 +2367,29 @@ Animation Triggers {#triggers}
 ### Overview ### {#triggers-overview}
 
 An animation trigger is used to control the playback
-of its associated [=animation=] for time-driven animations.
-Like animations, [=animation triggers=] are associated with a [=timeline=]
+of its associated [=animation=] for time-driven animations. There are two
+types of [=animation triggers=]:
+timeline-based and
+event-based.
+
+Like animations, [=timeline-based animation triggers=] are associated with a [=timeline=]
 and are attached to an [=animation attachment range|attachment range=].
+Changes to animation playback occur when the associated [=timeline=] transitions
+between inside and outside the [=animation attachment range|attachment range=].
+
+An [=event-based animation trigger=] is associated with
+an event type
+and an animation trigger name.
+Changes to animation playback occur when an {{Event!!interface}} is dispatched
+with {{Event/type}} matching the trigger's associated [=animation trigger/event type=]
+and {{Event/target}} which is an {{Element}} whose 'animation-trigger-name'
+property matches the trigger's associated [=animation trigger name=].
 
 Issue: Should there be any effect of triggers on scroll-driven animations?
 
-### Animation Trigger Internal State ### {#trigger-state}
+### Timeline-Based Animation Trigger Internal State ### {#trigger-state}
 
-An [=animation trigger=] |trigger|
+A [=timeline-based animation trigger=] |trigger|
 has an internal boolean did trigger flag, which is initially false,
 and an internal state with
 these possible values:
@@ -2393,10 +2408,15 @@ Issue: Do we need a formal resolution on the spec of the idle state?
 ### Animation Trigger Behavior ### {#trigger-behaviors}
 
 An [=animation trigger=] has an associated animation trigger behavior
-which, along with [=did trigger=] and [=animation trigger state|state=],
-determines the [=animation trigger|trigger=]'s effect on its
+which determines the [=animation trigger|trigger=]'s effect on its
 associated [=animation=]'s playback.
 
+#### Timeline-Based Animation Trigger Behavior #### {#timeline-trigger-behaviors}
+
+For [=timeline-based animation triggers=], the [=animation trigger behavior=]
+combines with [=did trigger=] and [=animation trigger state|state=] to determine
+the effect on playback.
+
 The [=animation effect=] associated with an [=animation trigger=]
 in the [=animation trigger state/idle=] state
 remains in its [=animation effect/before phase=] and
@@ -2460,13 +2480,42 @@ given values of behavior:
 
 Issue: Do we need a proper definition for "behavior types primary/inverse"?
 
-### Animation Trigger Active Interval ### {#trigger-active-interval}
+#### Event-Based Animation Trigger Behavior #### {#event-trigger-behaviors}
+
+For [=event-based animation triggers=] changes to animation playback happen when a
+qualifying event occurs, according to the trigger's [=animation trigger behavior=]
+and the current [=play state=] of the associated [=animation=]:
+
+

+  
''animation-trigger-type/once''

+  
If [=play state=] is [=play state/finished=], do nothing.
+      Otherwise, perform the actions specified for the {{Animation/play}} function.
+  

+
+  
''animation-trigger-type/repeat''

+  
First, if [=play state=] is [=play state/running=] or [=play state/paused=]
+      perform the actions specified for the {{Animation/cancel}} function.
+      Then, in all cases, perform the actions specified for the {{Animation/play}} function.
+  

+
+  
''animation-trigger-type/alternate''

+  
Perform the actions specified for the {{Animation/reverse}} function.

+
+  
''animation-trigger-type/state''

+  
If the [=play state=] is [=play state/running=],
+      perform the actions specified for the {{Animation/pause}} function.
+      Otherwise, perform the actions specified for the {{Animation/play}} function.
+  

+

+
+### Timeline-Based Animation Trigger Active Interval ### {#trigger-active-interval}
 
-Each [=animation trigger=] defines an active interval
+Each [=timeline-based animation trigger=] defines an
+active interval
 and only one such interval. This interval is the segment of the timeline’s progress
 during which the trigger’s [=animation trigger state|state=] is set to [=animation trigger state/primary=].
 
-### Animation Trigger Ranges ### {#trigger-ranges}
+### Timeline-Based Animation Trigger Ranges ### {#trigger-ranges}
 
 An [=animation trigger=] has two [=animation attachment range|ranges=],
 the default range and the exit range.
@@ -2501,10 +2550,11 @@ Depending on its most recent [=animation trigger state|state=] |state|, the
 
     1. Let the [=animation trigger|trigger=] of |animation| be |new trigger|.
 
-    1. Run the procedure to [=updating animation trigger state=] for |new trigger|.
+    1. If |new trigger| is a [=timeline-based animation trigger=],
+         run the [=updating animation trigger state=] procedure for |new trigger|.
   
 
-### Setting the timeline of an Animation Trigger ### {#setting-trigger-timeline}
+### Setting the timeline of a Timeline-Based Animation Trigger ### {#setting-trigger-timeline}
 
   

     The procedure of setting timeline of animation trigger |trigger|,
@@ -2519,11 +2569,11 @@ Depending on its most recent [=animation trigger state|state=] |state|, the
     1. Run the [=updating animation trigger state=] procedure for |trigger|.
   

 
-### Updating Animation Trigger State ### {#updating-trigger-state}
+### Updating Timeline-Based Animation Trigger State ### {#updating-trigger-state}
 
 

   The procedure of updating animation trigger state
-  of an [=animation trigger=] |trigger| is as follows:
+  of a [=timeline-based animation trigger=] |trigger| is as follows:
 
   1. Let |did trigger| be the current value of |trigger|'s [=did trigger=] flag.
 

From e3c486050a40b5631f84c4b19ad4660fd5c95a3f Mon Sep 17 00:00:00 2001
From: Stefan Zager 
Date: Thu, 29 May 2025 14:58:11 -0700
Subject: [PATCH 03/11] bikeshed previews

---
 css-animations-2/Overview.html | 4284 ++++++++++++++++++++
 web-animations-2/Overview.html | 6834 ++++++++++++++++++++++++++++++++
 2 files changed, 11118 insertions(+)
 create mode 100644 css-animations-2/Overview.html
 create mode 100644 web-animations-2/Overview.html

diff --git a/css-animations-2/Overview.html b/css-animations-2/Overview.html
new file mode 100644
index 00000000000..3bd0f85923c
--- /dev/null
+++ b/css-animations-2/Overview.html
@@ -0,0 +1,4284 @@
+
+ 
+  
+  
+  CSS Animations Level 2
+  
+  
+  
+  
+  
+  
+  
+  
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 
+  

+   
 

+   
CSS Animations Level 2

+   
Editor’s Draft, 

+   

+    More details about this document
+    

+     

+      
This version:
+      
https://drafts.csswg.org/css-animations-2/
+      
Latest published version:
+      
https://www.w3.org/TR/css-animations-2/
+      
Feedback:
+      
CSSWG Issues Repository
+      
Inline In Spec
+      
Editors:
+      
L. David Baron (Google)
+      
 (Invited Expert)
+      
Suggest an Edit for this Spec:
+      
GitHub Editor
+      
Issues List:
+      
https://github.com/w3c/csswg-drafts/labels/css-animations-2
+     

+    

+   

+   

+   
Copyright © 2025 World Wide Web Consortium. W3C® liability, trademark and permissive document license rules apply. 

+   

+  

+  

+   
Abstract

+   
This CSS module describes a way for authors to animate the values of CSS properties over time, using keyframes. The behavior of these keyframe animations can be controlled by specifying their duration, number of repeats, and repeating behavior.

+    CSS is a language for describing the rendering of structured documents
+(such as HTML and XML)
+on screen, on paper, etc. 
+  

+  
Status of this document

+  

+   
 This is a public copy of the editors’ draft.
+	It is provided for discussion only and may change at any moment.
+	Its publication here does not imply endorsement of its contents by W3C.
+	Don’t cite this document other than as work in progress. 

+   
Please send feedback
+	by filing issues in GitHub (preferred),
+	including the spec code “css-animations” in the title, like this:
+	“[css-animations] …summary of comment…”.
+	All issues and comments are archived.
+	Alternately, feedback can be sent to the (archived) public mailing list www-style@w3.org. 

+   
This document is governed by the 03 November 2023 W3C Process Document. 

+  

+  

+  
+  

+   
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:

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

+   

+    
In the example below, animation’s initial owning element is elem. animation is disassociated from element through an update to the computed value of elem’s animation-name property.

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

+    
Note that although the owning element is often equal to the target element of an animation’s associated effect,
+this is not always the case.
+The following example demonstrates some of the situations where these two
+elements may differ.

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

+   
+    
+     
+      
+      
+      
+      
+      
+      
+      
+      
+      
Name:
+      animation-duration
+     
Value:
+      [ auto | <time [0s,∞]> ]# 
+     
Initial:
+      auto 
+     
Applies to:
+      all elements 
+     
Inherited:
+      no 
+     
Percentages:
+      N/A 
+     
Computed value:
+      list, each item either a time or the keyword auto 
+     
Canonical order:
+      per grammar 
+     
Animation type:
+      not animatable 
+   

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

+   
+    
+     
+      
+      
+      
+      
+      
+      
+      
+      
+      
Name:
+      animation-composition
+     
Value:
+      <single-animation-composition>#
+     
Initial:
+      replace
+     
Applies to:
+      all elements
+     
Inherited:
+      no
+     
Percentages:
+      N/A
+     
Computed value:
+      list, each item a keyword as specified
+     
Canonical order:
+      per grammar
+     
Animation type:
+      not animatable
+   

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

+   

+     For example, the following stylesheet defines two different animations
+  targeting the scale 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;
+}
+

+    
If these two animations are applied to the same element, normally only
+  one animation would apply, but by specifying add as the animation-composition on the second animation, the result of the two
+  animations will be combined.

+    
Since CSS Transitions [CSS3-TRANSITIONS] have a lower composite
+  order, it is possible to use animation-composition to combine CSS
+  Animations with underlying transitions as in the following example.

+
.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%);
+  }
+}
+

+    
 Create pictures of these examples and verify they make sense.

+   

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

+   
+    
+     
+      
+      
+      
+      
+      
+      
+      
+      
+      
Name:
+      animation-timeline
+     
Value:
+      <single-animation-timeline>#
+     
Initial:
+      auto
+     
Applies to:
+      all elements
+     
Inherited:
+      no
+     
Percentages:
+      N/A
+     
Computed value:
+      list, each item either
+the keyword none,
+the keyword auto,
+a case-sensitive css identifier,
+a computed scroll() function,
+or
+a computed view() function
+     
Canonical order:
+      per grammar
+     
Animation type:
+      not animatable
+   

+
<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 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.  Declaring Animation Triggers

+   
Animation Triggers are defined using the animation-trigger-* properties.
+    These list-valued properties,
+    which are all longhands of the animation-trigger 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 trigger.

+   
The animation-trigger properties
+    are reset-only sub-properties of the animation shorthand.

+   
5.1. The animation-trigger-behavior property

+   
The animation-trigger-behavior property specifies the animation trigger behavior of the animation trigger.

+   
+    
+     
+      
+      
+      
+      
+      
+      
+      
+      
+      
Name:
+      animation-trigger-behavior
+     
Value:
+      <single-animation-trigger-behavior>#
+     
Initial:
+      once
+     
Applies to:
+      all elements
+     
Inherited:
+      no
+     
Percentages:
+      N/A
+     
Computed value:
+      list, each item a keyword as specified
+     
Canonical order:
+      per grammar
+     
Animation type:
+      not animatable
+   

+   
<single-animation-trigger-behavior> = once | repeat | alternate | state

+   
The values of animation-trigger-behavior have the following meaning
+for an animation trigger that enters its active interval:

+   

+    
once 
+    
 The animation is triggered and played once and only once. 
+    
repeat 
+    
 The animation is played from the beginning each time it is triggered.
+                When the trigger’s active interval is exited the animation is reset. 
+    
alternate 
+    
 The animation is played forwards, according to its playback direction, each time it is triggered.
+                When the trigger’s active interval is exited the animation is reversed. 
+    
state 
+    
 The animation is triggered and played once.
+                When the trigger’s active interval is exited the animation is paused.
+                When the trigger’s active interval is re-entered the animation is resumed. 
+   

+   
The behavior of each value is defined in Web Animations 2 § 4.6.3 Animation Trigger Behavior.

+   
5.2. The animation-trigger-timeline property

+   
The animation-trigger-timeline property specifies the timeline of the animation’s associated animation trigger.

+   
+    
+     
+      
+      
+      
+      
+      
+      
+      
+      
+      
Name:
+      animation-trigger-timeline
+     
Value:
+      <single-animation-timeline>#
+     
Initial:
+      auto
+     
Applies to:
+      all elements
+     
Inherited:
+      no
+     
Percentages:
+      N/A
+     
Computed value:
+      list, each item either
+the keyword none,
+the keyword auto,
+a case-sensitive css identifier,
+a computed scroll() function,
+or
+a computed view() function
+     
Canonical order:
+      per grammar
+     
Animation type:
+      not animatable
+   

+   
The values of animation-trigger-timeline have the same meaning as those of animation-timeline.

+   
 Probably a trigger with timeline "none" is under-specified here. Need to clarify what it means.

+   
5.3. The animation-trigger-range property

+   
+    
+     
+      
+      
+      
+      
+      
+      
+      
+      
+      
Name:
+      animation-trigger-range
+     
Value:
+      [ <'animation-trigger-range-start'> <'animation-trigger-range-end'>? ]#
+     
Initial:
+      see individual properties
+     
Applies to:
+      see individual properties
+     
Inherited:
+      see individual properties
+     
Percentages:
+      see individual properties
+     
Computed value:
+      see individual properties
+     
Animation type:
+      see individual properties
+     
Canonical order:
+      per grammar
+   

+   
The animation-trigger-range property is a shorthand that sets animation-trigger-range-start and animation-trigger-range-end together in a single declaration,
+specifying the animation trigger’s associated default range.
+It has the same syntax as the animation-range property.

+   
The behavior of animation-trigger-range is defined in Web Animations 2 § 4.6.5 Animation Trigger Ranges.

+   
5.4. The animation-trigger-range-start property

+   
+    
+     
+      
+      
+      
+      
+      
+      
+      
+      
+      
Name:
+      animation-trigger-range-start
+     
Value:
+      [ normal | <length-percentage> | <timeline-range-name> <length-percentage>? ]#
+     
Initial:
+      normal
+     
Applies to:
+      all elements
+     
Inherited:
+      no
+     
Percentages:
+      relative to the specified named timeline range if one was specified, else to the entire timeline
+     
Computed value:
+      list, each item either the keyword normal or a timeline range and progress percentage
+     
Canonical order:
+      per grammar
+     
Animation type:
+      not animatable
+   

+   
The animation-trigger-range-start property specifies the start of the animation trigger’s
+associated default range.

+   
The values of animation-trigger-range-start have the same meaning as those of animation-range-start.

+   
5.5. The animation-trigger-range-end property

+   
+    
+     
+      
+      
+      
+      
+      
+      
+      
+      
+      
Name:
+      animation-trigger-range-end
+     
Value:
+      [ normal | <length-percentage> | <timeline-range-name> <length-percentage>? ]#
+     
Initial:
+      normal
+     
Applies to:
+      all elements
+     
Inherited:
+      no
+     
Percentages:
+      relative to the specified named timeline range if one was specified, else to the entire timeline
+     
Computed value:
+      list, each item either the keyword normal or a timeline range and progress percentage
+     
Canonical order:
+      per grammar
+     
Animation type:
+      not animatable
+   

+   
The animation-trigger-range-end property specifies the end of the animation trigger’s
+associated default range.

+   
The values of animation-trigger-range-end have the same meaning as those of animation-range-end.

+   
5.6. The animation-trigger-exit-range property

+   
+    
+     
+      
+      
+      
+      
+      
+      
+      
+      
+      
Name:
+      animation-trigger-exit-range
+     
Value:
+      [ <'animation-trigger-exit-range-start'> <'animation-trigger-exit-range-end'>? ]#
+     
Initial:
+      see individual properties
+     
Applies to:
+      see individual properties
+     
Inherited:
+      see individual properties
+     
Percentages:
+      see individual properties
+     
Computed value:
+      see individual properties
+     
Animation type:
+      see individual properties
+     
Canonical order:
+      per grammar
+   

+   
The animation-trigger-exit-range property is a shorthand that sets animation-trigger-exit-range-start and animation-trigger-exit-range-end together in a single declaration,
+specifying the animation trigger’s associated exit range.
+It has the same syntax as the animation-range property, with the addition of the auto keyword.

+   
The exit range replaces the default range once the animation trigger’s active interval is entered,
+and redefines the extent of the animation trigger’s active interval.
+It is used to extend the default range, for example,
+in cases where exiting the active interval may create a visual jump that needs to be avoided.

+   
The behavior of animation-trigger-exit-range is further defined in Web Animations 2 § 4.6.5 Animation Trigger Ranges.

+   
5.7. The animation-trigger-exit-range-start property

+   
+    
+     
+      
+      
+      
+      
+      
+      
+      
+      
+      
Name:
+      animation-trigger-exit-range-start
+     
Value:
+      [ auto | normal | <length-percentage> | <timeline-range-name> <length-percentage>? ]#
+     
Initial:
+      auto
+     
Applies to:
+      all elements
+     
Inherited:
+      no
+     
Percentages:
+      relative to the specified named timeline range if one was specified, else to the entire timeline
+     
Computed value:
+      list, each item either the keyword normal or a timeline range and progress percentage
+     
Canonical order:
+      per grammar
+     
Animation type:
+      not animatable
+   

+   
The animation-trigger-exit-range-start property specifies the start of the animation trigger’s
+associated exit range.

+   
The values of animation-trigger-exit-range-start have the following meaning:

+   

+    
auto 
+    
 The start of the trigger’s exit range is equal to the start of its default range. 
+    
normal 
+    
 The start of the trigger’s exit range is the start of its associated timeline;
+                the start of the trigger’s active interval is determined as normal. 
+    
<length-percentage> 
+    
 The exit range starts
+                at the specified point on the timeline measuring from the start of the timeline. 
+    
<timeline-range-name> <length-percentage>? 
+    
 The exit range starts
+                at the specified point on the timeline measuring from the start of the specified named timeline range.
+                If the <length-percentage> is omitted,
+                it defaults to 0%. 
+   

+   
5.8. The animation-trigger-exit-range-end property

+   
+    
+     
+      
+      
+      
+      
+      
+      
+      
+      
+      
Name:
+      animation-trigger-exit-range-end
+     
Value:
+      [ auto | normal | <length-percentage> | <timeline-range-name> <length-percentage>? ]#
+     
Initial:
+      auto
+     
Applies to:
+      all elements
+     
Inherited:
+      no
+     
Percentages:
+      relative to the specified named timeline range if one was specified, else to the entire timeline
+     
Computed value:
+      list, each item either the keyword normal or a timeline range and progress percentage
+     
Canonical order:
+      per grammar
+     
Animation type:
+      not animatable
+   

+   
The animation-trigger-exit-range-end property specifies the end of the animation trigger’s
+associated exit range.

+   
The values of animation-trigger-exit-range-start have the following meaning:

+   

+    
auto 
+    
 The end of the trigger’s exit range is equal to the end of its default range. 
+    
normal 
+    
 The end of the trigger’s exit range is the end of its associated timeline;
+                        the end of the trigger’s active interval is determined as normal. 
+    
<length-percentage> 
+    
 The exit range ends
+                        at the specified point on the timeline measuring from the start of the timeline. 
+    
<timeline-range-name> <length-percentage>? 
+    
 The exit range ends
+                        at the specified point on the timeline measuring from the start of the specified named timeline range.
+                        If the <length-percentage> is omitted,
+                        it defaults to 100%. 
+   

+   
5.9. The animation-trigger-name property

+   
The animation-trigger-name property is used to associate an Element with
+all event-based animation triggers whose animation trigger name matches
+the property value. When an Event is dispatched
+with the associated Element as target,
+and with type matching an associated trigger’s event type,
+the trigger performs its effect on its associated animation.

+   
+    
+     
+      
+      
+      
+      
+      
+      
+      
+      
+      
Name:
+      animation-trigger-name
+     
Value:
+      none | [ <trigger-name> ]#
+     
Initial:
+      none
+     
Applies to:
+      all elements
+     
Inherited:
+      no
+     
Percentages:
+      N/A
+     
Computed value:
+      the keyword animation-trigger-none, or a list of case-sensitive css identifiers
+     
Canonical order:
+      per grammar
+     
Animation type:
+      not animatable
+   

+
<trigger-name> = <custom-ident>

+   
5.10. The animation-trigger-event property

+   
The animation-trigger-event property is used to specify the criteria
+for an event-based animation trigger to perform its effect on its associated animation. It consists of two parts:
+an event type that is matched against the type of a dispatched Event,
+and a trigger name that is matched against the animation-trigger-name property
+of the event’s target. If both criteria match for a given event
+the trigger will perform its effect on its associated animation.

+   
+    
+     
+      
+      
+      
+      
+      
+      
+      
+      
+      
Name:
+      animation-trigger-event
+     
Value:
+      none | [ <single-trigger-event> ]#
+     
Initial:
+      none
+     
Applies to:
+      all elements
+     
Inherited:
+      no
+     
Percentages:
+      N/A
+     
Computed value:
+      the keyword none or a list of case-sensitive css identifiers
+     
Canonical order:
+      per grammar
+     
Animation type:
+      not animatable
+   

+
<single-trigger-event> = <trigger-event-type> ( <trigger-name> )

+
<trigger-event-type> = <custom-ident>

+   
5.11. The animation-trigger property

+   
The animation-trigger property is a shorthand that sets animation-trigger-behavior, animation-trigger-timeline, animation-trigger-range-start, animation-trigger-range-end, animation-trigger-exit-range-start, and animation-trigger-exit-range-end together in a single declaration,
+specifying the animation trigger for an animation.

+   
+    
+     
+      
+      
+      
+      
+      
+      
+      
+      
+      
Name:
+      animation-trigger
+     
Value:
+      <single-animation-trigger>#
+     
Initial:
+      see individual properties
+     
Applies to:
+      all elements
+     
Inherited:
+      no
+     
Percentages:
+      N/A
+     
Computed value:
+      see individual properties
+     
Canonical order:
+      per grammar
+     
Animation type:
+      not animatable
+   

+
<single-animation-trigger> = <single-animation-trigger-behavior> || [ none | auto | [ [ <dashed-ident> | <scroll()> | <view()> ] [ normal | <length-percentage> | <timeline-range-name> <length-percentage>? ]{0,4} ] ]
+

+   
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:

+   
+   
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:

+   
+    
+     
+      
+     
+      
+      
+      
+      
+      
+      
+      
+      
+      
+      
Change
+      Events dispatched
+      Elapsed time (ms)
+    
idle or before → active
+      animationstart
+      interval start 
+     
 idle or before → after ٭
+      animationstart
+      interval start 
+     
animationend
+      interval end 
+     
active → before
+      animationend
+      interval start
+     
active → active and the current iteration of the animation’s associated effect has changed since the previous animation frame 
+      animationiteration
+      (See below) †
+     
active → after
+      animationend
+      interval end
+     
after → active
+      animationstart
+      interval end
+     
after → before ٭
+      animationstart
+      interval end
+     
animationend
+      interval start
+     
not idle and not after → idle
+      animationcancel
+      The active time of the animation at the moment it was cancelled
+          calculated using a fill mode of both.
+   

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

+   

+     As an example, in the following code fragment, when the specified style of elem is initially updated, a user agent may defer recalculating
+the computed value of the animation property. 
+    
However, the getAnimations() method called on elem is specified by Web Animations and can return CSSAnimation objects as
+defined in this specification.
+Hence, as result of the requirements in this section, the user agent must
+calculate the updated value of elem’s animation property and
+create the requested CSSAnimation object before returning its result.

+    

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

+    

+    
Similarly, reading playState may depend on pending style
+changes.

+    

+
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: 

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

+  

+  
 Conformance

+  
 Document conventions

+  
Conformance requirements are expressed with a combination of
+    descriptive assertions and RFC 2119 terminology. The key words “MUST”,
+    “MUST NOT”, “REQUIRED”, “SHALL”, “SHALL NOT”, “SHOULD”, “SHOULD NOT”,
+    “RECOMMENDED”, “MAY”, and “OPTIONAL” in the normative parts of this
+    document are to be interpreted as described in RFC 2119.
+    However, for readability, these words do not appear in all uppercase
+    letters in this specification. 

+  
All of the text of this specification is normative except sections
+    explicitly marked as non-normative, examples, and notes. [RFC2119]

+  
Examples in this specification are introduced with the words “for example”
+    or are set apart from the normative text with class="example",
+    like this: 

+  

+    
+   
This is an example of an informative example.

+  

+  
Informative notes begin with the word “Note” and are set apart from the
+    normative text with class="note", like this: 

+  
Note, this is an informative note.

+  
Advisements are normative sections styled to evoke special attention and are
+    set apart from other normative text with <strong class="advisement">, like
+    this:  UAs MUST provide an accessible alternative. 

+  

+   Tests
+   
Tests relating to the content of this specification
+                     may be documented in “Tests” blocks like this one.
+                     Any such block is non-normative.

+   
    
+   
    
+  
    
+  
     Conformance classes
    
+  
    Conformance to this specification
+    is defined for three conformance classes: 
    
+  
    
+   
    style sheet 
+   
    A CSS
+            style sheet. 
+   
    renderer 
+   
    A UA that interprets the semantics of a style sheet and renders
+            documents that use them. 
+   
    authoring tool 
+   
    A UA that writes a style sheet. 
+  
    
+  
    A style sheet is conformant to this specification
+    if all of its statements that use syntax defined in this module are valid
+    according to the generic CSS grammar and the individual grammars of each
+    feature defined in this module. 
    
+  
    A renderer is conformant to this specification
+    if, in addition to interpreting the style sheet as defined by the
+    appropriate specifications, it supports all the features defined
+    by this specification by parsing them correctly
+    and rendering the document accordingly. However, the inability of a
+    UA to correctly render a document due to limitations of the device
+    does not make the UA non-conformant. (For example, a UA is not
+    required to render color on a monochrome monitor.) 
    
+  
    An authoring tool is conformant to this specification
+    if it writes style sheets that are syntactically correct according to the
+    generic CSS grammar and the individual grammars of each feature in
+    this module, and meet all other conformance requirements of style sheets
+    as described in this module. 
    
+  
     Partial implementations
    
+  
    So that authors can exploit the forward-compatible parsing rules to
+    assign fallback values, CSS renderers must treat as invalid (and ignore
+    as appropriate) any at-rules, properties, property values, keywords,
+    and other syntactic constructs for which they have no usable level of
+    support. In particular, user agents must not selectively
+    ignore unsupported component values and honor supported values in a single
+    multi-value property declaration: if any value is considered invalid
+    (as unsupported values must be), CSS requires that the entire declaration
+    be ignored.
    
+  
     Implementations of Unstable and Proprietary Features
    
+  
    To avoid clashes with future stable CSS features,
+        the CSSWG recommends following best practices for the implementation of unstable features and proprietary extensions to CSS. 
    
+  
     Non-experimental implementations
    
+  
    Once a specification reaches the Candidate Recommendation stage,
+    non-experimental implementations are possible, and implementors should
+    release an unprefixed implementation of any CR-level feature they
+    can demonstrate to be correctly implemented according to spec. 
    
+  
    To establish and maintain the interoperability of CSS across
+    implementations, the CSS Working Group requests that non-experimental
+    CSS renderers submit an implementation report (and, if necessary, the
+    testcases used for that implementation report) to the W3C before
+    releasing an unprefixed implementation of any CSS features. Testcases
+    submitted to W3C are subject to review and correction by the CSS
+    Working Group. 
    
+  
    Further information on submitting testcases and implementation reports
+    can be found from on the CSS Working Group’s website at http://www.w3.org/Style/CSS/Test/.
+    Questions should be directed to the public-css-testsuite@w3.org mailing list.
    
+  
+  
    Index
    
+  
    Terms defined by this specification
    
+  
+  
    Terms defined by reference
    
+  
      
+   
    • 
+    [CSS-CASCADE-5] defines the following terms:
+    
        
+     
      • computed value
+     
      • declared value
+     
      • initial value
+     
      • longhand
+     
      • reset-only sub-property
+     
      • shorthand
+     
      • shorthand property
+     
      • specified value
+     
      • sub-property
+     
      • used value
+    
      
+   
    • 
+    [CSS-CASCADE-6] defines the following terms:
+    
        
+     
      • cascade
+     
      • cascade origin
+    
      
+   
    • 
+    [CSS-DISPLAY-4] defines the following terms:
+    
        
+     
      • display
+     
      • none
+    
      
+   
    • 
+    [CSS-EASING-2] defines the following terms:
+    
        
+     
      • <easing-function>
+     
      • timing function
+    
      
+   
    • 
+    [CSS-LOGICAL-1] defines the following terms:
+    
        
+     
      • logical property group
+    
      
+   
    • 
+    [CSS-MASKING-1] defines the following terms:
+    
        
+     
      • add
+    
      
+   
    • 
+    [CSS-TRANSFORMS-2] defines the following terms:
+    
        
+     
      • scale
+    
      
+   
    • 
+    [CSS-VALUES-4] defines the following terms:
+    
        
+     
      • #
+     
      • <custom-ident>
+     
      • <dashed-ident>
+     
      • <length-percentage>
+     
      • <percentage>
+     
      • <time>
+     
      • ?
+     
      • coordinated value list
+     
      • coordinating list base property
+     
      • coordinating list property group
+     
      • CSS identifier
+     
      • {A,B}
+     
      • |
+     
      • ||
+    
      
+   
    • 
+    [CSS-WRITING-MODES-4] defines the following terms:
+    
        
+     
      • writing mode
+    
      
+   
    • 
+    [CSS2] defines the following terms:
+    
        
+     
      • declaration block
+    
      
+   
    • 
+    [CSS3-ANIMATIONS] defines the following terms:
+    
        
+     
      • <keyframe-selector>
+     
      • <keyframes-name>
+     
      • <single-animation-direction>
+     
      • <single-animation-fill-mode>
+     
      • <single-animation-iteration-count>
+     
      • <single-animation-play-state>
+     
      • @keyframes
+     
      • AnimationEvent
+     
      • animation
+     
      • animation-delay
+     
      • animation-direction
+     
      • animation-fill-mode
+     
      • animation-iteration-count
+     
      • animation-name
+     
      • animation-play-state
+     
      • animation-timing-function
+     
      • animationcancel
+     
      • animationend
+     
      • animationiteration
+     
      • animationstart
+     
      • cssRules
+     
      • elapsedTime
+     
      • none (for animation-fill-mode)
+     
      • none (for animation-name)
+     
      • paused
+     
      • running
+    
      
+   
    • 
+    [CSSOM-1] defines the following terms:
+    
        
+     
      • CSSOMString
+     
      • property name
+     
      • resolved value
+    
      
+   
    • 
+    [DOM] defines the following terms:
+    
        
+     
      • Element
+     
      • Event
+     
      • event target
+     
      • target
+     
      • tree order
+     
      • type
+    
      
+   
    • 
+    [SCROLL-ANIMATIONS] defines the following terms:
+    
        
+     
      • <timeline-range-name>
+     
      • animation-range
+     
      • animation-range-end
+     
      • animation-range-start
+     
      • named timeline range
+     
      • scroll progress timelines
+     
      • scroll()
+     
      • scroll-driven animations
+     
      • view progress timelines
+     
      • view()
+    
      
+   
    • 
+    [WEB-ANIMATIONS] defines the following terms:
+    
        
+     
      • Animation
+     
      • AnimationEffect
+     
      • DocumentTimeline
+     
      • KeyframeEffect
+     
      • active duration
+     
      • active phase
+     
      • active time
+     
      • after phase
+     
      • animation
+     
      • animation class
+     
      • animation effect
+     
      • animation frame
+     
      • animation playback events
+     
      • associated effect
+     
      • associated effect end
+     
      • before phase
+     
      • composite operation
+     
      • current iteration
+     
      • current time
+     
      • default document timeline
+     
      • effect
+     
      • fill mode
+     
      • getAnimations()
+     
      • getKeyframes()
+     
      • global animation list
+     
      • idle
+     
      • idle phase
+     
      • iteration count
+     
      • iteration duration
+     
      • iteration start
+     
      • keyframe
+     
      • pause an animation
+     
      • pause()
+     
      • paused
+     
      • pending pause task
+     
      • pending play task
+     
      • play an animation
+     
      • play state
+     
      • play()
+     
      • playState
+     
      • playback direction
+     
      • reverse()
+     
      • setKeyframes(keyframes)
+     
      • start delay
+     
      • target element
+     
      • timeline
+     
      • timing
+     
      • unresolved
+     
      • updateTiming()
+    
      
+   
    • 
+    [WEB-ANIMATIONS-2] defines the following terms:
+    
        
+     
      • active interval
+     
      • animation trigger
+     
      • animation trigger behavior
+     
      • default range
+     
      • exit range
+     
      • startTime
+    
      
+   
    • 
+    [WEBIDL] defines the following terms:
+    
        
+     
      • Exposed
+    
      
+  
    
+  
    References
    
+  
    Normative References
    
+  
    
+   
    [CSS-CASCADE-5]
+   
    Elika Etemad; Miriam Suzanne; Tab Atkins Jr.. CSS Cascading and Inheritance Level 5. URL: https://drafts.csswg.org/css-cascade-5/
+   
    [CSS-CASCADE-6]
+   
    Elika Etemad; Miriam Suzanne; Tab Atkins Jr.. CSS Cascading and Inheritance Level 6. URL: https://drafts.csswg.org/css-cascade-6/
+   
    [CSS-DISPLAY-4]
+   
    Elika Etemad; Tab Atkins Jr.. CSS Display Module Level 4. URL: https://drafts.csswg.org/css-display/
+   
    [CSS-EASING-2]
+   
    CSS Easing Functions Level 2. URL: https://drafts.csswg.org/css-easing/
+   
    [CSS-VALUES-4]
+   
    Tab Atkins Jr.; Elika Etemad. CSS Values and Units Module Level 4. URL: https://drafts.csswg.org/css-values-4/
+   
    [CSS2]
+   
    Bert Bos; et al. Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification. URL: https://drafts.csswg.org/css2/
+   
    [CSS3-ANIMATIONS]
+   
    David Baron; et al. CSS Animations Level 1. URL: https://drafts.csswg.org/css-animations/
+   
    [CSSOM-1]
+   
    Daniel Glazman; Emilio Cobos Álvarez. CSS Object Model (CSSOM). URL: https://drafts.csswg.org/cssom/
+   
    [DOM]
+   
    Anne van Kesteren. DOM Standard. Living Standard. URL: https://dom.spec.whatwg.org/
+   
    [RFC2119]
+   
    S. Bradner. Key words for use in RFCs to Indicate Requirement Levels. March 1997. Best Current Practice. URL: https://datatracker.ietf.org/doc/html/rfc2119
+   
    [SCROLL-ANIMATIONS]
+   
    Brian Birtles; et al. Scroll-driven Animations. URL: https://drafts.csswg.org/scroll-animations-1/
+   
    [WEB-ANIMATIONS]
+   
    Brian Birtles; et al. Web Animations. URL: https://drafts.csswg.org/web-animations-1/
+   
    [WEB-ANIMATIONS-2]
+   
    Brian Birtles; Robert Flack. Web Animations Level 2. URL: https://drafts.csswg.org/web-animations-2/
+   
    [WEBIDL]
+   
    Edgar Chen; Timothy Gu. Web IDL Standard. Living Standard. URL: https://webidl.spec.whatwg.org/
+  
    
+  
    Informative References
    
+  
    
+   
    [CSS-CASCADE-4]
+   
    Elika Etemad; Tab Atkins Jr.. CSS Cascading and Inheritance Level 4. URL: https://drafts.csswg.org/css-cascade-4/
+   
    [CSS-LOGICAL-1]
+   
    Rossen Atanassov; Elika Etemad. CSS Logical Properties and Values Level 1. URL: https://drafts.csswg.org/css-logical-1/
+   
    [CSS-MASKING-1]
+   
    Dirk Schulze; Brian Birtles; Tab Atkins Jr.. CSS Masking Module Level 1. URL: https://drafts.fxtf.org/css-masking-1/
+   
    [CSS-TRANSFORMS-2]
+   
    Tab Atkins Jr.; et al. CSS Transforms Module Level 2. URL: https://drafts.csswg.org/css-transforms-2/
+   
    [CSS-WRITING-MODES-4]
+   
    Elika Etemad; Koji Ishii. CSS Writing Modes Level 4. URL: https://drafts.csswg.org/css-writing-modes-4/
+   
    [CSS3-TRANSITIONS]
+   
    David Baron; et al. CSS Transitions. URL: https://drafts.csswg.org/css-transitions/
+  
    
+  
    Property Index
    
+  
    
+   
+    
+     
+      
+     
+      
+      
+      
+      
+      
+      
+      
+      
+      
+      
+      
+      
+      
+      
    Name
+      Value
+      Initial
+      Applies to
+      Inh.
+      %ages
+      Anim­ation type
+      Canonical order
+      Com­puted value
+    
    animation-composition
+      <single-animation-composition>#
+      replace
+      all elements
+      no
+      N/A
+      not animatable
+      per grammar
+      list, each item a keyword as specified
+     
    animation-duration
+      [ auto | <time [0s,∞]> ]#
+      auto
+      all elements
+      no
+      N/A
+      not animatable
+      per grammar
+      list, each item either a time or the keyword auto
+     
    animation-timeline
+      <single-animation-timeline>#
+      auto
+      all elements
+      no
+      N/A
+      not animatable
+      per grammar
+      list, each item either
+the keyword none,
+the keyword auto,
+a case-sensitive css identifier,
+a computed scroll() function,
+or
+a computed view() function
+     
    animation-trigger
+      <single-animation-trigger>#
+      see individual properties
+      all elements
+      no
+      N/A
+      not animatable
+      per grammar
+      see individual properties
+     
    animation-trigger-behavior
+      <single-animation-trigger-behavior>#
+      once
+      all elements
+      no
+      N/A
+      not animatable
+      per grammar
+      list, each item a keyword as specified
+     
    animation-trigger-event
+      none | [ <single-trigger-event> ]#
+      none
+      all elements
+      no
+      N/A
+      not animatable
+      per grammar
+      the keyword none or a list of case-sensitive css identifiers
+     
    animation-trigger-exit-range
+      [ <'animation-trigger-exit-range-start'> <'animation-trigger-exit-range-end'>? ]#
+      see individual properties
+      see individual properties
+      see individual properties
+      see individual properties
+      see individual properties
+      per grammar
+      see individual properties
+     
    animation-trigger-exit-range-end
+      [ auto | normal | <length-percentage> | <timeline-range-name> <length-percentage>? ]#
+      auto
+      all elements
+      no
+      relative to the specified named timeline range if one was specified, else to the entire timeline
+      not animatable
+      per grammar
+      list, each item either the keyword normal or a timeline range and progress percentage
+     
    animation-trigger-exit-range-start
+      [ auto | normal | <length-percentage> | <timeline-range-name> <length-percentage>? ]#
+      auto
+      all elements
+      no
+      relative to the specified named timeline range if one was specified, else to the entire timeline
+      not animatable
+      per grammar
+      list, each item either the keyword normal or a timeline range and progress percentage
+     
    animation-trigger-name
+      none | [ <trigger-name> ]#
+      none
+      all elements
+      no
+      N/A
+      not animatable
+      per grammar
+      the keyword animation-trigger-none, or a list of case-sensitive css identifiers
+     
    animation-trigger-range
+      [ <'animation-trigger-range-start'> <'animation-trigger-range-end'>? ]#
+      see individual properties
+      see individual properties
+      see individual properties
+      see individual properties
+      see individual properties
+      per grammar
+      see individual properties
+     
    animation-trigger-range-end
+      [ normal | <length-percentage> | <timeline-range-name> <length-percentage>? ]#
+      normal
+      all elements
+      no
+      relative to the specified named timeline range if one was specified, else to the entire timeline
+      not animatable
+      per grammar
+      list, each item either the keyword normal or a timeline range and progress percentage
+     
    animation-trigger-range-start
+      [ normal | <length-percentage> | <timeline-range-name> <length-percentage>? ]#
+      normal
+      all elements
+      no
+      relative to the specified named timeline range if one was specified, else to the entire timeline
+      not animatable
+      per grammar
+      list, each item either the keyword normal or a timeline range and progress percentage
+     
    animation-trigger-timeline
+      <single-animation-timeline>#
+      auto
+      all elements
+      no
+      N/A
+      not animatable
+      per grammar
+      list, each item either
+the keyword none,
+the keyword auto,
+a case-sensitive css identifier,
+a computed scroll() function,
+or
+a computed view() function
+   
    
+  
    
+  
    IDL Index
    
+
    [Exposed=Window]
+interface CSSAnimation : Animation {
+  readonly attribute CSSOMString animationName;
+};
+
+
    
+  
    Issues Index
    
+  
    
+   
     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. ↵
    
+   
     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. ↵
    
+   
     Create pictures of these examples and verify they make sense. ↵
    
+   
     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. ↵
    
+   
     Probably a trigger with timeline "none" is under-specified here. Need to clarify what it means. ↵
    
+  
    
+  
    
+   ✔MDN
+   
    
+    
    CSSAnimation/animationName
    
+    
    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?
+    
    
+   
    
+  
    
+  
    
+   ✔MDN
+   
    
+    
    CSSAnimation
    
+    
    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?
+    
    
+   
    
+  
    
+  
    
+   ✔MDN
+   
    
+    
    animation-composition
    
+    
    In all current engines.
    
+    
    
+     Firefox115+Safari16+Chrome112+
+     
    
+     Opera?Edge112+
+     
    
+     Edge (Legacy)?IENone
+     
    
+     Firefox for Android?iOS Safari?Chrome for Android?Android WebView?Samsung Internet?Opera Mobile?
+    
    
+   
    
+  
    
+  
    
+   ⚠MDN
+   
    
+    
    animation-duration#Values
    
+    
    In only one current engine.
    
+    
    
+     FirefoxNoneSafariNoneChrome115+
+     
    
+     Opera?Edge115+
+     
    
+     Edge (Legacy)?IENone
+     
    
+     Firefox for Android?iOS Safari?Chrome for Android?Android WebView?Samsung Internet?Opera Mobile?
+    
    
+   
    
+  
    
+  
    
+   MDN
+   
    
+    
    animation-timeline
    
+    
    
+     Firefox110+SafariNoneChrome115+
+     
    
+     Opera?Edge115+
+     
    
+     Edge (Legacy)?IENone
+     
    
+     Firefox for Android?iOS Safari?Chrome for Android?Android WebView?Samsung Internet?Opera Mobile?
+    
    
+   
    
+  
    
+
+
+
+
+
\ No newline at end of file
diff --git a/web-animations-2/Overview.html b/web-animations-2/Overview.html
new file mode 100644
index 00000000000..072ebdcc629
--- /dev/null
+++ b/web-animations-2/Overview.html
@@ -0,0 +1,6834 @@
+
+ 
+  
+  
+  Web Animations Level 2
+  
+  
+  
+  
+  
+  
+  
+  
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 
+  
    
+   
     
    
+   
    Web Animations Level 2
    
+   
    Editor’s Draft, 
    
+   
    
+    More details about this document
+    
    
+     
    
+      
    This version:
+      
    https://drafts.csswg.org/web-animations-2/
+      
    Latest published version:
+      
    https://www.w3.org/TR/web-animations-2/
+      
    Version History:
+      
    https://github.com/w3c/csswg-drafts/commits/main/web-animations-2
+      
    Feedback:
+      
    CSSWG Issues Repository
+      
    Inline In Spec
+      
    Editors:
+      
     (Invited Expert)
+      
     (Google)
+      
    Former Editors:
+      
     (Google)
+      
     (Google)
+      
    Suggest an Edit for this Spec:
+      
    GitHub Editor
+      
    Participate:
+      
    Fix the text through GitHub
+      
    Join the ‘waapi’ channel on the Animation at Work slack
+      
    IRC: #webanimations on W3C’s IRC
+      
    Issue Tracking:
+      
    GitHub
+     
    
+    
    
+   
    
+   
    
+    
    
+     Not Ready For Implementation
+     
     This spec is not yet ready for implementation.
+		It exists in this repository to record the ideas and promote discussion. 
    
+     
     Before attempting to implement this spec,
+		please contact the CSSWG at www-style@w3.org. 
    
+    
    
+   
    
+   
    Copyright © 2025 World Wide Web Consortium. W3C® liability, trademark and permissive document license rules apply. 
    
+   
    
+  
    
+  
    
+   
    Abstract
    
+   
    This specification defines a model for synchronization and
+timing of changes to the presentation of a Web page.
+This specification also defines an application programming interface
+for interacting with this model and it is expected that further
+specifications will define declarative means for exposing these
+features.
    
+    CSS is a language for describing the rendering of structured documents
+(such as HTML and XML)
+on screen, on paper, etc. 
+  
    
+  
    Status of this document
    
+  
    
+   
     This is a public copy of the editors’ draft.
+	It is provided for discussion only and may change at any moment.
+	Its publication here does not imply endorsement of its contents by W3C.
+	Don’t cite this document other than as work in progress. 
    
+   
    Please send feedback
+	by filing issues in GitHub (preferred),
+	including the spec code “web-animations” in the title, like this:
+	“[web-animations] …summary of comment…”.
+	All issues and comments are archived.
+	Alternately, feedback can be sent to the (archived) public mailing list www-style@w3.org. 
    
+   
    This document is governed by the 03 November 2023 W3C Process Document. 
    
+  
    
+  
    
+  
+  
    
+   
    1. Delta specification
    
+   
    This is a delta specification, meaning that it currently contains
+only the differences from Web Animations Level 1 [WEB-ANIMATIONS-1].
+Once the Level 1 specification is closer to complete, it will be merged
+with the additions here into a complete level 2 specification.
    
+   
    2. Changes since level 1
    
+   
    This specification introduces the following changes compared to the
+previous level of this specification:
    
+   
+   
     This module also includes some exploratory proposals for § 4.5 Custom effects,
+however there are some concerns about the design of this feature
+and it may be replaced in a future revision.
+See discussion. 
    
+   
    3. Timing model
    
+   
    This section describes and defines the behavior of the Web Animations
+timing model.
    
+   
    3.1. Timing model overview
    
+   
    
+    
    This section is non-normative
    
+    
    3.1.1. Hierarchical
    
+    
    This level of the specification includes an updated timing hierarchy diagram.
    
+    
    
+      A hierarchy of timing nodes 
+     
     A hierarchy of timing nodes.
+    Each node in the tree derives its time from its parent node. 
    
+    
    
+    
    Along with the following updated description:
    
+    
    
+     
    A consequence of this hierarchical arrangement is that complex
+  animation arrangements can be reversed, scheduled, accelerated and so
+  on as a whole unit since the manipulations applied to the parent,
+  cascade down to its descendants.
+  Furthermore, since time has a common source, it is easy to synchronize
+  animations.
    
+    
    
+   
    
+   
    3.2. Timelines
    
+   
    Add:
    
+   
    
+    
    The duration of a timeline gives the
+maximum value a timeline may generate for its current time. This value is
+used to calculate the intrinsic iteration duration for the target effect
+of an animation that is associated with the timeline when the effect’s iteration duration is "auto". The value is computed such that the effect
+fills the available time. For a monotonic timeline, there is no upper bound
+on current time, and timeline duration is unresolved. For a non-monotonic
+(e.g. scroll) timeline, the duration has a fixed upper bound. In this
+case, the timeline is a progress-based
+timeline, and its timeline duration is 100%.
    
+   
    
+   
    3.3. Animation Frames
    
+   
    Update the note on the first step of the algorithm by adding the following bullet:
    
+   
    
+    
+   
    
+   
    3.4. Animations
    
+   
    Append:
    
+   
    
+    
    Animation effects associated with a progress-based timeline require their
+timing properties to be converted to proportions. The procedure for converting
+a  is as
+follows:
    
+    
      
+     
    1. 
+      
      If the iteration duration is auto, then perform the following steps.
      
+      
        
+       
      • 
+        
        Set start delay and end delay to 0, as it is not
+possible to mix time and proportions.
        
+        
        Note: Future versions may allow these properties to be assigned
+percentages, at which point the delays are only to be ignored if
+their values are expressed as times and not as percentages.
        
+      
      
+      
      Otherwise:
      
+      
        
+       
      1. 
+        
        Let total time be equal to end time
        
+       
      2. 
+        
        Set start delay to be the result of evaluating specified start delay / total time * timeline duration.
        
+       
      3. 
+        
        Set iteration duration to be the result of evaluating specified iteration duration / total time * timeline duration.
        
+       
      4. 
+        
        Set end delay to be the result of evaluating specified end delay / total time * timeline duration.
        
+      
      
+    
    
+    
    The procedure to normalize specified timing is as follows:
    
+    
    If timeline duration is resolved:
    
+    
+    Otherwise: 
+    
      
+     
    1. 
+      
      Set start delay = specified start delay
      
+     
    2. 
+      
      Set end delay = specified end delay
      
+     
    3. 
+      
      If iteration duration is auto:
      
+      
+       Otherwise: 
+      
+    
    
+   
    
+   
    3.4.1. Setting the timeline of an animation
    
+   
    The procedure to set the timeline of an animation, animation, to new timeline which may be null, is as
+follows:
    
+   
      
+    
    1. 
+     
      Let old timeline be the current timeline of animation, if any.
      
+    
    2. 
+     
      If new timeline is the same object as old timeline,
+abort this procedure.
      
+    
    3. 
+     
      Let previous play state be animation’s play state.
      
+    
    4. 
+     
      Let previous current time be the animation’s current time.
      
+    
    5. 
+     
      Set previous progress based in the first condition that applies:
      
+     
      
+      
      If previous current time is unresolved:
+      
      
+       
      Set previous progress to unresolved.
      
+      
      If end time is zero:
+      
      
+       
      Set previous progress to zero.
      
+      
      Otherwise
+      
      
+       
      Set previous progress = previous current time / end time
      
+     
      
+    
    6. 
+     
      Let from finite timeline be true if old timeline is not null and
+not monotonically increasing.
      
+    
    7. 
+     
      Let to finite timeline be true if timeline is not null and not monotonically increasing.
      
+    
    8. 
+     
      Let the timeline of animation be new timeline.
      
+    
    9. 
+     
      Perform the steps corresponding to the first matching
+condition from the following, if any:
      
+     
      
+      
      If to finite timeline,
+      
      
+       
        
+        
      1. 
+         
        Apply any pending playback rate on animation
        
+        
      2. 
+         
        set auto align start time to true.
        
+        
      3. 
+         
        Set start time to unresolved.
        
+        
      4. 
+         
        Set hold time to unresolved.
        
+        
      5. 
+         
        If previous play state is "finished" or "running"
        
+         
          
+          
        1. 
+           
          Schedule a pending play task
          
+         
        
+        
      6. 
+         
        If previous play state is "paused" and previous progress is resolved:
        
+         
          
+          
        1. 
+           
          Set hold time to previous progress * end time.
          
+         
        
+       
      
+       
       This step ensures that previous progress is preserved
+    even in the case of a pause-pending animation with a
+    resolved start time. 
      
+      
      If from finite timeline and previous progress is resolved,
+      
      
+       
      Run the procedure to set the current time to previous progress * end time.
      
+     
      
+    
    10. 
+     
      If the start time of animation is resolved, make animation’s hold time unresolved.
      
+     
       This step ensures that the finished play state of animation is not “sticky” but is re-evaluated
+based on its updated current time. 
      
+     
      
+    
    11. 
+     
      Run the procedure to update an animation’s finished state for animation with the did seek flag set to false, and
+the synchronously notify flag set to false.
      
+   
    
+    Issue: If new timeline is null, we should ensure that custom
+effects get called with an unresolved iteration progress (unless a subsequent change in the same script execution context makes this
+redundant). 
+   
    3.4.2. Setting the target effect of an
+  animation
    
+   
    After the step to reschedule a pending play task add the following step:
    
+   
    
+    
      
+     
    1. 
+      
      If new effect is not null and
+if new effect has a parent group, remove new effect from
+its parent group.
      
+    
    
+   
    
+   
+     After the step to assign new effect as animation’s associated effect include the following step: 
+    
    
+     
      
+      
    1. 
+       
      If old effect is not null, queue a task to call
+any custom effects associated with inclusive descendants of old effect with an unresolved iteration progress.
      
+       
      
+         This is not quite right. If old effect is attached to another
+  animation in the same task then we should probably not do an extra
+  callback with unresolved. 
+        
      The definition of when custom effects gets called needs to be
+  audited and probably rewritten.
      
+       
      
+     
    
+    
    
+       
+   
    3.4.3. Waiting for the associated effect
    
+   
    Replace:
    
+   
    
+    
    An animation is ready at the first moment
+ where both of the following conditions are true:
    
+    
      
+     
    • 
+      
      the user agent has completed any setup required
+ to begin the playback of the animation’s associated effect,
+ including rendering the first frame of any keyframe effect.
      
+     
    • 
+      
      the animation is associated with a timeline that is not inactive.
      
+    
    
+   
    
+   
    With:
    
+   
    
+    
    An animation is ready at the first moment
+ where all of the following conditions are true:
    
+    
+   
    
+   
    Note: an animation is not ready while it has no start time or hold time.
+For a scroll-driven animation, the start-time is determined when updating the timeline if auto align start time is true.
    
+   
    3.4.4. Validating a CSSNumberish time
    
+   
    The procedure to validate a CSSNumberish time for an input
+value of time is based on the first condition that matches:
    
+   
    
+    
    
+     
    If all of the following conditions are true:
    
+     
      
+      
    • 
+       
      The animation is associated with a progress-based timeline, and
      
+      
    • 
+       
      time is not a CSSNumeric value with percent units:
      
+     
    
+    
    
+     
    throw a TypeError.
    
+    
    
+     
    return false;
    
+    
    
+     
    If all of the following conditions are true:
    
+     
+    
    
+     
    throw a TypeError.
    
+    
    
+     
    return false.
    
+    
    Otherwise
+    
    
+     
    return true.
    
+   
    
+   
    3.4.5. Setting the current time of an
+Animation
    
+   
    The current time of an animation can be set to a new value to seek the animation.
+The procedure for setting the current time is defined in two parts.
    
+   
    The procedure to silently set the current time of
+an animation, animation, to seek time is as follows:
    
+   
      
+    
    1. 
+     
      If seek time is an unresolved time value,
+then perform the following steps.
      
+     
        
+      
      1. 
+       
        If the current time is resolved, then throw a TypeError.
        
+      
      2. 
+       
        Abort these steps.
        
+     
      
+    
    2. 
+     
      Let valid seek time be the result of running the validate a CSSNumberish time procedure with seek time as the input.
      
+    
    3. 
+     
      If valid seek time is false, abort this procedure.
      
+    
    4. 
+     
      Set auto align start time to false.
      
+    
    5. 
+     
      Update either animation’s hold time or start time as follows:
      
+     
      
+      
      
+       
      If any of the following conditions are true:
      
+       
+      
      
+       
        
+        
      1. 
+         
        Set animation’s hold time to seek time.
        
+       
      
+      
      Otherwise,
+      
      
+       
      Set animation’s start time to the result of
+evaluating timeline time - (seek time / playback rate) where timeline time is the current time value of timeline associated with animation.
      
+     
      
+    
    6. 
+     
      If animation has no associated timeline or the associated timeline is inactive,
+make animation’s start time unresolved.
      
+     
       This preserves the invariant that when we don’t have an active timeline it
+  is only possible to set either the start time or the animation’s current time. 
      
+    
    7. 
+     
      Make animation’s previous current time unresolved.
      
+   
    
+   
    The procedure to set the current time of an animation, animation, to seek time is as follows:
    
+   
      
+    
    1. 
+     
      Run the steps to silently set the current time of animation to seek time.
      
+    
    2. 
+     
      If animation has a pending pause task, synchronously
+complete the pause operation by performing the following steps:
      
+     
        
+      
      1. 
+       
        Set animation’s hold time to seek time.
        
+      
      2. 
+       
        Apply any pending playback rate to animation.
        
+      
      3. 
+       
        Make animation’s start time unresolved.
        
+      
      4. 
+       
        Cancel the pending pause task.
        
+      
      5. 
+       
        Resolve animation’s current ready promise with animation.
        
+     
      
+    
    3. 
+     
      Run the procedure to update an animation’s finished state for animation with the did seek flag set to true, and
+the synchronously notify flag set to false.
      
+   
    
+   
    3.4.6. Setting the start time of an
+Animation
    
+   
    The procedure to set the start time of animation, animation, to new start time,
+is as follows:
    
+   
      
+    
    1. 
+     
      Let valid start time be the result of running the validate a CSSNumberish time procedure with new start time as the input.
      
+    
    2. 
+     
      If valid start time is false, abort this procedure.
      
+    
    3. 
+     
      Set auto align start time to false.
      
+    
    4. 
+     
      Let timeline time be the current time value of the timeline that animation is associated with.
+If there is no timeline associated with animation or the
+associated timeline is inactive,
+let the timeline time be unresolved.
      
+    
    5. 
+     
      If timeline time is unresolved and new start
+time is resolved, make animation’s hold time unresolved.
      
+     
       This preserves the invariant that when we don’t have an active timeline it
+  is only possible to set either the start time or the animation’s current time. 
      
+    
    6. 
+     
      Let previous current time be animation’s current time.
      
+     
      Note: This is the current time after applying the changes from
+the previous step which may cause the current time to become unresolved.
      
+    
    7. 
+     
      Apply any pending playback rate on animation.
      
+    
    8. 
+     
      Set animation’s start time to new start time.
      
+    
    9. 
+     
      Update animation’s hold time based
+on the first matching condition from the following,
      
+     
      
+      
      If new start time is resolved,
+      
      
+       
      If animation’s playback rate is not zero,
+make animation’s hold time unresolved.
      
+      
      Otherwise (new start time is unresolved),
+      
      
+       
        
+        
      1. 
+         
        Set animation’s hold time to previous current time even if previous current time is unresolved.
        
+       
      
+     
      
+    
    10. 
+     
      If animation has a pending play task or
+a pending pause task, cancel that task and resolve animation’s current ready promise with animation.
      
+    
    11. 
+     
      Run the procedure to update an animation’s finished state for animation with the did seek flag set to true, and
+the synchronously notify flag set to false.
      
+   
    
+   
    3.4.7. Playing an animation
    
+   
    The procedure to play an animation, animation, given
+a flag auto-rewind, is as follows:
    
+   
    Note: The auto-rewind flag is provided for other specifications
+that build on this model but do not require the rewinding behavior, such
+as CSS Animations [CSS-ANIMATIONS-1].
    
+   
      
+    
    1. 
+     
      Let aborted pause be a boolean flag that is true if animation has a pending pause task, and false otherwise.
      
+    
    2. 
+     
      Let has pending ready promise be a boolean flag that is
+initially false.
      
+    
    3. 
+     
      Let has finite timeline be true if animation has an associated timeline that is not monotonically increasing.
      
+    
    4. 
+     
      Let previous current time be the animation’s current time
      
+    
    5. 
+     
      Let enable seek be true if the auto-rewind flag is
+true and has finite timeline is false.
+Otherwise, initialize to false.
      
+    
    6. 
+     
      Perform the steps corresponding to the first matching
+condition from the following, if any:
      
+     
      
+      
      
+       
      If animation’s effective playback rate > 0, enable seek is true and either animation’s:
      
+       
+      
      
+       
      Set the animation’s hold time to zero.
      
+      
      
+       
      If animation’s effective playback rate < 0, enable seek is true and either animation’s:
      
+       
+      
      
+       
      
+        
      If associated effect end is positive infinity,
+        
      
+         
      throw an "InvalidStateError" DOMException and
+abort these steps.
      
+        
      Otherwise,
+        
      
+         
      Set the animation’s hold time to the animation’s associated effect end.
      
+       
      
+      
      If animation’s effective playback rate = 0 and animation’s current time is unresolved,
+      
      
+       
      Set the animation’s hold time to zero.
      
+     
      
+    
    7. 
+     
      If has finite timeline and previous current time is unresolved:
      
+     
        
+      
      • 
+       
        Set the flag auto align start time to true.
        
+     
      
+     
      Note: If play is called for a CSS animation during style update,
+the animation’s start time cannot be reliably calculated until post layout since the start time is to align with the start or end of the animation range (depending on the playback rate).
+In this case, the animation is said to have an auto-aligned start
+time,
+whereby the start time is automatically adjusted as needed to align the animation’s progress to the animation range.
      
+    
    8. 
+     
      If animation’s hold time is resolved,
+let its start time be unresolved.
      
+    
    9. 
+     
      If animation has a pending play task or a pending pause task,
      
+     
        
+      
      1. 
+       
        Cancel that task.
        
+      
      2. 
+       
        Set has pending ready promise to true.
        
+     
      
+    
    10. 
+     
      If the following three conditions are all satisfied:
      
+     
+     
      abort this procedure.
      
+    
    11. 
+     
      If has pending ready promise is false,
+let animation’s current ready promise be a new promise in the relevant Realm of animation.
      
+    
    12. 
+     
      Schedule a task to run as soon as animation is ready.
+The task shall perform the following steps:
      
+     
        
+      
      1. 
+       
        Assert that at least one of animation’s start time or hold time is resolved.
        
+      
      2. 
+       
        Let ready time be the time value of
+the timeline associated with animation at the moment
+when animation became ready.
        
+      
      3. 
+       
        Perform the steps corresponding to the first matching condition below,
+if any:
        
+       
        
+        
        If animation’s hold time is resolved,
+        
        
+         
          
+          
        1. 
+           
          Apply any pending playback rate on animation.
          
+          
        2. 
+           
          Let new start time be the result of evaluating ready time - hold time / playback rate for animation.
+If the playback rate is zero, let new start time be simply ready time.
          
+          
        3. 
+           
          Set the start time of animation to new start time.
          
+          
        4. 
+           
          If animation’s playback rate is not 0, make animation’s hold time unresolved.
          
+         
        
+        
        If animation’s start time is resolved and animation has a pending playback rate,
+        
        
+         
          
+          
        1. 
+           
          Let current time to match be the result of evaluating (ready time - start time) × playback rate for animation.
          
+          
        2. 
+           
          Apply any pending playback rate on animation.
          
+          
        3. 
+           
          If animation’s playback rate is zero, let animation’s hold time be current time to match.
          
+          
        4. 
+           
          Let new start time be the result of evaluating ready time - current time to match / playback rate for animation.
+If the playback rate is zero, let new start time be simply ready time.
          
+          
        5. 
+           
          Set the start time of animation to new start time.
          
+         
        
+       
        
+      
      4. 
+       
        Resolve animation’s current
+ready promise with animation.
        
+      
      5. 
+       
        Run the procedure to update an animation’s finished state for animation with the did seek flag set to false,
+and the synchronously notify flag set to false.
        
+       
         Note that the order of the above two steps is important
+    since it means that an animation with zero-length associated
+    effect will resolve its current ready promise before its current finished promise. 
        
+     
      
+     
      So long as the above task is scheduled but has yet to run, animation is described as having a pending play task.
+While the task is running, however, animation does not have
+a pending play task.
      
+     
      If a user agent determines that animation is immediately ready, it
+may schedule the above task as a microtask such that it runs at the next microtask checkpoint, but it must not perform the task synchronously.
      
+     
      
+      
      The above requirement to run the pending play task asynchronously
+ensures that code such as the following behaves consistently between
+implementations:
      
+      
      
+       
+
      animation.play();
+animation.ready.then(
+  () => { console.log('Playback commenced'); },
+  () => { console.log('Playback was canceled'); }
+);
+// Suppose some condition requires playback to be canceled...
+animation.cancel();
+// "Playback was canceled" will be printed to the console.
+
      
+      
      
+      
      In the above code, were the pending play task run synchronously, the current ready promise would not be rejected.
      
+     
      
+    
    13. 
+     
      Run the procedure to update an animation’s finished state for animation with the did seek flag set to false, and
+the synchronously notify flag set to false.
      
+   
    
+   
     The procedure to play an animation needs to include scheduling a task for
+updating custom effects.
    
+   
    3.4.7.1. Auto-aligning the start time
    
+   
    When attached to a non-monotonic timeline, the start time of the animation may be layout dependent.
+In this case, we defer calculation of the start time until the timeline has been updated post
+layout.
+When updating timeline current time, the start time of any attached animation is conditionally updated.
+The procedure for calculating an auto-aligned start time is as follows:
    
+   
      
+    
    1. 
+     
      If the auto-align start time flag is false, abort this procedure.
      
+    
    2. 
+     
      If the timeline is inactive, abort this procedure.
      
+    
    3. 
+     
      If play state is idle, abort this procedure.
      
+    
    4. 
+     
      If play state is paused, and hold time is resolved,
+abort this procedure.
      
+    
    5. 
+     
      Let start offset be the resolved timeline time corresponding to the start of the animation attachment range.
+In the case of view timelines, it requires a calculation based on the proportion of the cover range.
      
+    
    6. 
+     
      Let end offset be the resolved timeline time corresponding to the end of the animation attachment range.
+In the case of view timelines, it requires a calculation based on the proportion of the cover range.
      
+    
    7. 
+     
      Set start time to start offset if effective playback rate ≥ 0,
+and end offset otherwise.
      
+    
    8. 
+     
      Clear hold time.
      
+   
    
+   
    3.4.8. Pausing an animation
    
+   
    The procedure to pause an animation needs to refer not only to the associated effect but also any descendants of the associated effect.
    
+   Likewise, the procedure to pause an animation needs to include scheduling
+a task for updating custom effects.
+   
    Update the constraints for setting the seek time to only apply when using a
+monotonic timeline. A scroll-driven animation needs to defer setting the
+hold time until the animation range has been computed.
    
+   
    Replace:
    
+   
    
+    
      
+     
    1. 
+      
      Let seek time be
+   a time value that is initially unresolved.
      
+     
    2. 
+      
      Let has finite timeline be true
+   if animation has an associated timeline that is not monotonically increasing.
      
+     
    3. 
+      
      If the animation’s current time is unresolved,
+   perform the steps according to the first matching condition below:
      
+      
      
+       
      If animation’s playback rate is ≥ 0,
+       
      
+        
      Set seek time to zero.
      
+       
      Otherwise,
+       
      
+        
      
+         
      If associated effect end for animation is positive infinity,
+         
      
+          
      throw an "InvalidStateError" DOMException and abort these steps.
      
+         
      Otherwise,
+         
      
+          
      Set seek time to animation’s associated effect end.
      
+        
      
+      
      
+     
    4. 
+      
      If seek time is resolved,
      
+      
      
+       
      
+        
      If has finite timeline is true,
+        
      
+         
      Set animation’s start time to seek time.
      
+        
      Otherwise,
+        
      
+         
      Set animation’s hold time to seek time.
      
+       
      
+      
      
+    
    
+   
    
+   
    with:
    
+   
    
+    
      
+     
    1. 
+      
      Let has finite timeline be true
+   if animation has an associated timeline that is not monotonically increasing.
      
+     
    2. 
+      
      If the animation’s current time is unresolved and has finite timeline is false,
+   perform the steps according to the first matching condition below:
      
+      
      
+       
      If animation’s playback rate is ≥ 0,
+       
      
+        
      Set hold time to zero.
      
+       
      Otherwise,
+       
      
+        
      
+         
      If associated effect end for animation is positive infinity,
+         
      
+          
      throw an "InvalidStateError" DOMException and abort these steps.
      
+         
      Otherwise,
+         
      
+          
      Set hold time to animation’s associated effect end.
      
+        
      
+      
      
+     
    3. 
+      
      If has finite timeline is true,
+   and the animation’s current time is unresolved
      
+      
        
+       
      • 
+        
        Set the auto align start time flag to true.
        
+      
      
+    
    
+   
    
+   
    Replace:
    
+   
    
+    
    Schedule a task to be executed at the first possible moment where both of the following conditions are true:
    
+    
      
+     
    • 
+      
      the user agent has performed any processing necessary to suspend the playback of animation’s associated effect, if any.
      
+     
    • 
+      
      the animation is associated with a timeline that is not inactive.
      
+    
    
+   
    
+   
    With:
    
+   
    
+    
    Schedule a task to be executed at the first possible moment where all of the following conditions are true:
    
+    
      
+     
    • 
+      
      the user agent has performed any processing necessary to suspend the playback of animation’s associated effect, if any.
      
+     
    • 
+      
      the animation is associated with a timeline that is not inactive.
      
+     
    • 
+      
      the animation has a resolved hold time or start time.
      
+    
    
+   
    
+   
    Note: A start time is still required for a pause-pending animation if the auto-align start time flag is true to properly align to the animation range.
+The start time is set following the procedure for calculating an auto-aligned start time.
    
+   
    3.4.9. Canceling an animation
    
+   
+     Append the final step: 
+    
    
+     
      
+      
    1. 
+       
      Queue a task to call any custom effects associated with inclusive descendants of animation’s associated effect with an unresolved iteration progress.
      
+       
       The procedures for calling custom effects need to be reworked.
+       Currently they probably involve calling too often for changes that
+       could be coalesced.
      
+     
    
+    
    
+       
+   
    3.4.10. Speed control
    
+   
    
+    
    Add the following sentence:
    
+    
    
+     
    Note that animation effects also have a playback rate associated
+  with them that behaves differently to that defined here.
    
+    
    
+   
    
+   
    3.4.11. Calculating the overall progress of an animation
    
+   
    An animation’s overallProgress is the ratio of its current time to its associated effect end.
    
+   
    
+     The overallProgress of an animation, animation, is calculated as follows: 
+    
    
+     
    
+      
    If any of the following are true:
    
+      
+     
    
+      
    animation’s overallProgress is null.
    
+     
    If animation’s associated effect end is zero,
+     
    
+      
    
+       
    If animation’s current time is negative,
+       
    
+        
    animation’s overallProgress is zero.
    
+       
    Otherwise,
+       
    
+        
    animation’s overallProgress is one.
    
+      
    
+     
    If animation’s associated effect end is infinite,
+     
    
+      
    animation’s overallProgress is zero.
    
+     
    Otherwise,
+     
    
+      
     overallProgress = min(max(current time / animation’s associated effect end, 0), 1)  
    
+    
    
+   
    
+   
    3.5. Animation effects
    
+   
    Adds the following text:
    
+   
    
+    
    The associated effect of an animation is said to be directly associated with that animation.
    
+    
    Animation effects can be combined together into a hierarchy using group effects (see § 3.10 Grouping and synchronization).
+    Only the root animation effect of such a hierarchy can be directly associated with an animation.
+    If an animation effect that has a parent group is designated as the associated effect of an animation, the animation effect is removed from its parent group before
+    being associated with the animation.
    
+    
    An animation effect is associated with an animation if
+    it is directly associated with an animation or if it has an ancestor group effect that is directly associated with an
+    animation.
    
+   
    
+   
    3.5.1. Types of animation effects
    
+   
    This specification defines two types of animation effects:
    
+   
+   
    3.5.2. The active interval
    
+   
    In this level of the specification the lower bound of the active interval is
+defined as:
    
+   
    
+    
    The lower bound of the active interval is determined by the start time of the animation effect but may be shifted by a start delay on
+    the animation effect.
    
+   
    
+   
    The subsequent diagram should also refer to the animation effect start
+time as opposed to the animation start time.
    
+   
    Finally, the description of the end delay is updated to:
    
+   
    
+    
    An end delay may also be specified but is primarily only of
+    use when sequencing animations such as by using a sequence effect.
    
+   
    
+   
    The normative description is updated as follows:
    
+   
    
+    
    The lower bound of the active interval is defined by the
+    combination of the animation effect’s start time and start delay.
    
+    
    An animation effect’s start time is the moment at
+    which the parent group,
+    if any, has scheduled the animation effect to begin.
+    It is expressed in inherited time.
    
+    
    In most cases, including the case when the animation effect has
+    no parent group,
+    the start time is zero.
+    The singular exception is sequence effects which set
+    the start times of their
+    children as described in § 3.10.4.1 The start time of
+  children of a sequence effect.
    
+    
    In addition to the start
+    time, an animation effect also has a start delay which is an offset from the start
+    time.
    
+    
    Unlike the start time which
+    is determined by the parent group, the start
+    delay is a property of the animation effect itself.
    
+    
    The lower bound of the active interval of an animation effect,
+    expressed in inherited time space,
+    is the sum of the start time and the start delay.
    
+    
    These definitions are incorporated in the calculation of the local
+    time (see § 3.5.3 Local time and inherited time) and active time.
    
+   
    
+   
    And finally regarding the definition of the end time:
    
+   
    
+    
    The end time of an animation effect is the result of
+    evaluating max(start
+    time + start delay + active duration + end delay,
+    0).
    
+   
    
+   
    3.5.3. Local time and inherited time
    
+   
    This section is added.
    
+   
    
+    
    In Web Animations all times are relative to some point of reference.
+These different points of reference produce different time
+spaces.
    
+    
    This can be compared to coordinate spaces as used in computer
+graphics.
+The zero time of a time space is analogous to the origin of
+a coordinate space.
    
+    
    Just as with coordinate spaces, time spaces can also be nested. Group effects typically perform some
+transformations on the time values they
+receive from their parent or animation before passing on the transformed time values to their children.
+Child animation effects then operate within that
+transformed time space.
    
+    
    Children take the transformed time values from their
+parent—called the inherited time—and add their start time to establish
+their own local time space as illustrated
+below.
    
+    
    
+      Inherited time and local time. 
+     
     Inherited time and local time.
     At time t, the inherited time is 2.5.
     For animation effect (a) which has a start time of 1, the local time is 1.5.
     For animation effect (b) which has a start time of 1
+      and a start delay of 1,
+      the local time is also 1.5
+      since local time is based on an animation effect’s start time only,
+      and not on its start delay. 
    
+    
    
+   
    
+   
    For an animation effect, the inherited time at
+a given moment is based on the first matching condition from the
+following:
    
+   
    
+    
    If the animation effect has a parent group,
+    
    
+     
    the inherited time is the parent group’s current transformed time.
    
+    
    If the animation effect is directly associated with
+an animation,
+    
    
+     
    the inherited time is the current time of the animation.
    
+    
    Otherwise,
+    
    
+     
    the inherited time is unresolved.
    
+   
    
+   
    The local time of an animation effect is the animation effect’s inherited time minus its start time.
+If the inherited time is unresolved then the local time
+is also unresolved.
    
+   
    3.5.4. Animation effect phases and
+states
    
+   
    
+    This section is non-normative 
+    
    The non-normative description of the in play state includes the following
+description;
    
+    
    
+     
    This occurs when the animation effect and all its
+    ancestors are in the active phase. Animation effects only “move” when
+    they are in play.
    
+     
    It is possible for an animation effect to be in the active phase but not in play.
+    For example, if an animation effect has a parent
+    group that causes the animation effect’s active
+    interval to be clipped and both parent and child apply the
+    same fill mode, the child animation effect may be
+    effectively be snapshotted within the active phase despite no longer being in play.
    
+    
    
+    
    Likewise for current
    
+    
    
+     
    This will be the case if the animation effect is in
+    play or in its before phase, or it has an
+    ancestor for which this is true thereby opening up the
+    possibility that this animation effect might play again
+    (e.g. due to repeating).
    
+    
    
+   
    
+   
    The normative definition of in play includes the following condition:
    
+   
    
+    
      
+     
    1. 
+      
      the animation effect has a parent group that
+is in play or else the animation effect is directly associated with an animation that is not finished.
      
+    
    
+   
    
+   
    In place of:
    
+   
    
+    
      
+     
    1. 
+      
      the animation effect is associated with an animation that is
+not finished.
      
+    
    
+   
    
+   
    The normative definition of current adds the following
+condition:
    
+   
    
+    
+   
    
+   
    Add the following definitions to the list used in determining the phase of
+an animation effect.
    
+   
    
+    
    at progress timeline boundary
+    
    
+     
    Determined using the following procedure:
    
+     
      
+      
    1. 
+       
      If any of the following conditions are true:
      
+       
+       
      return false
      
+      
    2. 
+       
      Let effective start time be the animation’s start time if resolved, or zero otherwise.
      
+      
    3. 
+       
      Set unlimited current time based on the first matching
+condition:
      
+       
      
+        
      start time is resolved:
+        
      
+         
      (timeline time - start time)
+× playback rate
      
+        
      Otherwise
+        
      
+         
      animation’s current time
      
+       
      
+      
    4. 
+       
      Let effective timeline time be unlimited current time / animation’s playback rate + effective start time
      
+      
    5. 
+       
      Let effective timeline progress be effective timeline time / timeline duration
      
+      
    6. 
+       
      If effective timeline progress is 0 or 1, return true,
+otherwise false.
      
+     
    
+   
    
+   
     This procedure is not strictly correct for a paused
+animation if the animation’s current time is explicitly set, as this can
+introduce a lead or lag, between the timeline’s current time and animation’s current time.
    
+   
     This procedure can likely be simplified, and instead determine if at a
+scrolling boundary regardless of playback rate or start time. The surprising
+behavior that this is trying to prevent is an animation becoming inactive
+precisely at the scroll limit, alleviating the need for set a fill-mode with
+a ScrollTimeline. Checking if timeline current time is
+0 or timeline duration may be sufficient.
    
+   
    Replace:
    
+   
    
+    
    An animation effect is in the before phase if the animation effect’s local time is not unresolved and either of the
+following conditions are met:
    
+    
      
+     
    1. 
+      
      the local time is less than the before-active boundary time, or
      
+     
    2. 
+      
      the animation direction is "backwards" and the local
+time is equal to the before-active boundary time.
      
+    
    
+   
    
+   
    with:
    
+   
    
+    
    An animation effect is in the before phase if the animation effect’s local time is not unresolved and either of the
+following conditions are met:
    
+    
      
+     
    1. 
+      
      the local time is less than the before-active boundary time, or
      
+     
    2. 
+      
      the animation direction is "backwards" and the local
+time is equal to the before-active boundary time and not at progress timeline boundary.
      
+    
    
+   
    
+   
    Replace:
    
+   
    
+    
    An animation effect is in the after phase if the animation
+effect’s local time is not unresolved and either of the
+following conditions are met:
    
+    
      
+     
    1. 
+      
      the local time is greater than the active-after boundary
+time, or
      
+     
    2. 
+      
      the animation direction is "forwards" and the local
+time is equal to the active-after boundary time.
      
+    
    
+   
    
+   
    with:
    
+   
    
+    
    An animation effect is in the after phase if the animation
+effect’s local time is not unresolved and either of the
+following conditions are met:
    
+    
      
+     
    1. 
+      
      the local time is greater than the active-after boundary
+time, or
      
+     
    2. 
+      
      the animation direction is "forwards" and the local
+time is equal to the active-after boundary time and not at progress timeline boundary.
      
+    
    
+   
    
+   
    3.5.5. Fill modes
    
+   
    
+    This section is non-normative 
+    
    The description of the forwards fill mode is updated from:
    
+    
    
+     
    When the animation effect is in the after phase,
+    …
    
+    
    
+    
    to:
    
+    
    
+     
    When the animation effect is in the after phase,
+    or when the animation effect is in the active phase but an ancestor is in its after phase,
+    …
    
+    
    
+    
    The description of the backwards fill mode is updated from:
    
+    
    
+     
    When the animation effect is in the before phase,
+    …
    
+    
    
+    
    to:
    
+    
    
+     
    When the animation effect is in the before phase,
+    or when the animation effect is in the active phase but an ancestor is in its before phase,
+    …
    
+    
    
+    
    The description of the both fill mode is updated from:
    
+    
    
+     
    When the animation effect …
    
+    
    
+    
    to:
    
+    
    
+     
    When the animation effect or an ancestor …
    
+    
    
+    
    (twice).
    
+    
    
+      Currently timing functions that generate results outside the
+range [0, 1] will behave unexpectedly when applied to group
+effects, as children will increase iterations or enter into fill mode
+rather than continuing to extrapolate along their defined behavior
+(which is what they would do if the timing function applied to them
+directly). 
+     
    To fix this it is possible we will wish to introduce ‘overflow’
+fill modes that respond to time values larger than or smaller than the
+active time range by extrapolating rather than filling.
    
+     
    See section
+15 (Overflowing fill) of minuted discussion from Tokyo 2013 F2F.
    
+    
    
+   
    
+   
    3.6. Repeating
    
+   
    3.6.1. Iteration intervals
    
+   
    After:
    
+   
    
+    
    The length of a single iteration is called the iteration duration.
    
+   
    
+   
    Add:
    
+   
    
+    
    The initial iteration duration of an animation effect is simply its intrinsic iteration duration.
+    The intrinsic iteration duration is calculated from the first
+    matching condition from below:
    
+    
    
+     
    If the animation effect is a group effect,
+     
    
+      
    Follow the procedure in § 3.10.3 The intrinsic
+  iteration duration of a group effect
    
+     
    If the animation effect is a sequence effect,
+     
    
+      
    Follow the procedure in § 3.10.4.2 The intrinsic
+  iteration duration of a sequence effect
    
+     
    If timeline duration is unresolved or iteration count is zero,
+     
    
+      
    Return 0
    
+     
    Otherwise
+     
    
+      
    Return (100% - start delay - end delay) / iteration count
    
+      
    Note: Presently start and end delays are zero until such time as percentage
+based delays are supported.
    
+    
    
+    
    The iteration duration of an animation effect may be set
+    by the author to represent a value other than the intrinsic
+    iteration duration.
    
+   
    
+   
    3.6.2. Iteration time space
    
+   
    
+    This section is non-normative 
+    
    The first few paragraphs of this section are replaced with:
    
+    
    
+     
    We have already encountered different time spaces in describing local time and inherited time (see § 3.5.3 Local time and inherited time).
+    Repetition introduces yet another time space: the iteration time
+    space.
    
+    
    
+   
    
+   
    3.6.3. Interval timing
    
+   
    
+    This section is non-normative 
+    
    The description is updated as follows:
    
+    
    
+     
    In the examples below, for the repeated effect, at local time 1s,
+    the iteration time is 0.
+    For the sequenced effects, at inherited time 1s, only effect B will be in play; there is no overlap.
    
+    
    
+    
    And likewise the figure is updated as follows:
    
+    
    
+      Illustration of end-point exclusive timing. 
+     
     Illustration of end-point exclusive timing. For both repeated and
+    sequenced animation effects there is no overlap at the boundaries
+    between intervals. 
    
+    
    
+   
    
+   
    3.7. Animation effect speed control
    
+   
    (This section is added.)
    
+   
    Like animations, animation effects also have a playback rate parameter.
+The playback rate of
+an animation effect is a finite real number that acts as
+a multiplier when calculating the animation effect’s transformed
+time from its local time.
    
+   
    The effect of setting the playback rate of an animation effect differs from the
+setting the playback rate on an animation.
+Its behavior is defined in the timing calculations given in § 3.8 Core animation effect
+calculations.
    
+   
    
+    This section is non-normative 
+    
    In summary, the behavior of the playback rate of an animation effect is as follows:
    
+    
+   
    
+   
    3.8. Core animation effect
+calculations
    
+   
    3.8.1. Overview
    
+   
    
+    This section is non-normative 
+    
    Update description from:
    
+    
    
+     
    At the core of the Web Animations timing model is the process that
+    takes a local time value and converts it to an iteration
+    progress.
    
+    
    
+    
    to:
    
+    
    
+     
    At the core of the Web Animations timing model is the process that
+    takes an inherited time value
+    and converts it to an iteration progress.
    
+    
    
+    
    Update diagram to show animation effect playback rate:
    
+    
    
+      Calculation of the active duration. 
+     
     Calculation of the active duration is based on
+    multiplying the iteration duration by the iteration count and then dividing by the playback rate. 
    
+    
    
+    
    Update:
    
+    
    
+     
    Having established the active duration, the process for
+    transforming an animation effect’s local time into its transformed progress (iteration progress) is illustrated
+    below.
    
+    
    
+    
    to:
    
+    
    
+     
    Having established the active duration, the process for
+    transforming an animation effect’s inherited time into its transformed progress (iteration progress) is illustrated
+    below.
    
+    
    
+    
    Update the time calculations diagram as follows:
    
+    
    
+      An overview of timing model calculations. 
+     
     An overview of timing model calculations.
     (1) The inherited time is converted into a local time by
+    incorporating the start time.
     (2) The local time is converted into an active time by
+    incorporating the start
+    delay.
     (3) The active time is divided by the iteration duration incorporating also the iteration start property and the playback rate property
+    to produce the overall progress.
     (4) The overall progress time is then converted to an offset
+    within a single iteration: the simple iteration progress.
     (5) The simple iteration progress is converted into a directed
+    progress by incorporating the playback direction.
     (6) Finally, a timing function is applied to the directed
+    progress to produce the transformed progress. 
    
+    
    
+    
    Update:
    
+    
    
+     
    The first step, calculating the local time is described in
+    Local time.
    
+    
    
+    
    to:
    
+    
    
+     
    The first step, calculating the local time is described in § 3.5.3 Local time and inherited time.
    
+    
    
+   
    
+   
    3.8.2. Calculating the active duration
    
+   
    Updated to:
    
+   
    
+    
    In order to calculate the active duration we first define the repeated duration as follows:
    
+    
    
+      repeated duration = iteration duration × iteration count 
+     
     If either the iteration duration or iteration count are zero, the repeated duration is zero. 
    
+     
     This clarification is needed since the result of infinity
+          multiplied by zero is undefined according to IEEE 754-2008. 
    
+    
    
+    
    The active duration is calculated according to the following
+    steps:
    
+    
      
+     
    1. 
+      
      If the playback rate is
+  zero, return Infinity.
      
+     
    2. 
+      
      Otherwise, return repeated duration /
+  abs(playback rate).
      
+    
    
+   
    
+   
    3.8.3. Transforming the local time
    
+   
    3.8.3.1. Calculating the active time
    
+   
    Update the qualification on the definition of the active time to include
+reference to the parent group:
    
+   
    
+    
    However, it is only defined when the animation effect should
+    produce an output and hence depends on its fill mode and
+    phase as well as the phase of its parent group, if any,
+    as follows,
    
+   
    
+   
    Update the definition to include the additional steps to for each phase:
    
+   
    
+    
    
+     
    If the animation effect is in the before phase,
+     
    
+      
    The result depends on the first matching condition from the
+following,
    
+      
    
+       
    If the animation effect has a parent group and that parent group is in the after
+phase,
+       
    
+        
    Return an unresolved time value.
    
+      
    
+      
    …
    
+     
    If the animation effect is in the active phase,
+     
    
+      
    The result depends on the first matching condition from the
+following,
    
+      
    
+       
    If the animation effect has a parent group and that parent group is in the before
+phase, and the fill mode of this animation effect
+is none or forwards,
+       
    
+        
    Return an unresolved time value.
    
+       
    If the animation effect has a parent group and that parent group is in the after
+phase, and the fill mode of this animation effect
+is none or backwards,
+       
    
+        
    Return an unresolved time value.
    
+       
    Otherwise,
+       
    
+        
    Return the result of evaluating local time - start delay.
    
+      
    
+     
    If the animation effect is in the after phase,
+     
    
+      
    The result depends on the first matching condition from the
+following,
    
+      
    
+       
    If the animation effect has a parent group and that parent group is in the before
+phase,
+       
    
+        
    Return an unresolved time value.
    
+      
    
+      
    …
    
+     
    Otherwise (the local time is unresolved),
+     
    
+      
    Return an unresolved time value.
    
+    
    
+   
    
+   
    3.8.3.2. Calculating the overall progress
    
+   
    In the definition of the overall progress update the “Otherwise”
+branch of the definition of the initial progress as:
    
+   
    
+    
    
+     
    Otherwise,
+     
    
+      
    Calculate the overall progress following the first
+matching condition from below:
    
+      
    
+       
    If the playback rate is less than zero,
+       
    
+        
    Let overall progress be (active time - active duration)
+× playback rate / iteration duration.
    
+       
    If the playback rate is zero,
+       
    
+        
    Let overall progress be zero.
    
+       
    Otherwise,
+       
    
+        
    Let overall progress be (active time × playback rate) / iteration duration.
    
+      
    
+    
    
+   
    
+   
    3.9. Time transformations
    
+   
    
+     Currently, the set of timing functions allowed on
+a group effect is not restricted.
+This has raised concern about complexity of implementation and also
+complexity of behavior with regards to fill modes.
+As a result, allowing the full set of timing functions on group
+effects is considered at risk. 
+    
    Alternatives are to either restrict timing functions on group
+effects to the linear timing function or to a set of
+“simple” timing functions that have properties that
+alleviate some of the concerns with the more complex timing
+functions.
    
+    
    See section
+2 of the discussion from August 2013.
    
+   
    
+   
    
+   
    3.9.1. Calculating the transformed progress
    
+   
    Replace the second step as the calculation of the before
+flag (to accommodate the effect playback rate):
    
+   
    
+    
      
+     
    1. 
+      
      If either the current direction is forwards or the playback rate ≥ 0
+(but not when both conditions are true),
+let going forwards be true, otherwise it is false.
      
+    
    
+   
    
+   
    3.9.2. Calculating the transformed time
    
+   
    (This section is added.)
    
+   
    The transformed time of an animation effect is simply the transformed progress multiplied by the iteration duration.
    
+   
    If the transformed progress is unresolved, then the transformed
+time is also unresolved.
    
+   
    If the transformed progress is zero and the iteration duration is infinity, then the transformed time is zero.
    
+   
    3.10. Grouping and synchronization
    
+   
    
+    This section is non-normative 
+    
    While it is possible to set the timing properties of animation
+effects individually, it is often useful to synchronize animation
+effects so that they share common timing properties and maintain
+their temporal relationship.  This is achieved using an group
+effect.
    
+    
    A simple example is illustrated below.
    
+    
    
+      Using groups to share common timing properties. 
+     
     Using groups to share common timing properties.
     (a) Shows setting a delay of 5 seconds on individual animations.
     (b) Produces the same effect by setting the delay on the group. 
    
+    
    
+    
    When a group effect is directly associated with
+an animation, the animation effect associated with the group effect can be seeked, paused, and stopped as a unit.
    
+   
    
+   
    A group effect is a type of animation effect that
+contains an ordered sequence of zero or more animation effects known as child effects.
    
+   
    At a given moment, an animation effect may be a child effect of at most one group effect known as the parent group.
+The parent group cannot be the same animation
+effect as the child effect itself.
    
+   
    By nesting group effects it is possible to create hierarchical
+tree structures.
+The following terms are used to describe the parts and properties of
+such structures and are defined in [DOM]:
    
+   
+   
    Note: in applying these definitions to animation effects, the
+    term parent refers exclusively to a parent group and does not include the animation which with
+    an animation effect may be directly associated despite the fact that conceptually the animation acts as a parent
+    time source.
    
+   
    The temporal relationship between a child effect and its parent group is incorporated in the definition of inherited time (see § 3.5.3 Local time and inherited time).
    
+   
    3.10.1. Relationship of group time to child time
    
+   
    
+    This section is non-normative 
+    
    The timing of the children of a group effect is based on
+the timing of the group.
+Specifically, times for the children are based on the parent’s transformed time.
+With regards to repetition, this means the children operate inside an iteration of the parent.
    
+    
    For example, if a group effect has an iteration
+count of 2, then the children of the group will all play twice
+since they effectively play inside the group’s iterations.
    
+    
    
+      The effect of multiple iterations on the children of a group. 
+     
     Since children of a group effect base their timing on the
+    group’s transformed time, when the group repeats, the
+    children play again. 
    
+    
    
+    
    Note that even in this case, the child animation effects still
+have only one active interval.
+However, as a result of the parent’s timing, the active
+interval is played twice.
    
+    
    If an iteration count is specified for the children of a group
+as well as for the group itself, the effect is as if the iteration
+count of the group was multiplied with the iteration count of the children.
    
+    
    
+      Iteration counts are multiplicative. 
+     
     Specifying an iteration count of 2 on a group effect and an iteration count of 3 on one of its children results in
+    that child playing 6 times. 
    
+    
    
+    
    A further result of the children of a group effect basing
+their timing on the group’s transformed time is that they
+cannot animate outside of the group’s active interval.
+This is because the transformed time of a group will not
+change outside its active interval.
+This allows groups to clip the playback of their children.
    
+    
    
+      Groups clip the active interval of contained children. 
+     
     In the first instance, an animation effect has a negative delay
+    and an infinite iteration count.
     However, when a similar animation effect is placed inside
+    a group effect with a specified iteration duration it has the effect of clipping the child animation effect’s active interval. 
    
+    
    
+    
    Some further consequences of group effect children basing
+their timing on their parent group’s transformed time are:
    
+    
+   
    
+   
    3.10.2. The start time of
+  children of a group effect
    
+   
    The start time of a child
+effect of a group effect is zero.
    
+   
    Note that specific types of group effects may override
+this definition to provide other kinds of synchronization behavior.
    
+   
    3.10.3. The intrinsic
+  iteration duration of a group effect
    
+   
    The intrinsic iteration duration of a group
+effect is based on the time when the last child effect completes
+its active interval and depends on the
+number of child effects as follows.
    
+   
    
+    
    If the group has no child effects,
+    
    
+     
    the intrinsic iteration duration is zero.
    
+    
    Otherwise,
+    
    
+     
      
+      
    1. 
+       
      Let maximum end time be the maximum value
+after calculating the end time of each child
+effect in the group. The end time may be
+expressed as a time or a percentage (in the case of a progress-based timeline). In the event of mixed time and
+percentage end times, the largest time based value
+equates to 100% for the purpose of time scaling.
      
+      
    2. 
+       
      The intrinsic iteration duration is the result of
+evaluating max(0, maximum end
+time).
      
+     
    
+   
    
+   
    This definition of the intrinsic iteration duration may be
+overridden by specific types of group effects.
    
+   
    3.10.4. Sequence effects
    
+   
    
+    This section is non-normative 
+    
    Specific types of group effects can be used to provide
+different kinds of synchronization behavior for their children.
+This specification defines one additional type of group
+effect: a sequence effect. Sequence effects arrange the start times of their
+children so that they run one at a time, in turn.
    
+    
    Compare the two arrangements illustrated below:
    
+    
    
+      Group effects and sequence effects. 
+     
     Group effects and sequence effects.
     (a) is a regular group effect where all the children run
+        simultaneously.
     (b) is a sequence effect where the children run in turn. 
    
+    
    
+    
    Since group effects can also contain other group
+effects, complex synchronization is possible by combining
+different types of groups as illustrated below.
    
+    
    
+      Nesting of group effects. 
+     
     A sequence effect that contains a regular group
+    effect as a child.
     The group effect waits for the previous child of the sequence effect to finish, and then the children of the group effect play simultaneously.
+    After they have finished the next child of the sequence
+    effect plays. 
    
+    
    
+   
    
+   
    A sequence effect is a type of group effect that schedules its child effects such that they play in
+turn following their order in the group.
+This sequencing is achieved by adjusting the start time of each child
+effect in the group.
    
+   
    3.10.4.1. The start time of
+  children of a sequence effect
    
+   
    The start time of
+a child effect of a sequence effect is the end time of the child’s previous sibling.
+If the child has no previous sibling the start time is zero.
    
+   
    
+     When the active duration is positive infinity the behavior
+for calculating the end time of an animation effect and the start time of
+subsequent children follows the usual behavior defined by IEEE
+754-2008.
+As a result, if any of the children of a sequence
+effect has an infinite active duration, any children
+that occur later in the sequence will not play. 
+    
    Similarly, the above definition does not restrict start times to positive
+values and hence some children may not play due to a negative start delay on children that occur earlier in the group
+since their active interval may end before the group’s start time.
    
+   
    
+   
    
+    This section is non-normative 
+    
    Because the start of the active interval is based on the
+sum of an animation effect’s start time and start delay, the active intervals of
+children of a sequence effect need not run in strict
+sequence but can be shifted back and forth by using the start
+delay as shown in the following diagram.
    
+    
    
+      Using negative start delays to overlap children of seq
+        groups 
+     
     Example of using the start delay on children of a sequence effect to shift their timing so that they
+    overlap (a negative delay) or are spaced apart (a positive delay). 
    
+    
    
+    
    A negative start delay can be used to cause the active
+interval of two children to overlap.
+Note that the start delay affects the start time of subsequent
+children in the group.
    
+   
    
+   
    3.10.4.2. The intrinsic
+  iteration duration of a sequence effect
    
+   
    The intrinsic iteration duration of a sequence
+effect is equivalent to the start time of a hypothetical child effect appended to the group’s children
+calculated according to the definition in § 3.10.4.1 The start time of
+  children of a sequence effect unless that produces a negative value, in
+which case the intrinsic iteration duration is zero.
    
+   
    As a result, if the sequence effect has no child
+effects the intrinsic iteration duration will be
+zero.
    
+   
    4. Animation model
    
+   
    4.1. Animation types
    
+   
    4.1.1. Not animatable
    
+   
    Update the description of an effect that targets a non-animated property as:
    
+   
    
+    
    An animation effect that targets a property that is not animatable will still exhibit the
+    usual behavior for an animation effect such as
+    occupying time in a sequence effect and
+    delaying the fulfillment of an animation’s current finished
+    promise.
    
+   
    
+   
    4.2. Keyframe Effects
    
+   
    4.2.1. The effect value of a keyframe effect
    
+   
    The procedure for computing the effect value of a single property
+referenced by a keyframe effect as one of its target properties,
+for a given iteration progress, current iteration and underlying value is amended by inserting the following step
+after the step to apply the keyframe effect composite mode.
    
+   
      
+    
    1. 
+     
      For each keyframe in interval endpoints:
      
+     
        
+      
      1. 
+       
        (As in web-animations-1).
        
+      
      2. 
+       
        If this keyframe effect has an iteration
+composite operation of accumulate,
+apply the following step current iteration times:
        
+       
          
+        
        • 
+         
          replace the property value of target property on keyframe with the result of combining the
+property value on the final keyframe in property-specific
+keyframes (Va) with the
+property value on keyframe (Vb) using the accumulation procedure defined for target property.
          
+       
        
+       
        Note: The order of arguments here is important. In the case where
+      the animation type of the target property does not define a
+      procedure for accumulation or addition, the default definition
+      for these procedures result in Vb being
+      returned. When performing iteration composition on properties
+      that do not support accumulation, the result should be the
+      initial property value of target property on keyframe, hence we make this Vb in the above step.
        
+     
      
+   
    
+   
    4.3. Combining effects
    
+   
    4.3.1. The effect stack
    
+   
    The procedure for sorting effects appends the following step:
    
+   
    
+    
      
+     
    1. 
+      
      Sort A and B in tree order.
+(By this point, A and B must have the
+same animation since otherwise the order would have been
+resolved in the previous step.)
      
+    
    
+   
    
+   
     The "associated animation of an animation effect" definition used when
+sorting animation effects needs to be revised to use the associated with an animation definition introduced in this level of the specification so that it
+correctly handles group effects.
    
+   
    4.4. Effect accumulation
    
+   
    Similar to the compositing performed between effect values (see Web Animations § 5.4.4 Effect composition), the iteration composite operation determines how values are combined between successive iterations of
+the same keyframe effect.
    
+   
    This specification defines two iteration composite operations as follows:
    
+   
    
+    
    replace
+    
    
+     
    Each successive iteration is calculated independently of previous
+iterations.
    
+    
    accumulate
+    
    
+     
    Successive iterations of the animation are accumulated with the
+final value of the previous iteration.
    
+     
    The application of the iteration composite operation is
+incorporated in the calculation of the effect value in § 4.2.1 The effect value of a keyframe effect.
    
+   
    
+   
+    
    4.5. Custom effects
    
+    
    (This section is added.)
    
+    
     This whole feature needs to be revisited. The current thinking is that
+       rather than having custom effects, we should simply have an onupdate callback on each animation effect.  That
+       would allow, for example, augmenting an existing effect with a function
+       that performs logging or triggers additional actions at certain times.
+       With the current arrangement, doing this would require adding a parent
+       group just to achieve this.
    
+    
    
+     This section is non-normative 
+     
    In some situations the animation
+effects provided by Web Animations may be insufficient.
+For example, the animation effects defined here are only able to target certain CSS properties.
+They are unable, therefore, to modify the currentScale property of an SVG element to smoothly zoom the viewport without
+affecting the document content.
    
+     
    In such cases, where the provided animation
+effects do not provide needed functionality, an effect defined by
+script may be used.
+Such custom effects receive an iteration
+progress and current iteration from the timing model and
+are responsible for producing an effect corresponding to the specified
+time.
    
+     
    Using an effect defined in script it is possible to animate not only
+otherwise un-animatable attributes and properties, but potentially
+anything that is accessible via script, including even producing audio
+or creating vibrations.
    
+     
    For example, using a custom effect that draws to a canvas element, it is possible to produce a complex animated effect
+featuring patterns that may be difficult to create using CSS or
+SVG.
+Compared to using Timing control for
+script-based animations,
+this approach ensures the animation is frame-rate
+independent and can be paused, reversed, eased with timing effects,
+accelerated, synchronized with other animations, and be controlled
+in the same manner as any other Web Animations animation without any
+additional programming.
    
+    
    
+    
    A custom effect is an author-defined programming callback
+that is passed timing information as part of the update animations and send events procedure.
    
+    
     It needs to be called whenever timing properties are updated too, right?
    
+    
    4.5.1. Sampling custom effects
    
+    
    Custom effects are called for each referencing animation effect when the update animations and send events procedure is performed
+(henceforth referred to simple as an update) based on
+the following criteria.
    
+    
      
+     
    1. 
+      
      If, on the previous update, the animation effect referencing the custom effect:
      
+      
+      
      Call the callback passing an unresolved iteration progress and the target element from the previous update as
+parameters to the callback.
      
+     
    2. 
+      
      Call the callback for the current target element based on
+the first matching condition from the following:
      
+      
      
+       
      If the animation effect referencing the custom
+effect is not in effect but was in effect in the previous
+update,
+       
      
+        
      Call the callback passing an unresolved iteration progress and the current target element as parameters to
+the callback.
      
+       
      Otherwise, if the animation effect referencing
+the custom effect:
+       
      
+        
+       
      
+        
      Call the callback passing with the referencing animation effect’s current iteration
+progress and target element as parameters to
+the callback.
      
+      
      
+    
    
+    
    
+      There may be use cases where an action needs to be triggered at
+a specific point in an animation tree.
+In many cases this can be achieved by inserting a custom effect with
+a step-start easing that spans the period during which the action
+should be triggered.
+However, this can impose additional layout requirements on the
+content which might be cumbersome to accommodate. 
+     
    Some alternatives under consideration:
    
+     
      
+      
    • 
+       
      Additional calling conditions could be defined to accommodate
+zero-width custom effects. For example, it could be required
+that the callback be called if (given infinite precision) there
+was a time between the previous and current update times that
+aligned with the custom effect.
      
+      
    • 
+       
      Instead of adding special calling conditions to custom effects,
+a new type of animation effect, Trigger, could be introduced. The
+trigger would only ever act as a zero-width custom effect as
+described above, its constructor would take a callback function,
+but not require a target or timing. It could also specify other
+calling conventions, for example whether it should only trigger
+in a specific playback direction.
      
+     
    
+    
    
+    
    4.5.2. Execution order of custom effects
    
+    
    Since custom effects, unlike animation effects, are not limited to
+a single target property, the steps for assessing their
+order of execution differs from animation effects.
    
+    
    Custom effects are executed after all animation effects have completed and
+applied their result to their targets (see Applying the composited result).
    
+    
     Need to define this more precisely.
+    Are styles flushed?
+    Presumably they are.
+    Can we suspend reflow for the duration of executing the script-based
+    animation effects and just do it once afterwards?
    
+    
    Within the set of custom effects, the
+order of execution is the same as that defined for animation effects in
+[[#the-effect-stack]].
+Items sorted earlier are executed before those sorted later.
    
+       
+   
    4.6. Animation Triggers
    
+   
    4.6.1. Overview
    
+   
    An animation trigger is used to control the playback
+of its associated animation for time-driven animations. There are two
+types of animation triggers: timeline-based and event-based.
    
+   
    Like animations, timeline-based animation triggers are associated with a timeline and are attached to an attachment range.
+Changes to animation playback occur when the associated timeline transitions
+between inside and outside the attachment range.
    
+   
    An event-based animation trigger is associated with
+an event type and an animation trigger name.
+Changes to animation playback occur when an Event is dispatched
+with type matching the trigger’s associated event type and target which is an Element whose animation-trigger-name property matches the trigger’s associated animation trigger name.
    
+   
     Should there be any effect of triggers on scroll-driven animations?
    
+   
    4.6.2. Timeline-Based Animation Trigger Internal State
    
+   
    A timeline-based animation trigger trigger has an internal boolean did trigger flag, which is initially false,
+and an internal state with
+these possible values:
    
+   
    
+    
    idle 
+    
    primary 
+    
    inverse 
+   
    
+   
    The values of state and did trigger are
+updated by the updating animation trigger state procedure, described below.
    
+   
     Do we need a formal resolution on the spec of the idle state?
    
+   
    4.6.3. Animation Trigger Behavior
    
+   
    An animation trigger has an associated animation trigger behavior which determines the trigger’s effect on its
+associated animation’s playback.
    
+   
    4.6.3.1. Timeline-Based Animation Trigger Behavior
    
+   
    For timeline-based animation triggers, the animation trigger behavior combines with did trigger and state to determine
+the effect on playback.
    
+   
    The animation effect associated with an animation trigger in the idle state
+remains in its before phase and
+stays at zero current time,
+regardless of the trigger’s did trigger flag or state.
+Otherwise, the effect on playback is as follows for
+given values of behavior:
    
+   
    
+    
    once
+    
    
+     
    
+      
    If state is primary,
+      
    
+       
    the effect is to trigger the associated animation.
    
+      
    Otherwise,
+      
    
+       
    the trigger has no effect.
    
+     
    
+    
    repeat
+    
    
+     
    
+      
    If state is primary,
+      
    
+       
    the effect is to trigger the associated animation.
    
+      
    If state is inverse,
+      
    
+       
    the effect is to reset the associated animation effect back to
+ its before phase and its associated animation’s start time to zero.
    
+     
    
+    
    alternate 
+    
    
+     
    
+      
    If state is primary and did trigger is false,
+      
    
+       
    the effect is to trigger the associated animation.
    
+      
    If state is primary and did trigger is true,
+      
    
+       
    the effect is to reverse the associated animation.
    
+      
    If state is inverse
+      
    
+       
    the effect is to reverse the associated animation.
    
+     
    
+    
    state 
+    
    
+     
    
+      
    If state is primary
+      
    
+       
    the effect is to trigger or resume the associated animation.
    
+      
    If state is inverse
+      
    
+       
    the effect is to pause the associated animation.
    
+     
    
+   
    
+   
     Do we need a proper definition for "behavior types primary/inverse"?
    
+   
    4.6.3.2. Event-Based Animation Trigger Behavior
    
+   
    For event-based animation triggers changes to animation playback happen when a
+qualifying event occurs, according to the trigger’s animation trigger behavior and the current play state of the associated animation:
    
+   
    
+    
    once
+    
    If play state is finished, do nothing.
+      Otherwise, perform the actions specified for the play function. 
+    
    repeat
+    
    First, if play state is running or paused perform the actions specified for the cancel function.
+      Then, in all cases, perform the actions specified for the play function. 
+    
    alternate
+    
    Perform the actions specified for the reverse function.
+    
    state
+    
    If the play state is running,
+      perform the actions specified for the pause function.
+      Otherwise, perform the actions specified for the play function. 
+   
    
+   
    4.6.4. Timeline-Based Animation Trigger Active Interval
    
+   
    Each timeline-based animation trigger defines an active interval and only one such interval. This interval is the segment of the timeline’s progress
+during which the trigger’s state is set to primary.
    
+   
    4.6.5. Timeline-Based Animation Trigger Ranges
    
+   
    An animation trigger has two ranges,
+the default range and the exit range.
+The exit range is used to replace default range and extend
+the active interval.
    
+   
     Should we specify that that exit range’s edges can only be equal to or greater than the default range’s edges?
    
+   
    Depending on its most recent state state, the active interval is defined as follows:
    
+   
    
+    
    If state is primary,
+    
    
+     
    Then interval is set to exit range.
    
+    
    Otherwise,
+    
    
+     
    interval is default range.
    
+   
    
+   
    4.6.6. Setting a Trigger of an Animation
    
+   
    
+     The procedure of setting a trigger of an animation animation,
+    to new trigger, is as follows: 
+    
      
+     
    1. 
+      
      Let old trigger be the current animation trigger of animation, if any.
      
+     
    2. 
+      
      If new trigger is the same object as old trigger, abort this procedure.
      
+     
    3. 
+      
      Let the trigger of animation be new trigger.
      
+     
    4. 
+      
      If new trigger is a timeline-based animation trigger,
+ run the updating animation trigger state procedure for new trigger.
      
+    
    
+   
    
+   
    4.6.7. Setting the timeline of a Timeline-Based Animation Trigger
    
+   
    
+     The procedure of setting timeline of animation trigger trigger,
+    to new timeline which may be null, is as follows: 
+    
      
+     
    1. 
+      
      Let old timeline be the current value of trigger.timeline, if any.
      
+     
    2. 
+      
      If new timeline is the same object as old timeline, abort this procedure.
      
+     
    3. 
+      
      Set trigger.timeline to new timeline.
      
+     
    4. 
+      
      Run the updating animation trigger state procedure for trigger.
      
+    
    
+   
    
+   
    4.6.8. Updating Timeline-Based Animation Trigger State
    
+   
    
+     The procedure of updating animation trigger state of a timeline-based animation trigger trigger is as follows: 
+    
      
+     
    1. 
+      
      Let did trigger be the current value of trigger’s did trigger flag.
      
+     
    2. 
+      
      Let behavior be trigger’s associated animation trigger behavior.
      
+     
    3. 
+      
      Set trigger.state as follows:
      
+      
      
+       
      If trigger’s local time is unresolved,
+       
      
+        
      Then abort this procedure.
      
+       
      Otherwise,
+       
      
+        
      
+         
      If behavior is once and did trigger is true,
+         
      
+          
      Then abort this procedure.
      
+         
      Otherwise,
+         
      
+          
      
+           
      If trigger is inside its active interval,
+           
      
+            
        
+             
      1. 
+              
        Set trigger.state to primary.
        
+             
      2. 
+              
        Set trigger.did trigger to true.
        
+            
      
+           
      Otherwise,
+           
      
+            
      
+             
      If did trigger is true,
+             
      
+              
      Set trigger.state to inverse.
      
+            
      
+          
      
+        
      
+      
      
+    
    
+   
    
+   
     Should it be the correct/expected behavior for the "did trigger" flag to reset to false if the timeline becomes idle again?
    
+   
    5. Programming interface
    
+   
    5.1. The AnimationTimeline interface
    
+
    [Exposed=Window]
+partial interface AnimationTimeline {
+    readonly attribute CSSNumberish? currentTime;
+    readonly attribute CSSNumberish? duration;
+    Animation play (optional AnimationEffect? effect = null);
+};
+
    
+   
    
+    
    Update the attribute type for currentTime.
    
+    
    
+     
    currentTime,  of type CSSNumberish, readonly, nullable
+     
    
+      
    Returns the current time for this timeline or null if this timeline is inactive.  The value is expressed as a
+percentage for a progress-based timeline, or as a double in
+milliseconds otherwise.
    
+     
    duration,  of type CSSNumberish, readonly, nullable
+     
    
+      
    Returns the duration for this timeline.
    
+    
    
+   
    
+   
    
+    
    
+     
     Animation play(optional AnimationEffect? effect = null)
+     
    
+      
    Creates a new Animation object associated with
+this timeline that begins playback as soon as it is ready.
    
+      
    If effect is specified, it will be used as the animation’s associated effect.
    
+      
     It has been suggested this method be renamed, or even removed
+(see TAG
+feedback).
    
+      
     Need to define the start behavior when effect is null.
    
+      
    The new Animation object is created using the Animation() constructor passing this AnimationTimeline object as the timeline parameter and effect as the effect parameter.
    
+      
    Following construction of the Animation object, the procedure to play an animation is performed on the newly constructed object
+with the auto-rewind flag set to true.
    
+      
    
+       
    
+        
    effect
+        
    
+         
    the associated effect to assign to the newly-created Animation object.
    
+       
    
+      
    
+    
    
+   
    
+   
    5.2. The Animation interface
    
+   
    Update the startTime and currentTime of the Animation interface, and add
+rangeStart, rangeEnd, and overallProgress as follows:
    
+
    [Exposed=Window]
+partial interface Animation {
+    attribute CSSNumberish?       startTime;
+    attribute CSSNumberish?       currentTime;
+    attribute AnimationTrigger?   trigger;
+    attribute (TimelineRangeOffset or CSSNumericValue or CSSKeywordValue or DOMString) rangeStart;
+    attribute (TimelineRangeOffset or CSSNumericValue or CSSKeywordValue or DOMString) rangeEnd;
+    readonly attribute double? overallProgress;
+};
+
    
+   
    Add or update attribute descriptions as follows:
    
+   
    
+    
    
+     
    startTime,  of type CSSNumberish, nullable
+     
    
+      
    Update the description as:
    
+    
    
+    
    
+     
    The start time of this animation. When associated with a progress-based timeline, start time must be returned as
+a CSSNumericValue with percent units. Otherwise start time must be returned as a double value, representing
+the time in units of milliseconds. Setting this attribute updates the start time using the procedure to set the start time of this object to the new value.
    
+    
    
+    
    
+     
    currentTime,  of type CSSNumberish, nullable
+     
    
+      
    update the description as:
    
+    
    
+    
    
+     
    The current time of this animation. When associated with a progress-based timeline, current time must be returned
+as a CSSNumericValue. with percent units.
+Otherwise current time must be returned as a double value,
+representing the time in units of milliseconds.
+Setting this attribute follows the procedure to set the current time of this object to the new value.
    
+    
    
+    
    Add:
    
+    
    
+     
    
+      
    rangeStart,  of type (TimelineRangeOffset or CSSNumericValue or CSSKeywordValue or DOMString)
+      
    
+       
    Specifies the start of the animation’s animation attachment range.
+Setting the attribute follows the same rules as the KeyframeAnimationOption rangeStart.
+When reading the attribute, the returned value is either a TimelineRangeOffset or the DOMString "normal".
    
+      
    rangeEnd,  of type (TimelineRangeOffset or CSSNumericValue or CSSKeywordValue or DOMString)
+      
    
+       
    Specifies the end of the animation’s animation attachment range.
+Setting the attribute follows the same rules as the KeyframeAnimationOption rangeEnd.
+When reading the attribute, the returned value is either a TimelineRangeOffset or the DOMString "normal".
    
+      
    overallProgress,  of type double, readonly, nullable
+      
    
+       
    Specifies the overallProgress of the animation as a proportion of its associated effect end.
    
+      
    trigger,  of type AnimationTrigger, nullable
+      
    
+       
    Specifies the animation’s associated animation trigger.
+Setting the attribute follows the same rules as the KeyframeAnimationOption trigger.
    
+     
    
+    
    
+   
    
+   
    5.3. The AnimationEffect interface
    
+
    [Exposed=Window]
+partial interface AnimationEffect {
+    // Timing hierarchy
+    readonly attribute GroupEffect?     parent;
+    readonly attribute AnimationEffect? previousSibling;
+    readonly attribute AnimationEffect? nextSibling;
+
+    undefined before (AnimationEffect... effects);
+    undefined after (AnimationEffect... effects);
+    undefined replace (AnimationEffect... effects);
+    undefined remove ();
+};
+
    
+   
    
+    
    
+     
    getComputedTiming()
+     
    
+      
    The description of the duration attribute of the object
+needs to indicate that if timing.duration is the string auto, this attribute will return
+the current calculated value of the intrinsic iteration duration, which may be a expressed as a double
+representing the duration in milliseconds or a percentage when the effect
+is associated with a progress-based timeline.
    
+     
    parent,  of type GroupEffect, readonly, nullable
+     
    
+      
    The parent group of this animation effect or null if this animation effect does not have
+a parent group.
    
+      
     Should this be parentGroup?
    
+     
    previousSibling,  of type AnimationEffect, readonly, nullable
+     
    
+      
    The previous sibling of this animation effect.
    
+     
    nextSibling,  of type AnimationEffect, readonly, nullable
+     
    
+      
    The next sibling of this animation effect.
    
+    
    
+   
    
+   
    
+    
    
+     
     undefined before (AnimationEffect... effects)
+     
    
+      
    Inserts effects before this animation effect.
    
+      
      
+       
    1. 
+        
      If there is no parent group, abort these steps.
      
+       
    2. 
+        
      If any of the animation effects in effects is an inclusive ancestor of this animation effect, throw a HierarchyRequestError exception and abort these steps.
      
+       
    3. 
+        
      Insert effects before
+this animation effect.
      
+      
    
+      
    
+        Note that this definition precludes the following usage since effect is an inclusive ancestor of itself: 
+
    effect.before(effect); // throws HierarchyRequestError
    
+      
    
+     
     undefined after(AnimationEffect... effects)
+     
    
+      
    Inserts effects after this animation effect.
    
+      
      
+       
    1. 
+        
      If there is no parent group, abort these steps.
      
+       
    2. 
+        
      If any of the animation effects in effects is an inclusive ancestor of this animation effect, throw a HierarchyRequestError exception and abort these steps.
      
+       
    3. 
+        
      Let reference child be the next sibling of
+this animation effect not in effects.
      
+       
    4. 
+        
      Insert effects before reference child.
      
+      
    
+     
     undefined replace(AnimationEffect... effects)
+     
    
+      
    Replaces this AnimationEffect with the passed in effects.
    
+      
      
+       
    1. 
+        
      If there is no parent group, abort these steps.
      
+       
    2. 
+        
      If any of the animation effects in effects is an inclusive ancestor of the parent group throw a HierarchyRequestError exception and abort these steps.
      
+       
    3. 
+        
      Let reference child be the next sibling of
+this animation effect not in effects.
      
+       
    4. 
+        
      Remove this animation effect from its parent group.
      
+       
    5. 
+        
      Insert effects before reference child.
      
+      
    
+     
    undefined remove()
+     
    
+      
    Removes this animation
+effect from its parent group or animation.
    
+    
    
+   
    
+   
     The remove() method can be used to remove an effect from
+either its parent group or animation. Should we keep it in level 1 and define it
+simply as removing the animation from its animation?
    
+   
    5.4. The EffectTiming and OptionalEffectTiming dictionaries
    
+
    partial dictionary EffectTiming {
+    double delay;
+    double endDelay;
+    double playbackRate = 1.0;
+    (unrestricted double or CSSNumericValue or DOMString) duration = "auto";
+};
+
+partial dictionary OptionalEffectTiming {
+    double playbackRate;
+};
+
    
+   
    Note: In this version of the spec, duration is not settable as a
+CSSNumericValue; however, duration may be returned as a CSSNumericValue when
+resolving the duration in getComputedTiming(). Future
+versions of the spec may enable setting the duration as a CSSNumeric value,
+where the unit is a valid time unit or percent.
    
+   
    
+    
    
+     
    delay,  of type double
+     
    
+      
    Update the description as:
    
+    
    
+    
    
+     
    The specified start delay which represents the number of
+milliseconds from an animation effect’s start time to the start of the active interval.
+The specified start delay is converted to a start delay following
+the normalize specified timing procedure.
    
+    
    
+    
    
+     
    endDelay,  of type double
+     
    
+      
    Update the description as:
    
+    
    
+    
    
+     
    The specified end delay which represents the number of milliseconds
+from the end of an animation effect’s active interval until the start time of any animation effect that may follow, for example, in a sequence effect. The specified end delay is converted to an end delay following the normalize specified timing procedure.
    
+    
    
+    
    
+     
    duration,  of type (unrestricted double or CSSNumericValue or DOMString), defaulting to "auto"
+     
    
+      
    Update the description as:
    
+    
    
+    
    
+     
    The specified iteration duration which is a real number greater
+than or equal to zero (including positive infinity) representing the
+time taken in milliseconds to complete a single iteration of the animation effect, or the string value auto to indicate
+that the iteration duration reflects the animation effect’s intrinsic iteration duration. The specified iteration duration is
+converted to an iteration duration following the normalize specified timing procedure.
    
+    
    
+    
    
+     
    playbackRate,  of type double, defaulting to 1.0
+     
    
+      
    The animation effect’s playback rate property which is a multiplier applied to the local time potentially
+causing the effect to run at a different rate to its natural speed.
    
+    
    
+   
    
+   
    5.5. Updating the timing of an
+AnimationEffect
    
+   
    Replace:
    
+   
    
+    
    Assign each member that exists in input to the corresponding
+   timing property of effect as follows:
    
+    
+   
    
+   
    with:
    
+   
    
+    
    Assign each member that exists in input to the corresponding
+   timing property of effect as follows:
    
+    
+   
    
+   
    Add:
    
+   
    
+    
    Follow the procedure to normalize specified timing.
    
+    
     Timing properties may also be updated due to a style change. Any change to
+   a CSS animation property that affects timing requires rerunning the
+   procedure to normalize specified timing. 
    
+   
    
+   
    5.6. The ComputedEffectTiming dictionary
    
+
    partial dictionary ComputedEffectTiming {
+    CSSNumberish         startTime;
+    CSSNumberish         endTime;
+    CSSNumberish         activeDuration;
+    CSSNumberish?        localTime;
+};
+
    
+   
    
+    
    
+     
    startTime,  of type CSSNumberish
+     
    
+      
    The start time of this animation effect expressed as a percentage if associated with a progress-based timeline, or as a double in milliseconds otherwise.
    
+      
    This is the time at which the parent group, if
+any, has scheduled this child to run within its transformed time space, that is, the animation effect’s inherited time
+space.
    
+      
    The start of the active interval is based on the sum of
+the start time and start delay.
    
+     
    endTime,  of type CSSNumberish
+     
    
+      
    Update the description as:
    
+    
    
+    
    
+     
    The end time of the animation effect in inherited timespace. The value is expressed as
+a percentage if associated with a progress-based timeline, or as a
+double in milliseconds otherwise.
+This corresponds to the end of the animation effect’s active
+interval plus any end delay.
    
+    
    
+    
    
+     
    activeDuration,  of type CSSNumberish
+     
    
+      
    Update the description as:
    
+    
    
+    
    
+     
    The active duration of this animation effect expressed
+as a percentage if associated with a progress-based timeline, or as a
+double in milliseconds otherwise.
    
+    
    
+    
    
+     
    localTime,  of type CSSNumberish, nullable
+     
    
+      
    Update the second paragraph as:
    
+    
    
+    
    
+     
    This will be null if this animation effect is not associated with an animation or if it has a parent group that is not in effect.
    
+    
    
+    
    Append:
    
+    
    
+     
    The value is expressed as a percentage if associated with a progress-based timeline, or as a double in milliseconds otherwise.
    
+    
    
+   
    
+   
    5.6.1. The FillMode enumeration
    
+
    enum FillMode { "none", "forwards", "backwards", "both", "auto" };
+
    
+   
    
+    
    auto
+    
    
+     
    Update the description as:
    
+   
    
+   
    
+    
    Fill backwards and forwards when applied to a GroupEffect and no fill when applied to a KeyframeEffect.
    
+   
    
+   
    5.7. The GroupEffect interface
    
+   
    (This section is added.)
    
+   
    Group effects are represented by the GroupEffect interface.
    
+
    [Exposed=Window]
+interface GroupEffect {
+  constructor(sequence<AnimationEffect>? children,
+              optional (unrestricted double or EffectTiming) timing = {});
+
+  readonly attribute AnimationNodeList  children;
+  readonly attribute AnimationEffect?   firstChild;
+  readonly attribute AnimationEffect?   lastChild;
+  GroupEffect clone ();
+
+  undefined prepend (AnimationEffect... effects);
+  undefined append (AnimationEffect... effects);
+};
+
    
+   
    
+    
    
+     
    GroupEffect ()
+     
    
+      
    Creates a new GroupEffect object using the following
+procedure:
    
+      
      
+       
    1. 
+        
      Create a new GroupEffect object, group.
      
+       
    2. 
+        
      Let timing input be the result of applying the
+procedure to process a timing argument to timing.
      
+       
    3. 
+        
      Let timing input be the result corresponding to the first
+matching condition from below.
      
+        
      
+         
      If options is an EffectTiming object,
+         
      
+          
      Let timing input be options.
      
+         
      Otherwise (if options is a double),
+         
      
+          
      Let timing input be a new EffectTiming object with all members set to their default values
+and duration set to options.
      
+        
      
+       
    4. 
+        
      Call the procedure to update the timing properties of an animation effect of group from timing input.
      
+        
      If that procedure causes an exception to be thrown, propagate the
+exception and abort this procedure.
      
+       
    5. 
+        
      Insert children before null.
      
+      
    
+      
    
+       
    
+        
    children
+        
    
+         
    A sequence of animation effects to add as children of this group.
    
+         
    These children are appended in sequence using the same
+  semantics as the append() method of the GroupEffect interface.
    
+        
    timing
+        
    
+         
    The timing properties or iteration duration of the new
+  group effect.
    
+       
    
+      
    
+    
    
+   
    
+   
    
+    
    
+     
    children,  of type AnimationNodeList, readonly
+     
    
+      
    The list of child effects in the group.
    
+     
    firstChild,  of type AnimationEffect, readonly, nullable
+     
    
+      
    The first child of this group effect.
    
+     
    lastChild,  of type AnimationEffect, readonly, nullable
+     
    
+      
    The last child of this group effect.
    
+    
    
+   
    
+   
    
+    
    
+     
    
+     
    undefined prepend (AnimationEffect... effects)
+     
    
+      
      
+       
    1. 
+        
      If any of the animation effects in effects is an inclusive ancestor of this animation effect, throw a HierarchyRequestError exception and abort these steps.
      
+       
    2. 
+        
      Insert effects before
+the first child.
      
+      
    
+     
     undefined append (AnimationEffect... effects)
+     
    
+      
      
+       
    1. 
+        
      If any of the animation effects in effects is an inclusive ancestor of this animation effect, throw a HierarchyRequestError exception and abort these steps.
      
+       
    2. 
+        
      Insert effects before null.
      
+      
    
+     
     GroupEffect clone ()
+     
    
+      
    Creates a deep copy of this GroupEffect object using the
+following procedure.
    
+      
      
+       
    1. 
+        
      Let source be this GroupEffect object,
+the object to be cloned.
      
+       
    2. 
+        
      Let cloned timing be a new EffectTiming object whose members are assigned
+the value of the attribute with the same name on source.getTiming().
      
+       
    3. 
+        
      Let cloned children be an empty sequence of AnimationEffect objects.
      
+       
    4. 
+        
      For each child in source.children, append the result
+of calling child.clone() to cloned children.
      
+       
    5. 
+        
      Return a new GroupEffect object created by
+calling the GroupEffect() constructor with parameters GroupEffect(cloned children, cloned timing).
      
+      
    
+    
    
+   
    
+   
    5.7.1. Processing a timing argument
    
+   
    The timing parameter passed to the GroupEffect() or SequenceEffect() constructor may be an EffectTiming object, a double
+representing the duration of the animation effect in milliseconds, or
+undefined.
    
+   
    The following procedure to process a timing argument, timing, normalizes the above inputs into
+a EffectTiming object.
    
+   
    
+    
    If timing is an EffectTiming object,
+    
    
+     
    Return timing.
    
+    
    If timing is a double,
+    
    
+     
    Return a new EffectTiming object with all members set
+to their default values and duration set
+to timing.
    
+    
    Otherwise (timing is undefined),
+    
    
+     
    Return a new EffectTiming object with all members set
+to their default values.
    
+   
    
+   
    5.7.2. Definitions for manipulating hierarchies
    
+   
    The next sibling of effect not included in a set of animation
+effects, effects is determined using the following
+steps:
    
+   
      
+    
    1. 
+     
      Let context effect be effect.
      
+    
    2. 
+     
      While the next sibling of context effect is not null perform the following steps:
      
+     
        
+      
      1. 
+       
        Let context effect be the next sibling of context effect.
        
+      
      2. 
+       
        If context effect is not in effects return context effect and abort these steps.
        
+     
      
+    
    3. 
+     
      Return null.
      
+   
    
+   
    To remove a effect from its parent group or animation, perform the steps corresponding to the first
+matching condition from below, if any:
    
+   
    
+    
    If effect has a parent group,
+    
    
+     
    Remove effect from the parent group’s
+list of child effects.
    
+    
    If effect is directly associated with
+an animation,
+    
    
+     
    Disassociate effect from the animation.
    
+   
    
+   
    To insert a series of zero or
+more animation effects, effects, to parent’s list of child effects before reference child perform the following steps for each effect in effects:
    
+   
      
+    
    1. 
+     
      Remove effect from its parent.
      
+    
    2. 
+     
      Insert effect to parent’s list of child
+effects before reference child
      
+   
    
+   
    5.8. The AnimationNodeList interface
    
+   
    A list of animation effects may be represented by
+an AnimationNodeList.
    
+   
    The AnimationNodeList interface supports indexed
+properties with indices in the range 0 ≤ index < length.
    
+   
     The only reason this interface exists is to provide a familiar
+experience for authors familiar with DOM interfaces where child nodes
+are accessed via a children member. 
    
+
    [Exposed=Window]
+interface AnimationNodeList {
+    readonly attribute unsigned long length;
+    getter AnimationEffect? item (unsigned long index);
+};
+
    
+   
    
+    
    
+     
    length,  of type unsigned long, readonly
+     
    
+      
    The number of animation effects in the list.
    
+    
    
+   
    
+   
    
+    
    
+     
     getter AnimationEffect? item(unsigned long index)
+     
    
+      
    Returns the animation effect at index.
+If index is greater than or equal to length returns null.
    
+    
    
+   
    
+   
    5.9. The SequenceEffect interfaces
    
+   
    Sequence effects are represented by the SequenceEffect interface.
    
+
    [Exposed=Window]
+interface SequenceEffect : GroupEffect {
+  constructor(sequence<AnimationEffect>? children,
+              optional (unrestricted double or EffectTiming) timing = {});
+
+  SequenceEffect clone ();
+};
+
    
+   
    
+    
    
+     
    constructor (sequence<AnimationEffect>? children,
+optional (unrestricted double or EffectTiming) timing)
+     
    
+      
    The meaning and handling of each of the parameters in this
+constructor is identical to the GroupEffect() constructor.
    
+    
    
+   
    
+   
    
+    
    
+     
     SequenceEffect clone ()
+     
    
+      
    Creates a deep copy of this SequenceEffect object using
+the same procedure as defined for the clone() method of the GroupEffect interface except that a new SequenceEffect object is created.
    
+    
    
+   
    
+   
    5.10. The KeyframeEffect interfaces
    
+   
    The KeyframeEffect interface is modified to add the following:
    
+
    partial interface KeyframeEffect {
+    attribute IterationCompositeOperation    iterationComposite;
+};
+
    
+   
    
+    
    
+     
     KeyframeEffect (target, keyframes, options)
+     
    
+      
    Amend step 5 of the procedure to create a new KeyframeEffect object as
+follows:
    
+      
      
+       
    1. 
+        
      If options is a KeyframeEffectOptions object,
+assign the iterationComposite, and composite, properties of effect to the
+corresponding value from options.
      
+        
      When assigning these properties, the error-handling defined for the
+corresponding setters on the KeyframeEffect interface is applied.
+If any of those setters require an exception to be thrown
+for the values specified by options, this procedure must throw the same exception and abort all further steps.
      
+      
    
+     
    KeyframeEffect (source)
+     
    
+      
    Amend the procedure to create a new KeyframeEffect object with the
+same properties as source to include setting the iteration composite operation from source on effect.
    
+    
    
+   
    
+   
    
+    
    
+     
    iterationComposite,  of type IterationCompositeOperation
+     
    
+      
    The iteration composite operation property of this keyframe effect as specified by one of the IterationCompositeOperation enumeration values.
    
+      
    On setting, sets the iteration composite operation property of this animation effect to the provided value.
    
+    
    
+   
    
+   
    5.10.1. Creating a new KeyframeEffect object
    
+   
    
+    This section is non-normative 
+    
    Replace:
    
+    
    
+     
    If the duration is not specified, a value of zero is used.
    
+    
    
+    
    with:
    
+    
    
+     
    If the duration is not specified, the intrinsic iteration duration is
+    used.
    
+    
    
+    
    Add:
    
+    
    
+     
    This is particularly useful in combination with other animation
+effects.  For example, fading an element before switching visibility to
+‘hidden’ can be achieved as follows,
    
+    
    
+    
    
+     
+
    new SequenceEffect(
+  [
+    new KeyframeEffect(elem, { opacity: 0 }, 1000),
+    new KeyframeEffect(elem, { visibility: 'hidden' }, { fill: 'forwards' })
+  ]
+);
    
+    
    
+   
    
+   
    5.10.2. Modification to the *Keyframe dictionaries
    
+   
    The double? type of the offset key
+in ComputedKeyframe, BaseComputedKeyframe, BaseKeyframe, BasePropertyIndexedKeyframe,
+etc.
+is replaced by (CSSNumberish? or TimelineRangeOffset or DOMString),
+where double continues to be interpreted as a percentage,
+a DOMString is parsed into a TimelineRangeOffset according to the syntax of <keyframe-selector>,
+and the resulting TimelineRangeOffset or CSSNumericValue is interpreted as defined for @keyframes.
    
+   
    If the DOMString fails to parse as a valid <keyframe-selector>,
+then the keyframe is invalid,
+and will throw a TypeError when [[web-animations-1#processing-a-keyframes-argument|processed]]
+(same as if the double value was outside the [0,1] range).
    
+   
    5.10.3. The KeyframeEffectOptions dictionary
    
+   
    The KeyframeEffectOptions dictionary interface is modified to add the
+following member:
    
+
    partial dictionary KeyframeEffectOptions {
+    IterationCompositeOperation iterationComposite = "replace";
+};
+
    
+   
    
+    
    
+     
    iterationComposite,  of type IterationCompositeOperation, defaulting to "replace"
+     
    
+      
    The iteration composite operation used to define the way
+animation values build from iteration to iteration.
    
+    
    
+    
    5.11. The IterationCompositeOperation enumeration
    
+    
    The possible values of an animation effect’s iteration composite operation are represented by the IterationCompositeOperation enumeration.
    
+
    enum IterationCompositeOperation { "replace", "accumulate" };
+
    
+    
    
+     
    replace
+     
    
+      
    Corresponds to the replace iteration composite operation value such that the effect value produced is independent of the current iteration.
    
+     
    accumulate
+     
    
+      
    Corresponds to the accumulate iteration composite operation value such that
+subsequent iterations of an animation effect build
+on the final value of the previous iteration.
    
+    
    
+    
    5.12. The EffectCallback callback function
    
+    
+     
    Custom effects can be defined in script by providing an EffectCallback callback function.
    
+
    callback EffectCallback = undefined (double? progress,
+                                (Element or CSSPseudoElement) currentTarget,
+                                Animation animation);
+
    
+     
    An EffectCallback is called each time an KeyframeEffect object
+with which it is associated is updated.
    
+     
    
+      
    
+       
    double? progress
+       
    
+        
    The iteration progress value for which to produce an effect.
+When this is null, the function SHOULD
+remove the effect.
    
+       
    (Element or CSSPseudoElement) currentTarget
+       
    
+        
    The target element on which this callback is expected
+to operate.
    
+        
    
+         
    Note that currentTarget may differ from animation.target.
    
+         
    If the target element of animation is changed between updates, this method will be
+called once with a null progress and the
+previous target element as the currentTarget, then again with the current progress and the updated target
+element as the currentTarget.
+This allows the animation effect to be removed from the old target element.
    
+        
    
+       
    Animation animation
+       
    
+        
    The Animation object that is being updated.
    
+      
    
+     
    
+        
+    
    5.13. The Animatable interface
    
+    
    
+     
    
+      
    sequence<Animation> getAnimations(options)
+      
    
+       
    Add:
    
+     
    
+     
    
+      
    If this object is the target element of two or more animation effects which are associated with the
+same animation, the corresponding Animation object will still only appear in the returned list once.
    
+     
    
+    
    
+    
    5.14. The Animatable interface mixin
    
+    
    The Animatable mixin interface
+is modified to add the following members:
    
+    
    
+     
    
+      
    Animation animate(keyframes, options)
+      
    
+       
    Amend step 6 of the procedure as follows:
    
+       
      
+        
    1. 
+         
      If options is a KeyframeAnimationOptions object,
+let trigger be the trigger member of options or, if trigger member of options is missing,
+a newly created AnimationTrigger with an empty AnimationTriggerOptions dictionary as its options.
      
+        
    2. 
+         
      Run the procedure to setting a trigger of an animation for animation with the auto-rewind flag set to true.
      
+       
    
+     
    
+    
    
+    
    The KeyframeAnimationOptions dictionary interface
+is modified to add the following members:
    
+
    dictionary TimelineRangeOffset {
+  CSSOMString? rangeName;
+  CSSNumericValue offset;
+};
+
+partial dictionary KeyframeAnimationOptions {
+    (TimelineRangeOffset or CSSNumericValue or CSSKeywordValue or DOMString) rangeStart = "normal";
+    (TimelineRangeOffset or CSSNumericValue or CSSKeywordValue or DOMString) rangeEnd = "normal";
+    AnimationTrigger? trigger;
+};
+
    
+    
    
+     
    
+      
    rangeStart,  of type (TimelineRangeOffset or CSSNumericValue or CSSKeywordValue or DOMString), defaulting to "normal"
+      
    
+       
    If present and not "normal",
+specifies the start of the animation’s animation attachment range.
+A DOMString value is parsed as an animation-range-end value
+to yield a TimelineRangeOffset rangeName and offset or alternatively a CSSKeywordValue with the value of "normal";
+a CSSNumericValue is interpreted as a TimelineRangeOffset with that offset and a null rangeName.
    
+      
    rangeEnd,  of type (TimelineRangeOffset or CSSNumericValue or CSSKeywordValue or DOMString), defaulting to "normal"
+      
    
+       
    If present and not "normal",
+specifies the end of the animation’s animation attachment range.
+A DOMString value is parsed as an animation-range-end value
+to yield a TimelineRangeOffset rangeName and offset;
+a CSSNumericValue is interpreted as a TimelineRangeOffset with that offset and a null rangeName.
    
+      
    trigger,  of type AnimationTrigger, nullable
+      
    
+       
    If present, specifies the animation’s associated animation trigger by running the procedure of setting a trigger of an animation.
    
+     
    
+    
    
+    
    Passing a CSSKeywordValue with a value other than "normal"
+as the rangeStart or rangeEnd value
+to any API defined to accept KeyframeAnimationOptions throws a TypeError.
    
+    
    Note: The rangeName and offset values of rangeStart and rangeEnd are interpreted as defined for animation-range-start/animation-range-end,
+and affect the animation accordingly.
    
+    
    See [[web-animations-1#the-animatable-interface-mixin]] for further description.
    
+    
    5.15. The AnimationPlaybackEvent interface 
    
+    
    Replace double with CSSNumberish as the type for currentTime and timelineTime.
    
+
    [Exposed=Window]
+interface AnimationPlaybackEvent : Event {
+    constructor(DOMString type, optional AnimationPlaybackEventInit
+    eventInitDict = {});
+    readonly attribute CSSNumberish? currentTime;
+    readonly attribute CSSNumberish? timelineTime;
+};
+dictionary AnimationPlaybackEventInit : EventInit {
+    CSSNumberish? currentTime = null;
+    CSSNumberish? timelineTime = null;
+};
+
    
+    
    
+     
    Update the type for the AnimationPlaybackEvent attributes.
    
+     
    
+      
    currentTime,  of type CSSNumberish, readonly, nullable
+      
    
+       
    The current time of the animation that generated the event
+at the moment the event as queued.
+This will be null if the animation was idle at the time the event was generated.
    
+      
    timelineTime,  of type CSSNumberish, readonly, nullable
+      
    
+       
    The time value of the timeline with which the animation that
+generated the event is associated at the moment the event was queued.
+This will be null if the animation was not
+associated with an active timeline at the
+time the event was queued.
    
+     
    
+    
    
+    
    
+     
    Update the type for the AnimationPlaybackEventInit members.
    
+     
    
+      
    currentTime,  of type CSSNumberish, nullable, defaulting to null
+      
    
+       
    See the description of the currentTime attribute.
    
+      
    timelineTime,  of type CSSNumberish, nullable, defaulting to null
+      
    
+       
    See the description of the timelineTime attribute.
    
+     
    
+    
    
+    
    5.16. The AnimationTrigger interface
    
+
    [Exposed=Window]
+interface AnimationTrigger {
+  constructor(optional AnimationTriggerOptions options = {});
+  attribute AnimationTimeline timeline;
+  attribute AnimationTriggerBehavior behavior;
+  attribute any rangeStart;
+  attribute any rangeEnd;
+  attribute any exitRangeStart;
+  attribute any exitRangeEnd;
+};
+
    
+    
    
+     
    
+      
    AnimationTrigger(options)
+      
    
+       
    Creates a new AnimationTrigger object using the following procedure:
    
+       
      
+        
    1. 
+         
      Create a new AnimationTrigger object, trigger.
      
+        
    2. 
+         
      Set trigger.did trigger to false.
      
+        
    3. 
+         
      Set trigger.state to idle.
      
+        
    4. 
+         
      Set trigger.behavior to options.behavior.
      
+        
    5. 
+         
      Set default range of trigger using options.rangeStart and options.rangeEnd,
+  following the same rules as the KeyframeAnimationOption rangeStart and rangeEnd respectively.
      
+        
    6. 
+         
      Set exit range of trigger using options.exitRangeStart and options.exitRangeEnd,
+  following the same rules above for default range, unless they are set to
+  "auto", in which case they are set to their corresponding side
+  of the default range.
      
+        
    7. 
+         
      Run the procedure for setting timeline of animation trigger on trigger passing options.timeline as the new timeline.
      
+       
    
+       
    
+        
    
+         
    options
+         
    
+          
    Configuration parameters for the newly-created trigger.
    
+        
    
+       
    
+     
    
+    
    
+    
    
+     
    
+      
    timeline,  of type AnimationTimeline
+      
    
+       
    Returns the timeline for this trigger
+  or `null` if this timeline is inactive.
    
+      
    behavior,  of type AnimationTriggerBehavior
+      
    
+       
    Returns the behavior of this trigger.
    
+      
    rangeStart,  of type any
+      
    
+       
    Returns the default range’s start of this trigger.
    
+      
    rangeEnd,  of type any
+      
    
+       
    Returns the default range’s end of this trigger.
    
+      
    exitRangeStart,  of type any
+      
    
+       
    Returns the exit range’s start of this trigger.
    
+      
    exitRangeEnd,  of type any
+      
    
+       
    Returns the exit range’s end of this trigger.
    
+     
    
+    
    
+    
    5.17. The AnimationTriggerOptions dictionary
    
+
    dictionary AnimationTriggerOptions {
+  AnimationTimeline? timeline;
+  AnimationTriggerBehavior? behavior = "once";
+  (TimelineRangeOffset or CSSNumericValue or CSSKeywordValue or DOMString) rangeStart = "normal";
+  (TimelineRangeOffset or CSSNumericValue or CSSKeywordValue or DOMString) rangeEnd = "normal";
+  (TimelineRangeOffset or CSSNumericValue or CSSKeywordValue or DOMString) exitRangeStart = "auto";
+  (TimelineRangeOffset or CSSNumericValue or CSSKeywordValue or DOMString) exitRangeEnd = "auto";
+};
+
    
+    
    
+     
    
+      
    timeline,  of type AnimationTimeline, nullable
+      
    
+       
    The timeline to which the trigger is associated.
+  If not specified, the trigger is associated with default document timeline.
    
+      
    behavior,  of type AnimationTriggerBehavior, nullable, defaulting to "once"
+      
    
+       
    The behavior of the trigger.
+  If not specified, the trigger’s behavior is once.
    
+      
    rangeStart,  of type (TimelineRangeOffset or CSSNumericValue or CSSKeywordValue or DOMString), defaulting to "normal"
+      
    
+       
    The start of the trigger’s default range.
+  If not specified, the default range’s start is set to "normal".
    
+      
    rangeEnd,  of type (TimelineRangeOffset or CSSNumericValue or CSSKeywordValue or DOMString), defaulting to "normal"
+      
    
+       
    The end of the trigger’s default range.
+  If not specified, the default range’s end is set to "normal".
    
+      
    exitRangeStart,  of type (TimelineRangeOffset or CSSNumericValue or CSSKeywordValue or DOMString), defaulting to "auto"
+      
    
+       
    The start of the trigger’s exit range.
+  If not specified, the exit range’s start is set to "auto".
    
+      
    exitRangeEnd,  of type (TimelineRangeOffset or CSSNumericValue or CSSKeywordValue or DOMString), defaulting to "auto"
+      
    
+       
    The end of the trigger’s exit range.
+  If not specified, the exit range’s end is set to "auto".
    
+     
    
+    
    
+    
    5.18. The AnimationTriggerBehavior enumeration
    
+
    enum AnimationTriggerBehavior { "once", "repeat", "alternate", "state" };
+
    
+    
    
+     
    once
+     
    
+      
    once.
    
+     
    repeat
+     
    
+      
    repeat.
    
+     
    alternate
+     
    
+      
    alternate.
    
+     
    state
+     
    
+      
    state.
    
+    
    
+    
    5.19. Model liveness
    
+    
    
+     This section is non-normative 
+     
    Regarding the section on, “ Changes made to the Web Animations model take
+effect immediately”, add:
    
+     
    
+      
    The same concept applies to more complex modifications of the
+    Web Animations model such as adding and removing children from
+    an GroupEffect.
    
+     
    
+     
    Add:
    
+     
    
+      
    
+       
    Changes made to the model using the programming interface do not cause any EffectCallback functions to be
+called
+       
    
+        
    For example, in the following code, the callback function will
+not be called until after the script block has
+completed during regular updating.
    
+        
    
+          
+
    var timesCalled = 0;
+elem.animate(function() {
+  timesCalled++;
+}, 10000);
+alert(timesCalled); // Displays ‘0’
    
+        
    
+        
    Note: Need to spec this properly somewhere.
    
+      
    
+     
    
+     
    6. Privacy Considerations
    
+     
    No privacy considerations have been reported on this module.
    
+     
    7. Security Considerations
    
+     
    No security considerations have been reported on this module.
    
+    
    
+   
    
+  
    
+  
     Conformance
    
+  
     Document conventions
    
+  
    Conformance requirements are expressed with a combination of
+    descriptive assertions and RFC 2119 terminology. The key words “MUST”,
+    “MUST NOT”, “REQUIRED”, “SHALL”, “SHALL NOT”, “SHOULD”, “SHOULD NOT”,
+    “RECOMMENDED”, “MAY”, and “OPTIONAL” in the normative parts of this
+    document are to be interpreted as described in RFC 2119.
+    However, for readability, these words do not appear in all uppercase
+    letters in this specification. 
    
+  
    All of the text of this specification is normative except sections
+    explicitly marked as non-normative, examples, and notes. [RFC2119]
    
+  
    Examples in this specification are introduced with the words “for example”
+    or are set apart from the normative text with class="example",
+    like this: 
    
+  
    
+    
+   
    This is an example of an informative example.
    
+  
    
+  
    Informative notes begin with the word “Note” and are set apart from the
+    normative text with class="note", like this: 
    
+  
    Note, this is an informative note.
    
+  
    Advisements are normative sections styled to evoke special attention and are
+    set apart from other normative text with <strong class="advisement">, like
+    this:  UAs MUST provide an accessible alternative. 
    
+  
    
+   Tests
+   
    Tests relating to the content of this specification
+                     may be documented in “Tests” blocks like this one.
+                     Any such block is non-normative.
    
+   
      
+   
      
+  
      
+  
       Conformance classes
      
+  
      Conformance to this specification
+    is defined for three conformance classes: 
      
+  
      
+   
      style sheet 
+   
      A CSS
+            style sheet. 
+   
      renderer 
+   
      A UA that interprets the semantics of a style sheet and renders
+            documents that use them. 
+   
      authoring tool 
+   
      A UA that writes a style sheet. 
+  
      
+  
      A style sheet is conformant to this specification
+    if all of its statements that use syntax defined in this module are valid
+    according to the generic CSS grammar and the individual grammars of each
+    feature defined in this module. 
      
+  
      A renderer is conformant to this specification
+    if, in addition to interpreting the style sheet as defined by the
+    appropriate specifications, it supports all the features defined
+    by this specification by parsing them correctly
+    and rendering the document accordingly. However, the inability of a
+    UA to correctly render a document due to limitations of the device
+    does not make the UA non-conformant. (For example, a UA is not
+    required to render color on a monochrome monitor.) 
      
+  
      An authoring tool is conformant to this specification
+    if it writes style sheets that are syntactically correct according to the
+    generic CSS grammar and the individual grammars of each feature in
+    this module, and meet all other conformance requirements of style sheets
+    as described in this module. 
      
+  
       Partial implementations
      
+  
      So that authors can exploit the forward-compatible parsing rules to
+    assign fallback values, CSS renderers must treat as invalid (and ignore
+    as appropriate) any at-rules, properties, property values, keywords,
+    and other syntactic constructs for which they have no usable level of
+    support. In particular, user agents must not selectively
+    ignore unsupported component values and honor supported values in a single
+    multi-value property declaration: if any value is considered invalid
+    (as unsupported values must be), CSS requires that the entire declaration
+    be ignored.
      
+  
       Implementations of Unstable and Proprietary Features
      
+  
      To avoid clashes with future stable CSS features,
+        the CSSWG recommends following best practices for the implementation of unstable features and proprietary extensions to CSS. 
      
+  
       Non-experimental implementations
      
+  
      Once a specification reaches the Candidate Recommendation stage,
+    non-experimental implementations are possible, and implementors should
+    release an unprefixed implementation of any CR-level feature they
+    can demonstrate to be correctly implemented according to spec. 
      
+  
      To establish and maintain the interoperability of CSS across
+    implementations, the CSS Working Group requests that non-experimental
+    CSS renderers submit an implementation report (and, if necessary, the
+    testcases used for that implementation report) to the W3C before
+    releasing an unprefixed implementation of any CSS features. Testcases
+    submitted to W3C are subject to review and correction by the CSS
+    Working Group. 
      
+  
      Further information on submitting testcases and implementation reports
+    can be found from on the CSS Working Group’s website at http://www.w3.org/Style/CSS/Test/.
+    Questions should be directed to the public-css-testsuite@w3.org mailing list.
      
+  
+  
      Index
      
+  
      Terms defined by this specification
      
+  
+  
      Terms defined by reference
      
+  
        
+   
      • 
+    [CSS-ANIMATIONS-1] defines the following terms:
+    
          
+     
        • <keyframe-selector>
+     
        • @keyframes
+    
        
+   
      • 
+    [CSS-ANIMATIONS-2] defines the following terms:
+    
          
+     
        • alternate
+     
        • once
+     
        • repeat
+     
        • state
+    
        
+   
      • 
+    [CSS-DISPLAY-4] defines the following terms:
+    
          
+     
        • visibility
+    
        
+   
      • 
+    [CSS-EASING-1] defines the following terms:
+    
          
+     
        • linear timing function
+    
        
+   
      • 
+    [CSS-EASING-2] defines the following terms:
+    
          
+     
        • before flag
+     
        • timing function
+    
        
+   
      • 
+    [CSS-PSEUDO-4] defines the following terms:
+    
          
+     
        • CSSPseudoElement
+    
        
+   
      • 
+    [CSS-TYPED-OM-1] defines the following terms:
+    
          
+     
        • CSSKeywordValue
+     
        • CSSNumberish
+     
        • CSSNumericValue
+     
        • value
+    
        
+   
      • 
+    [CSS-VALUES-4] defines the following terms:
+    
          
+     
        • <time>
+     
        • value accumulation
+    
        
+   
      • 
+    [CSSOM-1] defines the following terms:
+    
          
+     
        • CSSOMString
+    
        
+   
      • 
+    [DOM] defines the following terms:
+    
          
+     
        • Element
+     
        • Event
+     
        • EventInit
+     
        • target
+     
        • type
+    
        
+   
      • 
+    [HTML] defines the following terms:
+    
          
+     
        • canvas
+     
        • perform a microtask checkpoint
+     
        • relevant realm
+    
        
+   
      • 
+    [INFRA] defines the following terms:
+    
          
+     
        • exist
+    
        
+   
      • 
+    [SCROLL-ANIMATIONS-1] defines the following terms:
+    
          
+     
        • animation attachment range
+     
        • animation-range-end
+     
        • animation-range-start
+     
        • html-processing-model-event-loops
+     
        • scroll-driven animations
+    
        
+   
      • 
+    [WEB-ANIMATIONS-1] defines the following terms:
+    
          
+     
        • Animatable
+     
        • Animation
+     
        • Animation()
+     
        • AnimationEffect
+     
        • AnimationTimeline
+     
        • ComputedEffectTiming
+     
        • EffectTiming
+     
        • KeyframeAnimationOptions
+     
        • KeyframeEffect
+     
        • KeyframeEffectOptions
+     
        • OptionalEffectTiming
+     
        • active phase
+     
        • active time
+     
        • active-after boundary time
+     
        • after phase
+     
        • animation
+     
        • animation direction
+     
        • animation effect
+     
        • Apply any pending playback rate
+     
        • associated effect
+     
        • associated effect end
+     
        • before phase
+     
        • before-active boundary time
+     
        • cancel()
+     
        • composite
+     
        • current finished promise
+     
        • current iteration
+     
        • current ready promise
+     
        • current time (for animation)
+     
        • current time (for timeline)
+     
        • default document timeline
+     
        • directed progress
+     
        • direction
+     
        • easing
+     
        • effect value
+     
        • effective playback rate
+     
        • end delay
+     
        • fill
+     
        • fill mode
+     
        • finished
+     
        • hold time
+     
        • idle
+     
        • in effect
+     
        • inactive timeline
+     
        • iteration count
+     
        • iteration duration
+     
        • iteration progress
+     
        • iteration start
+     
        • iterationStart
+     
        • iterations
+     
        • keyframe effect
+     
        • monotonically increasing
+     
        • monotonically increasing timeline
+     
        • not animatable
+     
        • overall progress
+     
        • pause an animation
+     
        • pause()
+     
        • paused
+     
        • pending pause task
+     
        • pending playback rate
+     
        • play state
+     
        • play()
+     
        • playback direction
+     
        • reverse an animation
+     
        • reverse()
+     
        • running
+     
        • simple iteration progress
+     
        • source
+     
        • start time
+     
        • target element
+     
        • target property
+     
        • time value
+     
        • timeline
+     
        • transformed progress
+     
        • unresolved
+     
        • update an animation's finished state
+     
        • update animations and send events
+     
        • update the timing properties of an animation effect
+    
        
+   
      • 
+    [WEBIDL] defines the following terms:
+    
          
+     
        • DOMException
+     
        • DOMString
+     
        • Exposed
+     
        • InvalidStateError
+     
        • a new promise
+     
        • any
+     
        • double
+     
        • resolve a promise
+     
        • sequence
+     
        • throw
+     
        • undefined
+     
        • unrestricted double
+     
        • unsigned long
+    
        
+  
      
+  
      References
      
+  
      Normative References
      
+  
      
+   
      [CSS-ANIMATIONS-1]
+   
      David Baron; et al. CSS Animations Level 1. URL: https://drafts.csswg.org/css-animations/
+   
      [CSS-ANIMATIONS-2]
+   
      David Baron; Brian Birtles. CSS Animations Level 2. URL: https://drafts.csswg.org/css-animations-2/
+   
      [CSS-DISPLAY-4]
+   
      Elika Etemad; Tab Atkins Jr.. CSS Display Module Level 4. URL: https://drafts.csswg.org/css-display/
+   
      [CSS-EASING-1]
+   
      Brian Birtles; Dean Jackson; Matt Rakow. CSS Easing Functions Level 1. URL: https://drafts.csswg.org/css-easing/
+   
      [CSS-EASING-2]
+   
      CSS Easing Functions Level 2. URL: https://drafts.csswg.org/css-easing/
+   
      [CSS-PSEUDO-4]
+   
      Daniel Glazman; Elika Etemad; Alan Stearns. CSS Pseudo-Elements Module Level 4. URL: https://drafts.csswg.org/css-pseudo-4/
+   
      [CSS-TYPED-OM-1]
+   
      Tab Atkins Jr.; François Remy. CSS Typed OM Level 1. URL: https://drafts.css-houdini.org/css-typed-om-1/
+   
      [CSS-VALUES-4]
+   
      Tab Atkins Jr.; Elika Etemad. CSS Values and Units Module Level 4. URL: https://drafts.csswg.org/css-values-4/
+   
      [CSSOM-1]
+   
      Daniel Glazman; Emilio Cobos Álvarez. CSS Object Model (CSSOM). URL: https://drafts.csswg.org/cssom/
+   
      [DOM]
+   
      Anne van Kesteren. DOM Standard. Living Standard. URL: https://dom.spec.whatwg.org/
+   
      [HTML]
+   
      Anne van Kesteren; et al. HTML Standard. Living Standard. URL: https://html.spec.whatwg.org/multipage/
+   
      [INFRA]
+   
      Anne van Kesteren; Domenic Denicola. Infra Standard. Living Standard. URL: https://infra.spec.whatwg.org/
+   
      [RFC2119]
+   
      S. Bradner. Key words for use in RFCs to Indicate Requirement Levels. March 1997. Best Current Practice. URL: https://datatracker.ietf.org/doc/html/rfc2119
+   
      [SCROLL-ANIMATIONS-1]
+   
      Brian Birtles; et al. Scroll-driven Animations. URL: https://drafts.csswg.org/scroll-animations-1/
+   
      [WEB-ANIMATIONS-1]
+   
      Brian Birtles; et al. Web Animations. URL: https://drafts.csswg.org/web-animations-1/
+   
      [WEBIDL]
+   
      Edgar Chen; Timothy Gu. Web IDL Standard. Living Standard. URL: https://webidl.spec.whatwg.org/
+  
      
+  
      IDL Index
      
+
      [Exposed=Window]
+partial interface AnimationTimeline {
+    readonly attribute CSSNumberish? currentTime;
+    readonly attribute CSSNumberish? duration;
+    Animation play (optional AnimationEffect? effect = null);
+};
+
+[Exposed=Window]
+partial interface Animation {
+    attribute CSSNumberish?       startTime;
+    attribute CSSNumberish?       currentTime;
+    attribute AnimationTrigger?   trigger;
+    attribute (TimelineRangeOffset or CSSNumericValue or CSSKeywordValue or DOMString) rangeStart;
+    attribute (TimelineRangeOffset or CSSNumericValue or CSSKeywordValue or DOMString) rangeEnd;
+    readonly attribute double? overallProgress;
+};
+
+[Exposed=Window]
+partial interface AnimationEffect {
+    // Timing hierarchy
+    readonly attribute GroupEffect?     parent;
+    readonly attribute AnimationEffect? previousSibling;
+    readonly attribute AnimationEffect? nextSibling;
+
+    undefined before (AnimationEffect... effects);
+    undefined after (AnimationEffect... effects);
+    undefined replace (AnimationEffect... effects);
+    undefined remove ();
+};
+
+partial dictionary EffectTiming {
+    double delay;
+    double endDelay;
+    double playbackRate = 1.0;
+    (unrestricted double or CSSNumericValue or DOMString) duration = "auto";
+};
+
+partial dictionary OptionalEffectTiming {
+    double playbackRate;
+};
+
+partial dictionary ComputedEffectTiming {
+    CSSNumberish         startTime;
+    CSSNumberish         endTime;
+    CSSNumberish         activeDuration;
+    CSSNumberish?        localTime;
+};
+
+enum FillMode { "none", "forwards", "backwards", "both", "auto" };
+
+[Exposed=Window]
+interface GroupEffect {
+  constructor(sequence<AnimationEffect>? children,
+              optional (unrestricted double or EffectTiming) timing = {});
+
+  readonly attribute AnimationNodeList  children;
+  readonly attribute AnimationEffect?   firstChild;
+  readonly attribute AnimationEffect?   lastChild;
+  GroupEffect clone ();
+
+  undefined prepend (AnimationEffect... effects);
+  undefined append (AnimationEffect... effects);
+};
+
+[Exposed=Window]
+interface AnimationNodeList {
+    readonly attribute unsigned long length;
+    getter AnimationEffect? item (unsigned long index);
+};
+
+[Exposed=Window]
+interface SequenceEffect : GroupEffect {
+  constructor(sequence<AnimationEffect>? children,
+              optional (unrestricted double or EffectTiming) timing = {});
+
+  SequenceEffect clone ();
+};
+
+partial interface KeyframeEffect {
+    attribute IterationCompositeOperation    iterationComposite;
+};
+
+partial dictionary KeyframeEffectOptions {
+    IterationCompositeOperation iterationComposite = "replace";
+};
+
+enum IterationCompositeOperation { "replace", "accumulate" };
+
+callback EffectCallback = undefined (double? progress,
+                                (Element or CSSPseudoElement) currentTarget,
+                                Animation animation);
+
+dictionary TimelineRangeOffset {
+  CSSOMString? rangeName;
+  CSSNumericValue offset;
+};
+
+partial dictionary KeyframeAnimationOptions {
+    (TimelineRangeOffset or CSSNumericValue or CSSKeywordValue or DOMString) rangeStart = "normal";
+    (TimelineRangeOffset or CSSNumericValue or CSSKeywordValue or DOMString) rangeEnd = "normal";
+    AnimationTrigger? trigger;
+};
+
+[Exposed=Window]
+interface AnimationPlaybackEvent : Event {
+    constructor(DOMString type, optional AnimationPlaybackEventInit
+    eventInitDict = {});
+    readonly attribute CSSNumberish? currentTime;
+    readonly attribute CSSNumberish? timelineTime;
+};
+dictionary AnimationPlaybackEventInit : EventInit {
+    CSSNumberish? currentTime = null;
+    CSSNumberish? timelineTime = null;
+};
+
+[Exposed=Window]
+interface AnimationTrigger {
+  constructor(optional AnimationTriggerOptions options = {});
+  attribute AnimationTimeline timeline;
+  attribute AnimationTriggerBehavior behavior;
+  attribute any rangeStart;
+  attribute any rangeEnd;
+  attribute any exitRangeStart;
+  attribute any exitRangeEnd;
+};
+
+dictionary AnimationTriggerOptions {
+  AnimationTimeline? timeline;
+  AnimationTriggerBehavior? behavior = "once";
+  (TimelineRangeOffset or CSSNumericValue or CSSKeywordValue or DOMString) rangeStart = "normal";
+  (TimelineRangeOffset or CSSNumericValue or CSSKeywordValue or DOMString) rangeEnd = "normal";
+  (TimelineRangeOffset or CSSNumericValue or CSSKeywordValue or DOMString) exitRangeStart = "auto";
+  (TimelineRangeOffset or CSSNumericValue or CSSKeywordValue or DOMString) exitRangeEnd = "auto";
+};
+
+enum AnimationTriggerBehavior { "once", "repeat", "alternate", "state" };
+
+
      
+  
      Issues Index
      
+  
      
+   
      
+     This is not quite right. If old effect is attached to another
+  animation in the same task then we should probably not do an extra
+  callback with unresolved. 
+    
      The definition of when custom effects gets called needs to be
+  audited and probably rewritten.
      
+     ↵
+   
      
+   
       The procedure to play an animation needs to include scheduling a task for
+updating custom effects. ↵
      
+   
       The procedures for calling custom effects need to be reworked.
+       Currently they probably involve calling too often for changes that
+       could be coalesced. ↵
      
+   
       This procedure is not strictly correct for a paused
+animation if the animation’s current time is explicitly set, as this can
+introduce a lead or lag, between the timeline’s current time and animation’s current time. ↵
      
+   
       This procedure can likely be simplified, and instead determine if at a
+scrolling boundary regardless of playback rate or start time. The surprising
+behavior that this is trying to prevent is an animation becoming inactive
+precisely at the scroll limit, alleviating the need for set a fill-mode with
+a ScrollTimeline. Checking if timeline current time is
+0 or timeline duration may be sufficient. ↵
      
+   
      
+     Currently timing functions that generate results outside the
+range [0, 1] will behave unexpectedly when applied to group
+effects, as children will increase iterations or enter into fill mode
+rather than continuing to extrapolate along their defined behavior
+(which is what they would do if the timing function applied to them
+directly). 
+    
      To fix this it is possible we will wish to introduce ‘overflow’
+fill modes that respond to time values larger than or smaller than the
+active time range by extrapolating rather than filling.
      
+    
      See section
+15 (Overflowing fill) of minuted discussion from Tokyo 2013 F2F.
      
+     ↵
+   
      
+   
      
+     Currently, the set of timing functions allowed on
+a group effect is not restricted.
+This has raised concern about complexity of implementation and also
+complexity of behavior with regards to fill modes.
+As a result, allowing the full set of timing functions on group
+effects is considered at risk. 
+    
      Alternatives are to either restrict timing functions on group
+effects to the linear timing function or to a set of
+“simple” timing functions that have properties that
+alleviate some of the concerns with the more complex timing
+functions.
      
+    
      See section
+2 of the discussion from August 2013.
      
+     ↵
+   
      
+   
       The "associated animation of an animation effect" definition used when
+sorting animation effects needs to be revised to use the associated with an animation definition introduced in this level of the specification so that it
+correctly handles group effects. ↵
      
+   
       This whole feature needs to be revisited. The current thinking is that
+       rather than having custom effects, we should simply have an onupdate callback on each animation effect.  That
+       would allow, for example, augmenting an existing effect with a function
+       that performs logging or triggers additional actions at certain times.
+       With the current arrangement, doing this would require adding a parent
+       group just to achieve this. ↵
      
+   
       It needs to be called whenever timing properties are updated too, right? ↵
      
+   
      
+     There may be use cases where an action needs to be triggered at
+a specific point in an animation tree.
+In many cases this can be achieved by inserting a custom effect with
+a step-start easing that spans the period during which the action
+should be triggered.
+However, this can impose additional layout requirements on the
+content which might be cumbersome to accommodate. 
+    
      Some alternatives under consideration:
      
+    
        
+     
      • 
+      
        Additional calling conditions could be defined to accommodate
+zero-width custom effects. For example, it could be required
+that the callback be called if (given infinite precision) there
+was a time between the previous and current update times that
+aligned with the custom effect.
        
+     
      • 
+      
        Instead of adding special calling conditions to custom effects,
+a new type of animation effect, Trigger, could be introduced. The
+trigger would only ever act as a zero-width custom effect as
+described above, its constructor would take a callback function,
+but not require a target or timing. It could also specify other
+calling conventions, for example whether it should only trigger
+in a specific playback direction.
        
+    
      
+     ↵
+   
      
+   
       Need to define this more precisely.
+    Are styles flushed?
+    Presumably they are.
+    Can we suspend reflow for the duration of executing the script-based
+    animation effects and just do it once afterwards? ↵
      
+   
       Should there be any effect of triggers on scroll-driven animations? ↵
      
+   
       Do we need a formal resolution on the spec of the idle state? ↵
      
+   
       Do we need a proper definition for "behavior types primary/inverse"? ↵
      
+   
       Should we specify that that exit range’s edges can only be equal to or greater than the default range’s edges? ↵
      
+   
       Should it be the correct/expected behavior for the "did trigger" flag to reset to false if the timeline becomes idle again? ↵
      
+   
       It has been suggested this method be renamed, or even removed
+(see TAG
+feedback). ↵
      
+   
       Need to define the start behavior when effect is null. ↵
      
+   
       Should this be parentGroup? ↵
      
+   
       The remove() method can be used to remove an effect from
+either its parent group or animation. Should we keep it in level 1 and define it
+simply as removing the animation from its animation? ↵
      
+  
      
+  
      
+   MDN
+   
      
+    
      KeyframeEffect/iterationComposite
      
+    
      
+     Firefox80+Safari16.4+ChromeNone
+     
      
+     Opera?EdgeNone
+     
      
+     Edge (Legacy)?IENone
+     
      
+     Firefox for Android?iOS Safari?Chrome for Android?Android WebView?Samsung Internet?Opera Mobile?
+    
      
+   
      
+  
      
+
+
+
+
+
+
\ No newline at end of file

From 146b2be8460e49e0ab3ac044dcf7cb9bfe41059d Mon Sep 17 00:00:00 2001
From: Stefan Zager 
Date: Wed, 4 Jun 2025 11:01:46 -0700
Subject: [PATCH 04/11] in progress

---
 web-animations-2/Overview.bs | 180 +++++++++++++++++++----------------
 1 file changed, 97 insertions(+), 83 deletions(-)

diff --git a/web-animations-2/Overview.bs b/web-animations-2/Overview.bs
index 8d0a4e2053d..9466bf70fdd 100644
--- a/web-animations-2/Overview.bs
+++ b/web-animations-2/Overview.bs
@@ -2367,15 +2367,18 @@ Animation Triggers {#triggers}
 ### Overview ### {#triggers-overview}
 
 An animation trigger is used to control the playback
-of its associated [=animation=] for time-driven animations. There are two
-types of [=animation triggers=]:
+of its associated [=animation=] for time-driven animations.
+An [=animation trigger=] has an associated animation trigger behavior
+which determines the [=animation trigger|trigger=]'s effect on its
+associated [=animation=]'s playback.
+
+Issue: Should there be any effect of triggers on scroll-driven animations?
+
+There are two types of [=animation triggers=]:
 timeline-based and
 event-based.
 
-Like animations, [=timeline-based animation triggers=] are associated with a [=timeline=]
-and are attached to an [=animation attachment range|attachment range=].
-Changes to animation playback occur when the associated [=timeline=] transitions
-between inside and outside the [=animation attachment range|attachment range=].
+### Event-Based Animation Triggers ### {#event-based-trigger}
 
 An [=event-based animation trigger=] is associated with
 an event type
@@ -2385,9 +2388,42 @@ with {{Event/type}} matching the trigger's associated [=animation trigger/event
 and {{Event/target}} which is an {{Element}} whose 'animation-trigger-name'
 property matches the trigger's associated [=animation trigger name=].
 
-Issue: Should there be any effect of triggers on scroll-driven animations?
+#### Event-Based Animation Trigger Behavior #### {#event-trigger-behavior}
+
+For [=event-based animation triggers=] changes to animation playback happen when a
+qualifying event occurs, according to the trigger's [=animation trigger behavior=]
+and the current [=play state=] of the associated [=animation=]:
+
+
      
+  
      ''animation-trigger-type/once''
      
+  
      If [=play state=] is [=play state/finished=], do nothing.
+      Otherwise, perform the actions specified for the {{Animation/play}} function.
+  
      
+
+  
      ''animation-trigger-type/repeat''
      
+  
      First, if [=play state=] is [=play state/running=] or [=play state/paused=]
+      perform the actions specified for the {{Animation/cancel}} function.
+      Then, in all cases, perform the actions specified for the {{Animation/play}} function.
+  
      
 
-### Timeline-Based Animation Trigger Internal State ### {#trigger-state}
+  
      ''animation-trigger-type/alternate''
      
+  
      Perform the actions specified for the {{Animation/reverse}} function.
      
+
+  
      ''animation-trigger-type/state''
      
+  
      If the [=play state=] is [=play state/running=],
+      perform the actions specified for the {{Animation/pause}} function.
+      Otherwise, perform the actions specified for the {{Animation/play}} function.
+  
      
+
      
+
+### Timeline-Based Animation Triggers ### {#timeline-based-trigger}
+
+Like animations, [=timeline-based animation triggers=] are associated with a [=timeline=]
+and are attached to an [=animation attachment range|attachment range=].
+Changes to animation playback occur when the associated [=timeline=] transitions
+between inside and outside the [=animation attachment range|attachment range=].
+
+#### Timeline-Based Animation Trigger Internal State #### {#trigger-state}
 
 A [=timeline-based animation trigger=] |trigger|
 has an internal boolean did trigger flag, which is initially false,
@@ -2405,12 +2441,6 @@ updated by the [=updating animation trigger state=] procedure, described below.
 
 Issue: Do we need a formal resolution on the spec of the idle state?
 
-### Animation Trigger Behavior ### {#trigger-behaviors}
-
-An [=animation trigger=] has an associated animation trigger behavior
-which determines the [=animation trigger|trigger=]'s effect on its
-associated [=animation=]'s playback.
-
 #### Timeline-Based Animation Trigger Behavior #### {#timeline-trigger-behaviors}
 
 For [=timeline-based animation triggers=], the [=animation trigger behavior=]
@@ -2480,42 +2510,14 @@ given values of behavior:
 
 Issue: Do we need a proper definition for "behavior types primary/inverse"?
 
-#### Event-Based Animation Trigger Behavior #### {#event-trigger-behaviors}
-
-For [=event-based animation triggers=] changes to animation playback happen when a
-qualifying event occurs, according to the trigger's [=animation trigger behavior=]
-and the current [=play state=] of the associated [=animation=]:
-
-
      
-  
      ''animation-trigger-type/once''
      
-  
      If [=play state=] is [=play state/finished=], do nothing.
-      Otherwise, perform the actions specified for the {{Animation/play}} function.
-  
      
-
-  
      ''animation-trigger-type/repeat''
      
-  
      First, if [=play state=] is [=play state/running=] or [=play state/paused=]
-      perform the actions specified for the {{Animation/cancel}} function.
-      Then, in all cases, perform the actions specified for the {{Animation/play}} function.
-  
      
-
-  
      ''animation-trigger-type/alternate''
      
-  
      Perform the actions specified for the {{Animation/reverse}} function.
      
-
-  
      ''animation-trigger-type/state''
      
-  
      If the [=play state=] is [=play state/running=],
-      perform the actions specified for the {{Animation/pause}} function.
-      Otherwise, perform the actions specified for the {{Animation/play}} function.
-  
      
-
      
-
-### Timeline-Based Animation Trigger Active Interval ### {#trigger-active-interval}
+#### Timeline-Based Animation Trigger Active Interval #### {#trigger-active-interval}
 
 Each [=timeline-based animation trigger=] defines an
 active interval
 and only one such interval. This interval is the segment of the timeline’s progress
 during which the trigger’s [=animation trigger state|state=] is set to [=animation trigger state/primary=].
 
-### Timeline-Based Animation Trigger Ranges ### {#trigger-ranges}
+#### Timeline-Based Animation Trigger Ranges #### {#trigger-ranges}
 
 An [=animation trigger=] has two [=animation attachment range|ranges=],
 the default range and the exit range.
@@ -2538,38 +2540,7 @@ Depending on its most recent [=animation trigger state|state=] |state|, the
 
 
 
-### Setting a Trigger of an Animation ### {#setting-animation-trigger}
-
-  
      
-    The procedure of setting a trigger of an animation |animation|,
-    to |new trigger|, is as follows:
-
-    1. Let |old trigger| be the current [=animation trigger=] of |animation|, if any.
-
-    1. If |new trigger| is the same object as |old trigger|, abort this procedure.
-
-    1. Let the [=animation trigger|trigger=] of |animation| be |new trigger|.
-
-    1. If |new trigger| is a [=timeline-based animation trigger=],
-         run the [=updating animation trigger state=] procedure for |new trigger|.
-  
      
-
-### Setting the timeline of a Timeline-Based Animation Trigger ### {#setting-trigger-timeline}
-
-  
      
-    The procedure of setting timeline of animation trigger |trigger|,
-    to |new timeline| which may be null, is as follows:
-
-    1. Let |old timeline| be the current value of |trigger|.{{AnimationTrigger/timeline}}, if any.
-
-    1. If |new timeline| is the same object as |old timeline|, abort this procedure.
-
-    1. Set |trigger|.{{AnimationTrigger/timeline}} to |new timeline|.
-
-    1. Run the [=updating animation trigger state=] procedure for |trigger|.
-  
      
-
-### Updating Timeline-Based Animation Trigger State ### {#updating-trigger-state}
+#### Updating Timeline-Based Animation Trigger State #### {#updating-trigger-state}
 
 
      
   The procedure of updating animation trigger state
@@ -2622,6 +2593,37 @@ Depending on its most recent [=animation trigger state|state=] |state|, the
 
 Issue: Should it be the correct/expected behavior for the "did trigger" flag to reset to false if the timeline becomes idle again?
 
+### Setting a Trigger of an Animation ### {#setting-animation-trigger}
+
+  
      
+    The procedure of setting a trigger of an animation |animation|,
+    to |new trigger|, is as follows:
+
+    1. Let |old trigger| be the current [=animation trigger=] of |animation|, if any.
+
+    1. If |new trigger| is the same object as |old trigger|, abort this procedure.
+
+    1. Let the [=animation trigger|trigger=] of |animation| be |new trigger|.
+
+    1. If |new trigger| is a [=timeline-based animation trigger=],
+         run the [=updating animation trigger state=] procedure for |new trigger|.
+  
      
+
+### Setting the timeline of a Timeline-Based Animation Trigger ### {#setting-trigger-timeline}
+
+  
      
+    The procedure of setting timeline of animation trigger |trigger|,
+    to |new timeline| which may be null, is as follows:
+
+    1. Let |old timeline| be the current value of |trigger|.{{AnimationTrigger/timeline}}, if any.
+
+    1. If |new timeline| is the same object as |old timeline|, abort this procedure.
+
+    1. Set |trigger|.{{AnimationTrigger/timeline}} to |new timeline|.
+
+    1. Run the [=updating animation trigger state=] procedure for |trigger|.
+  
      
+
 
 
 
      Programming interface
      
@@ -3672,8 +3674,10 @@ Update the type for the AnimationPlaybackEventInit members.
 [Exposed=Window]
 interface AnimationTrigger {
   constructor(optional AnimationTriggerOptions options = {});
-  attribute AnimationTimeline timeline;
   attribute AnimationTriggerBehavior behavior;
+  attribute EventTarget? eventTarget;
+  attribute DOMString? eventType;
+  attribute AnimationTimeline? timeline;
   attribute any rangeStart;
   attribute any rangeEnd;
   attribute any exitRangeStart;
@@ -3751,8 +3755,10 @@ interface AnimationTrigger {
 
 
       dictionary AnimationTriggerOptions {
+  AnimationTriggerBehavior behavior = "once";
+  EventTarget? eventTarget;
+  DOMString? eventType;
   AnimationTimeline? timeline;
-  AnimationTriggerBehavior? behavior = "once";
   (TimelineRangeOffset or CSSNumericValue or CSSKeywordValue or DOMString) rangeStart = "normal";
   (TimelineRangeOffset or CSSNumericValue or CSSKeywordValue or DOMString) rangeEnd = "normal";
   (TimelineRangeOffset or CSSNumericValue or CSSKeywordValue or DOMString) exitRangeStart = "auto";
@@ -3763,16 +3769,24 @@ dictionary AnimationTriggerOptions {
 
      
 
-  : timeline
-  ::
-      The timeline to which the trigger is associated.
-      If not specified, the trigger is associated with [=default document timeline=].
-
   : behavior
   ::
       The behavior of the trigger.
       If not specified, the trigger's behavior is ''animation-trigger-type/once''.
 
+  : eventTarget
+  ::
+      The {{EventTarget!!interface}} for an [=event-based animation trigger=].
+
+  : eventType
+  ::
+      The [=animation trigger/event type=] for an [=event-based animation trigger=].
+
+  : timeline
+  ::
+      The timeline to which a [=timeline-based animation trigger=] is associated.
+      If not specified, the trigger is associated with [=default document timeline=].
+
   : rangeStart
   ::
       The start of the trigger’s [=default range=].

From 45d4ec436af0a8112f37304a721b1d25bdc43503 Mon Sep 17 00:00:00 2001
From: Stefan Zager 
Date: Wed, 4 Jun 2025 11:11:06 -0700
Subject: [PATCH 05/11] Fix keyframe-block

---
 css-animations-2/Overview.bs | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/css-animations-2/Overview.bs b/css-animations-2/Overview.bs
index d204cc09600..647e64b169d 100644
--- a/css-animations-2/Overview.bs
+++ b/css-animations-2/Overview.bs
@@ -321,7 +321,7 @@ its associated [=keyframes=] are generated as follows:
         In this case no animation is generated,
         and any existing animation matching |name| is canceled.
 
-    1.  Group together all keyframe blocks
+    1.  Group together all <> declarations
         that share the same [=specified value|specified=] <>
         (treating ''@keyframe/from'' as ''0%'' and ''@keyframe/to'' as ''100%''),
         last declared 'animation-timing-function' [=computed value=]
@@ -329,13 +329,13 @@ its associated [=keyframes=] are generated as follows:
         and last declared 'animation-composition' [=computed value=]
         (defaulting to |default composite| if there is no such declaration).
 
-    1.  For each such group of matching [=keyframe blocks=],
-        ordered by their earliest [=keyframe block=] in the sorted order:
+    1.  For each such group of matching <> declarations,
+        ordered by their earliest <> 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=]
+                the last declaration among all its <> declarations
                 takes precedence.
                 [[CSS-CASCADE-4]]
 

From fc36f376f466bc3d5cdae097f4a555a5c62e865d Mon Sep 17 00:00:00 2001
From: Stefan Zager 
Date: Tue, 10 Jun 2025 12:58:11 -0700
Subject: [PATCH 06/11] in progress

---
 css-animations-2/Overview.bs   |  16 +-
 web-animations-2/Overview.bs   | 101 +++++---
 web-animations-2/Overview.html | 438 +++++++++++++++++++--------------
 3 files changed, 332 insertions(+), 223 deletions(-)

diff --git a/css-animations-2/Overview.bs b/css-animations-2/Overview.bs
index 8a1f31b0e80..f02e5a65292 100644
--- a/css-animations-2/Overview.bs
+++ b/css-animations-2/Overview.bs
@@ -964,12 +964,15 @@ The values of 'animation-trigger-exit-range-start' have the following meaning:
 
 ## The 'animation-trigger-name' property ## {#animation-trigger-name}
 
-The 'animation-trigger-name' property is used to associate an {{Element}} with
-all [=event-based animation triggers=] whose [=animation trigger name=] matches
-the property value. When an {{Event}} is dispatched
-with the associated {{Element}} as {{Event/target}},
-and with {{Event/type}} matching an associated trigger's {{animation trigger/event type}},
-the trigger performs its effect on its associated [=animation=].
+The 'animation-trigger-name' property associates an {{Element}} with
+all {{Elements}} having an 'animation-trigger-event' property with
+<> matching this {{Element}}'s 'animation-trigger-name'.
+When an {{Event}} is dispatched with this {{Element}} as {{Event/target}},
+and with {{Event/type}} matching the <> of the
+'animation-trigger-event' property of the other {{Elements}}, animation
+playback on those {{Elements}} is modified according to their
+'animation-trigger-behavior' property, as described for
+[=event-based animation triggers=].
 
 
       Name: animation-trigger-name
@@ -987,6 +990,7 @@ Animation type: not animatable
 ## The 'animation-trigger-event' property ## {#animation-trigger-event}
 
 The 'animation-trigger-event' property is used to specify the criteria
+for [=qualifying
 for an [=event-based animation trigger=]
 to perform its effect on its associated [=animation=]. It consists of two parts:
 an event type that is matched against the {{Event/type}} of a dispatched {{Event}},
diff --git a/web-animations-2/Overview.bs b/web-animations-2/Overview.bs
index 9466bf70fdd..87ab1cb572c 100644
--- a/web-animations-2/Overview.bs
+++ b/web-animations-2/Overview.bs
@@ -2376,23 +2376,26 @@ Issue: Should there be any effect of triggers on scroll-driven animations?
 
 There are two types of [=animation triggers=]:
 timeline-based and
-event-based.
+event-based. The
+type of an animation trigger is deduced from its attributes: a
+timeline-based animation trigger will have a non-empty {{AnimationTrigger/timeline}}
+attribute, while an event-based animation trigger will have non-empty
+{{AnimationTrigger/eventTarget}} and {{AnimationTrigger/eventType}} attributes.
 
 ### Event-Based Animation Triggers ### {#event-based-trigger}
 
-An [=event-based animation trigger=] is associated with
-an event type
-and an animation trigger name.
-Changes to animation playback occur when an {{Event!!interface}} is dispatched
-with {{Event/type}} matching the trigger's associated [=animation trigger/event type=]
-and {{Event/target}} which is an {{Element}} whose 'animation-trigger-name'
-property matches the trigger's associated [=animation trigger name=].
+An [=event-based animation trigger=] executes its [=animation trigger behavior|behavior=]
+when a [=qualifying event=] is dispatched.
+A qualifying event is 
+an {{Event!!interface}} with {{Event/type}} matching the trigger's {{AnimationTrigger/eventType}}
+and {{Event/target}} matching the trigger's {{AnimationTrigger/eventTarget}}.
 
 #### Event-Based Animation Trigger Behavior #### {#event-trigger-behavior}
 
-For [=event-based animation triggers=] changes to animation playback happen when a
-qualifying event occurs, according to the trigger's [=animation trigger behavior=]
-and the current [=play state=] of the associated [=animation=]:
+When a [=animation trigger/qualifying event=] is dispatched, the associated
+[=animation=]'s playback is modified as follows,
+based on the trigger's [=animation trigger behavior|behavior=]
+and the current [=play state=] of the animation:
 
 
      
   
      ''animation-trigger-type/once''
      
@@ -2527,16 +2530,16 @@ the [=animation trigger/active interval|active interval=].
 Issue: Should we specify that that exit range’s edges can only be equal to or greater than the default range’s edges?
 
 Depending on its most recent [=animation trigger state|state=] |state|, the
-[=animation trigger/active interval|active interval=] is defined as follows:
+[=animation trigger/active interval=] is defined as follows:
 
 
      
   : If |state| is [=animation trigger state/primary=],
   ::
-    Then |interval| is set to [=exit range=].
+    Then the [=active interval=] is [=exit range=].
 
   : Otherwise,
   ::
-    |interval| is [=default range=].
+    The [=active interval=] is [=default range=].
 
 
      
 
@@ -2615,6 +2618,9 @@ Issue: Should it be the correct/expected behavior for the "did trigger" flag to
     The procedure of setting timeline of animation trigger |trigger|,
     to |new timeline| which may be null, is as follows:
 
+    1. If |trigger| is not a [=timeline-based animation trigger=]
+         throw a TypeError.
+
     1. Let |old timeline| be the current value of |trigger|.{{AnimationTrigger/timeline}}, if any.
 
     1. If |new timeline| is the same object as |old timeline|, abort this procedure.
@@ -3690,26 +3696,45 @@ interface AnimationTrigger {
   ::
       Creates a new {{AnimationTrigger}} object using the following procedure:
 
+      1. If |options| contains a {{AnimationTriggerOptions/timeline}} entry
+         and also contains either or both of
+         {{AnimationTriggerOptions/eventTarget}} and {{AnimationTriggerOptions/eventType}}
+         throw a TypeError.
+         
+      1. If |options| contains only one of 
+         {{AnimationTriggerOptions/eventTarget}} and {{AnimationTriggerOptions/eventType}}
+         throw a TypeError.
+
       1. Create a new {{AnimationTrigger}} object, |trigger|.
 
-      1. Set |trigger|.[=did trigger=] to false.
+      1. Set |trigger|.{{AnimationTrigger/behavior}} to |options|.{{AnimationTriggerOptions/behavior}}.
 
-      1. Set |trigger|.[=animation trigger state|state=] to [=animation trigger state/idle=].
+      1. If |options| contains a {{AnimationTriggerOptions/timeline}} entry
+         1. Set |trigger|.{{AnimationTrigger/timeline}} to |options|.{{AnimationTriggerOptions/timeline}}.
 
-      1. Set |trigger|.{{AnimationTrigger/behavior}} to |options|.{{AnimationTriggerOptions/behavior}}.
+         1. Set |trigger|.[=did trigger=] to false.
+
+         1. Set |trigger|.[=animation trigger state|state=] to [=animation trigger state/idle=].
 
-      1. Set [=default range=] of |trigger| using |options|.{{AnimationTriggerOptions/rangeStart}} and |options|.{{AnimationTriggerOptions/rangeEnd}},
-          following the same rules as the KeyframeAnimationOption
-          rangeStart and
-          rangeEnd respectively.
+         1. Set [=default range=] of |trigger| using
+            |options|.{{AnimationTriggerOptions/rangeStart}} and |options|.{{AnimationTriggerOptions/rangeEnd}}
+            following the same rules as the KeyframeAnimationOption
+            rangeStart and
+            rangeEnd respectively.
 
-      1. Set [=exit range=] of |trigger| using |options|.{{AnimationTriggerOptions/exitRangeStart}} and |options|.{{AnimationTriggerOptions/exitRangeEnd}},
-          following the same rules above for [=default range=], unless they are set to
-          "auto", in which case they are set to their corresponding side
-          of the [=default range=].
+         1. Set [=exit range=] of |trigger| using |options|.{{AnimationTriggerOptions/exitRangeStart}} and |options|.{{AnimationTriggerOptions/exitRangeEnd}},
+             following the same rules above for [=default range=], unless they are set to
+             "auto", in which case they are set to their corresponding side
+             of the [=default range=].
 
-      1. Run the procedure for [=setting timeline of animation trigger=]
-          on |trigger| passing |options|.{{AnimationTriggerOptions/timeline}} as the new timeline.
+         1. Run the procedure for [=setting timeline of animation trigger=]
+             on |trigger| passing |options|.{{AnimationTriggerOptions/timeline}} as the new timeline.
+
+      1. If |options| contains a {{AnimationTriggerOptions/eventTarget}} and
+         {{AnimationTriggerOptions/eventType}} entries
+         1. Set |trigger|.{{AnimationTrigger/eventTarget}} to |options|.{{AnimationTriggerOptions/eventTarget}}.
+
+         1. Set |trigger|.{{AnimationTrigger/eventType}} to |options|.{{AnimationTriggerOptions/eventType}}.
 
       
      
@@ -3724,15 +3749,27 @@ interface AnimationTrigger {
 
      
 
+  : behavior
+  ::
+      Returns the [=animation trigger behavior|behavior=] of this trigger.
+
+  : eventTarget
+  ::
+      For an [=event-based animation trigger=], this is
+      matched against a dispatched event's {{Event/target}}
+      to determine whether it's a [=animation trigger/qualifying event=].
+      
+  : eventType
+  ::
+      For an [=event-based animation trigger=], this is
+      matched against a dispatched event's {{Event/type}}
+      to determine whether it's a [=animation trigger/qualifying event=].
+
   : timeline
   ::
       Returns the [=timeline=] for this trigger
       or `null` if this timeline is [=inactive timeline|inactive=].
 
-  : behavior
-  ::
-      Returns the [=animation trigger behavior|behavior=] of this trigger.
-
   : rangeStart
   ::
       Returns the [=default range=]’s start of this trigger.
@@ -3780,7 +3817,7 @@ dictionary AnimationTriggerOptions {
 
   : eventType
   ::
-      The [=animation trigger/event type=] for an [=event-based animation trigger=].
+      The {{Event/type}} for an [=event-based animation trigger=].
 
   : timeline
   ::
diff --git a/web-animations-2/Overview.html b/web-animations-2/Overview.html
index 072ebdcc629..4f354a94825 100644
--- a/web-animations-2/Overview.html
+++ b/web-animations-2/Overview.html
@@ -8,7 +8,7 @@
   
   
   
-  
+  
   
   
 
-
-
-
-
-
-
-
-
-
-
-
-
- 
-  
      
-   
       
      
-   
      CSS Animations Level 2
      
-   
      Editor’s Draft, 
      
-   
      
-    More details about this document
-    
      
-     
      
-      
      This version:
-      
      https://drafts.csswg.org/css-animations-2/
-      
      Latest published version:
-      
      https://www.w3.org/TR/css-animations-2/
-      
      Feedback:
-      
      CSSWG Issues Repository
-      
      Inline In Spec
-      
      Editors:
-      
      L. David Baron (Google)
-      
       (Invited Expert)
-      
      Suggest an Edit for this Spec:
-      
      GitHub Editor
-      
      Issues List:
-      
      https://github.com/w3c/csswg-drafts/labels/css-animations-2
-     
      
-    
      
-   
      
-   
      
-   
      Copyright © 2025 World Wide Web Consortium. W3C® liability, trademark and permissive document license rules apply. 
      
-   
      
-  
      
-  
      
-   
      Abstract
      
-   
      This CSS module describes a way for authors to animate the values of CSS properties over time, using keyframes. The behavior of these keyframe animations can be controlled by specifying their duration, number of repeats, and repeating behavior.
      
-    CSS is a language for describing the rendering of structured documents
-(such as HTML and XML)
-on screen, on paper, etc. 
-  
      
-  
      Status of this document
      
-  
      
-   
       This is a public copy of the editors’ draft.
-	It is provided for discussion only and may change at any moment.
-	Its publication here does not imply endorsement of its contents by W3C.
-	Don’t cite this document other than as work in progress. 
      
-   
      Please send feedback
-	by filing issues in GitHub (preferred),
-	including the spec code “css-animations” in the title, like this:
-	“[css-animations] …summary of comment…”.
-	All issues and comments are archived.
-	Alternately, feedback can be sent to the (archived) public mailing list www-style@w3.org. 
      
-   
      This document is governed by the 03 November 2023 W3C Process Document. 
      
-  
      
-  
      
-  
-  
      
-   
      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:
      
-   
-   
      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).
      
-   
      
-    
      In the example below, animation’s initial owning element is elem. animation is disassociated from element through an update to the computed value of elem’s animation-name property.
      
-
      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
-
      
-    
      Note that although the owning element is often equal to the target element of an animation’s associated effect,
-this is not always the case.
-The following example demonstrates some of the situations where these two
-elements may differ.
      
-
      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:
        
-     
-    
      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
      
-   
-    
-     
-      
-      
-      
-      
-      
-      
-      
-      
-      
      Name:
-      animation-duration
-     
      Value:
-      [ auto | <time [0s,∞]> ]# 
-     
      Initial:
-      auto 
-     
      Applies to:
-      all elements 
-     
      Inherited:
-      no 
-     
      Percentages:
-      N/A 
-     
      Computed value:
-      list, each item either a time or the keyword auto 
-     
      Canonical order:
-      per grammar 
-     
      Animation type:
-      not animatable 
-   
      
-   
      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.
      
-   
-    
-     
-      
-      
-      
-      
-      
-      
-      
-      
-      
      Name:
-      animation-composition
-     
      Value:
-      <single-animation-composition>#
-     
      Initial:
-      replace
-     
      Applies to:
-      all elements
-     
      Inherited:
-      no
-     
      Percentages:
-      N/A
-     
      Computed value:
-      list, each item a keyword as specified
-     
      Canonical order:
-      per grammar
-     
      Animation type:
-      not animatable
-   
      
-   
      <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.
      
-   
      
-     For example, the following stylesheet defines two different animations
-  targeting the scale 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;
-}
-
      
-    
      If these two animations are applied to the same element, normally only
-  one animation would apply, but by specifying add as the animation-composition on the second animation, the result of the two
-  animations will be combined.
      
-    
      Since CSS Transitions [CSS3-TRANSITIONS] have a lower composite
-  order, it is possible to use animation-composition to combine CSS
-  Animations with underlying transitions as in the following example.
      
-
      .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%);
-  }
-}
-
      
-    
       Create pictures of these examples and verify they make sense.
      
-   
      
-   
      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.
      
-   
-    
-     
-      
-      
-      
-      
-      
-      
-      
-      
-      
      Name:
-      animation-timeline
-     
      Value:
-      <single-animation-timeline>#
-     
      Initial:
-      auto
-     
      Applies to:
-      all elements
-     
      Inherited:
-      no
-     
      Percentages:
-      N/A
-     
      Computed value:
-      list, each item either
-the keyword none,
-the keyword auto,
-a case-sensitive css identifier,
-a computed scroll() function,
-or
-a computed view() function
-     
      Canonical order:
-      per grammar
-     
      Animation type:
-      not animatable
-   
      
-
      <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 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.  Declaring Animation Triggers
      
-   
      Animation Triggers are defined using the animation-trigger-* properties.
-    These list-valued properties,
-    which are all longhands of the animation-trigger 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 trigger.
      
-   
      The animation-trigger properties
-    are reset-only sub-properties of the animation shorthand.
      
-   
      5.1. The animation-trigger-behavior property
      
-   
      The animation-trigger-behavior property specifies the animation trigger behavior of the animation trigger.
      
-   
-    
-     
-      
-      
-      
-      
-      
-      
-      
-      
-      
      Name:
-      animation-trigger-behavior
-     
      Value:
-      <single-animation-trigger-behavior>#
-     
      Initial:
-      once
-     
      Applies to:
-      all elements
-     
      Inherited:
-      no
-     
      Percentages:
-      N/A
-     
      Computed value:
-      list, each item a keyword as specified
-     
      Canonical order:
-      per grammar
-     
      Animation type:
-      not animatable
-   
      
-   
      <single-animation-trigger-behavior> = once | repeat | alternate | state
      
-   
      The values of animation-trigger-behavior have the following meaning
-for an animation trigger that enters its active interval:
      
-   
      
-    
      once 
-    
       The animation is triggered and played once and only once. 
-    
      repeat 
-    
       The animation is played from the beginning each time it is triggered.
-                When the trigger’s active interval is exited the animation is reset. 
-    
      alternate 
-    
       The animation is played forwards, according to its playback direction, each time it is triggered.
-                When the trigger’s active interval is exited the animation is reversed. 
-    
      state 
-    
       The animation is triggered and played once.
-                When the trigger’s active interval is exited the animation is paused.
-                When the trigger’s active interval is re-entered the animation is resumed. 
-   
      
-   
      The behavior of each value is defined in Web Animations 2 § 4.6.3 Animation Trigger Behavior.
      
-   
       Should animation-trigger-behavior allow multiple values (currently it does)?
      
-   
      5.2. The animation-trigger-timeline property
      
-   
      The animation-trigger-timeline property specifies the timeline of the animation’s associated animation trigger.
      
-   
-    
-     
-      
-      
-      
-      
-      
-      
-      
-      
-      
      Name:
-      animation-trigger-timeline
-     
      Value:
-      <single-animation-timeline>#
-     
      Initial:
-      auto
-     
      Applies to:
-      all elements
-     
      Inherited:
-      no
-     
      Percentages:
-      N/A
-     
      Computed value:
-      list, each item either
-the keyword none,
-the keyword auto,
-a case-sensitive css identifier,
-a computed scroll() function,
-or
-a computed view() function
-     
      Canonical order:
-      per grammar
-     
      Animation type:
-      not animatable
-   
      
-   
      The values of animation-trigger-timeline have the same meaning as those of animation-timeline.
      
-   
       Probably a trigger with timeline "none" is under-specified here. Need to clarify what it means.
      
-   
      5.3. The animation-trigger-range property
      
-   
-    
-     
-      
-      
-      
-      
-      
-      
-      
-      
-      
      Name:
-      animation-trigger-range
-     
      Value:
-      [ <'animation-trigger-range-start'> <'animation-trigger-range-end'>? ]#
-     
      Initial:
-      see individual properties
-     
      Applies to:
-      see individual properties
-     
      Inherited:
-      see individual properties
-     
      Percentages:
-      see individual properties
-     
      Computed value:
-      see individual properties
-     
      Animation type:
-      see individual properties
-     
      Canonical order:
-      per grammar
-   
      
-   
      The animation-trigger-range property is a shorthand that sets animation-trigger-range-start and animation-trigger-range-end together in a single declaration,
-specifying the animation trigger’s associated default range.
-It has the same syntax as the animation-range property.
      
-   
      The behavior of animation-trigger-range is defined in Web Animations 2 § 4.6.5 Animation Trigger Ranges.
      
-   
      5.4. The animation-trigger-range-start property
      
-   
-    
-     
-      
-      
-      
-      
-      
-      
-      
-      
-      
      Name:
-      animation-trigger-range-start
-     
      Value:
-      [ normal | <length-percentage> | <timeline-range-name> <length-percentage>? ]#
-     
      Initial:
-      normal
-     
      Applies to:
-      all elements
-     
      Inherited:
-      no
-     
      Percentages:
-      relative to the specified named timeline range if one was specified, else to the entire timeline
-     
      Computed value:
-      list, each item either the keyword normal or a timeline range and progress percentage
-     
      Canonical order:
-      per grammar
-     
      Animation type:
-      not animatable
-   
      
-   
      The animation-trigger-range-start property specifies the start of the animation trigger’s
-associated default range.
      
-   
      The values of animation-trigger-range-start have the same meaning as those of animation-range-start.
      
-   
      5.5. The animation-trigger-range-end property
      
-   
-    
-     
-      
-      
-      
-      
-      
-      
-      
-      
-      
      Name:
-      animation-trigger-range-end
-     
      Value:
-      [ normal | <length-percentage> | <timeline-range-name> <length-percentage>? ]#
-     
      Initial:
-      normal
-     
      Applies to:
-      all elements
-     
      Inherited:
-      no
-     
      Percentages:
-      relative to the specified named timeline range if one was specified, else to the entire timeline
-     
      Computed value:
-      list, each item either the keyword normal or a timeline range and progress percentage
-     
      Canonical order:
-      per grammar
-     
      Animation type:
-      not animatable
-   
      
-   
      The animation-trigger-range-end property specifies the end of the animation trigger’s
-associated default range.
      
-   
      The values of animation-trigger-range-end have the same meaning as those of animation-range-end.
      
-   
      5.6. The animation-trigger-exit-range property
      
-   
-    
-     
-      
-      
-      
-      
-      
-      
-      
-      
-      
      Name:
-      animation-trigger-exit-range
-     
      Value:
-      [ <'animation-trigger-exit-range-start'> <'animation-trigger-exit-range-end'>? ]#
-     
      Initial:
-      see individual properties
-     
      Applies to:
-      see individual properties
-     
      Inherited:
-      see individual properties
-     
      Percentages:
-      see individual properties
-     
      Computed value:
-      see individual properties
-     
      Animation type:
-      see individual properties
-     
      Canonical order:
-      per grammar
-   
      
-   
      The animation-trigger-exit-range property is a shorthand that sets animation-trigger-exit-range-start and animation-trigger-exit-range-end together in a single declaration,
-specifying the animation trigger’s associated exit range.
-It has the same syntax as the animation-range property, with the addition of the auto keyword.
      
-   
      The exit range replaces the default range once the animation trigger’s active interval is entered,
-and redefines the extent of the animation trigger’s active interval.
-It is used to extend the default range, for example,
-in cases where exiting the active interval may create a visual jump that needs to be avoided.
      
-   
      The behavior of animation-trigger-exit-range is further defined in Web Animations 2 § 4.6.5 Animation Trigger Ranges.
      
-   
      5.7. The animation-trigger-exit-range-start property
      
-   
-    
-     
-      
-      
-      
-      
-      
-      
-      
-      
-      
      Name:
-      animation-trigger-exit-range-start
-     
      Value:
-      [ auto | normal | <length-percentage> | <timeline-range-name> <length-percentage>? ]#
-     
      Initial:
-      auto
-     
      Applies to:
-      all elements
-     
      Inherited:
-      no
-     
      Percentages:
-      relative to the specified named timeline range if one was specified, else to the entire timeline
-     
      Computed value:
-      list, each item either the keyword normal or a timeline range and progress percentage
-     
      Canonical order:
-      per grammar
-     
      Animation type:
-      not animatable
-   
      
-   
      The animation-trigger-exit-range-start property specifies the start of the animation trigger’s
-associated exit range.
      
-   
      The values of animation-trigger-exit-range-start have the following meaning:
      
-   
      
-    
      auto 
-    
       The start of the trigger’s exit range is equal to the start of its default range. 
-    
      normal 
-    
       The start of the trigger’s exit range is the start of its associated timeline;
-                the start of the trigger’s active interval is determined as normal. 
-    
      <length-percentage> 
-    
       The exit range starts
-                at the specified point on the timeline measuring from the start of the timeline. 
-    
      <timeline-range-name> <length-percentage>? 
-    
       The exit range starts
-                at the specified point on the timeline measuring from the start of the specified named timeline range.
-                If the <length-percentage> is omitted,
-                it defaults to 0%. 
-   
      
-   
      5.8. The animation-trigger-exit-range-end property
      
-   
-    
-     
-      
-      
-      
-      
-      
-      
-      
-      
-      
      Name:
-      animation-trigger-exit-range-end
-     
      Value:
-      [ auto | normal | <length-percentage> | <timeline-range-name> <length-percentage>? ]#
-     
      Initial:
-      auto
-     
      Applies to:
-      all elements
-     
      Inherited:
-      no
-     
      Percentages:
-      relative to the specified named timeline range if one was specified, else to the entire timeline
-     
      Computed value:
-      list, each item either the keyword normal or a timeline range and progress percentage
-     
      Canonical order:
-      per grammar
-     
      Animation type:
-      not animatable
-   
      
-   
      The animation-trigger-exit-range-end property specifies the end of the animation trigger’s
-associated exit range.
      
-   
      The values of animation-trigger-exit-range-start have the following meaning:
      
-   
      
-    
      auto 
-    
       The end of the trigger’s exit range is equal to the end of its default range. 
-    
      normal 
-    
       The end of the trigger’s exit range is the end of its associated timeline;
-                        the end of the trigger’s active interval is determined as normal. 
-    
      <length-percentage> 
-    
       The exit range ends
-                        at the specified point on the timeline measuring from the start of the timeline. 
-    
      <timeline-range-name> <length-percentage>? 
-    
       The exit range ends
-                        at the specified point on the timeline measuring from the start of the specified named timeline range.
-                        If the <length-percentage> is omitted,
-                        it defaults to 100%. 
-   
      
-   
      5.9. The animation-trigger-name property
      
-   
      The animation-trigger-name property associates an element with
-all elements having an animation-trigger-event property with
-a trigger name matching a value in this element’s animation-trigger-name.
-When an Event is dispatched with this element as target,
-and with type matching the <trigger-event-type> of a clause in the animation-trigger-event property of another element, animation
-playback on the other element is modified according to its animation-trigger-behavior property, as described for event-based animation triggers.
      
-   
-    
-     
-      
-      
-      
-      
-      
-      
-      
-      
-      
      Name:
-      animation-trigger-name
-     
      Value:
-      none | [ <trigger-name> ]#
-     
      Initial:
-      none
-     
      Applies to:
-      all elements
-     
      Inherited:
-      no
-     
      Percentages:
-      N/A
-     
      Computed value:
-      as specified
-     
      Canonical order:
-      per grammar
-     
      Animation type:
-      not animatable
-   
      
-
      <trigger-name> = <dashed-ident>
      
-   
      5.10. The animation-trigger-event property
      
-   
      The animation-trigger-event property is used to specify the criteria
-for qualifying events that cause an event-based animation trigger to perform its effect on its associated animation. It consists of two parts:
-a <trigger-event-type> that is matched against the type of a dispatched Event,
-and an <trigger-name> that is matched against the animation-trigger-name property
-of the event’s target. If both criteria match for a given event
-the trigger will perform its effect on its associated animation.
      
-   
      If the <trigger-name> is omitted from <single-trigger-event> declaration, target is matched against the element
-having the animation-trigger-event property itself.
      
-   
-    
-     
-      
-      
-      
-      
-      
-      
-      
-      
-      
      Name:
-      animation-trigger-event
-     
      Value:
-      none | [ <single-trigger-event> ]#
-     
      Initial:
-      none
-     
      Applies to:
-      all elements
-     
      Inherited:
-      no
-     
      Percentages:
-      N/A
-     
      Computed value:
-      as specified
-     
      Canonical order:
-      per grammar
-     
      Animation type:
-      not animatable
-   
      
-
      <single-trigger-event> = event ( <trigger-event-type> <trigger-name>? )
      
-
      <trigger-event-type> = <custom-ident>
      
-   
      5.11. The animation-trigger property
      
-   
      The animation-trigger property is a shorthand that sets animation-trigger-behavior, animation-trigger-timeline, animation-trigger-event, animation-trigger-range-start, animation-trigger-range-end, animation-trigger-exit-range-start, and animation-trigger-exit-range-end together in a single declaration, specifying the animation trigger for an animation.
      
-   
-    
-     
-      
-      
-      
-      
-      
-      
-      
-      
-      
      Name:
-      animation-trigger
-     
      Value:
-      auto | none | <single-animation-trigger>#
-     
      Initial:
-      see individual properties
-     
      Applies to:
-      all elements
-     
      Inherited:
-      no
-     
      Percentages:
-      N/A
-     
      Computed value:
-      see individual properties
-     
      Canonical order:
-      per grammar
-     
      Animation type:
-      not animatable
-   
      
-
      <single-animation-trigger> = [ <single-animation-trigger-behavior> | [ <single-trigger-event> | <single-timeline-trigger> ] ] <single-animation-trigger-behavior>?
-
-<single-timeline-trigger> = [ <dashed-ident> | <scroll()> | <view()> ] [ normal | <length-percentage> | <timeline-range-name> <length-percentage>? ]{0,4}
-
      
-   
      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:
      
-   
-   
      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:
      
-   
-    
-     
-      
-     
-      
-      
-      
-      
-      
-      
-      
-      
-      
-      
      Change
-      Events dispatched
-      Elapsed time (ms)
-    
      idle or before → active
-      animationstart
-      interval start 
-     
       idle or before → after ٭
-      animationstart
-      interval start 
-     
      animationend
-      interval end 
-     
      active → before
-      animationend
-      interval start
-     
      active → active and the current iteration of the animation’s associated effect has changed since the previous animation frame 
-      animationiteration
-      (See below) †
-     
      active → after
-      animationend
-      interval end
-     
      after → active
-      animationstart
-      interval end
-     
      after → before ٭
-      animationstart
-      interval end
-     
      animationend
-      interval start
-     
      not idle and not after → idle
-      animationcancel
-      The active time of the animation at the moment it was cancelled
-          calculated using a fill mode of both.
-   
      
-   
      ٭ 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.
      
-   
      
-     As an example, in the following code fragment, when the specified style of elem is initially updated, a user agent may defer recalculating
-the computed value of the animation property. 
-    
      However, the getAnimations() method called on elem is specified by Web Animations and can return CSSAnimation objects as
-defined in this specification.
-Hence, as result of the requirements in this section, the user agent must
-calculate the updated value of elem’s animation property and
-create the requested CSSAnimation object before returning its result.
      
-    
      
-
      elem.style.animation = 'fadeOut 1s';
-elem.getAnimations()[0].pause();
-
      
-    
      
-    
      Similarly, reading playState may depend on pending style
-changes.
      
-    
      
-
      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: 
      
-   
-   
      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. 
-   
      
-  
      
-  
       Conformance
      
-  
       Document conventions
      
-  
      Conformance requirements are expressed with a combination of
-    descriptive assertions and RFC 2119 terminology. The key words “MUST”,
-    “MUST NOT”, “REQUIRED”, “SHALL”, “SHALL NOT”, “SHOULD”, “SHOULD NOT”,
-    “RECOMMENDED”, “MAY”, and “OPTIONAL” in the normative parts of this
-    document are to be interpreted as described in RFC 2119.
-    However, for readability, these words do not appear in all uppercase
-    letters in this specification. 
      
-  
      All of the text of this specification is normative except sections
-    explicitly marked as non-normative, examples, and notes. [RFC2119]
      
-  
      Examples in this specification are introduced with the words “for example”
-    or are set apart from the normative text with class="example",
-    like this: 
      
-  
      
-    
-   
      This is an example of an informative example.
      
-  
      
-  
      Informative notes begin with the word “Note” and are set apart from the
-    normative text with class="note", like this: 
      
-  
      Note, this is an informative note.
      
-  
      Advisements are normative sections styled to evoke special attention and are
-    set apart from other normative text with <strong class="advisement">, like
-    this:  UAs MUST provide an accessible alternative. 
      
-  
      
-   Tests
-   
      Tests relating to the content of this specification
-                     may be documented in “Tests” blocks like this one.
-                     Any such block is non-normative.
      
-   
        
-   
        
-  
        
-  
         Conformance classes
        
-  
        Conformance to this specification
-    is defined for three conformance classes: 
        
-  
        
-   
        style sheet 
-   
        A CSS
-            style sheet. 
-   
        renderer 
-   
        A UA that interprets the semantics of a style sheet and renders
-            documents that use them. 
-   
        authoring tool 
-   
        A UA that writes a style sheet. 
-  
        
-  
        A style sheet is conformant to this specification
-    if all of its statements that use syntax defined in this module are valid
-    according to the generic CSS grammar and the individual grammars of each
-    feature defined in this module. 
        
-  
        A renderer is conformant to this specification
-    if, in addition to interpreting the style sheet as defined by the
-    appropriate specifications, it supports all the features defined
-    by this specification by parsing them correctly
-    and rendering the document accordingly. However, the inability of a
-    UA to correctly render a document due to limitations of the device
-    does not make the UA non-conformant. (For example, a UA is not
-    required to render color on a monochrome monitor.) 
        
-  
        An authoring tool is conformant to this specification
-    if it writes style sheets that are syntactically correct according to the
-    generic CSS grammar and the individual grammars of each feature in
-    this module, and meet all other conformance requirements of style sheets
-    as described in this module. 
        
-  
         Partial implementations
        
-  
        So that authors can exploit the forward-compatible parsing rules to
-    assign fallback values, CSS renderers must treat as invalid (and ignore
-    as appropriate) any at-rules, properties, property values, keywords,
-    and other syntactic constructs for which they have no usable level of
-    support. In particular, user agents must not selectively
-    ignore unsupported component values and honor supported values in a single
-    multi-value property declaration: if any value is considered invalid
-    (as unsupported values must be), CSS requires that the entire declaration
-    be ignored.
        
-  
         Implementations of Unstable and Proprietary Features
        
-  
        To avoid clashes with future stable CSS features,
-        the CSSWG recommends following best practices for the implementation of unstable features and proprietary extensions to CSS. 
        
-  
         Non-experimental implementations
        
-  
        Once a specification reaches the Candidate Recommendation stage,
-    non-experimental implementations are possible, and implementors should
-    release an unprefixed implementation of any CR-level feature they
-    can demonstrate to be correctly implemented according to spec. 
        
-  
        To establish and maintain the interoperability of CSS across
-    implementations, the CSS Working Group requests that non-experimental
-    CSS renderers submit an implementation report (and, if necessary, the
-    testcases used for that implementation report) to the W3C before
-    releasing an unprefixed implementation of any CSS features. Testcases
-    submitted to W3C are subject to review and correction by the CSS
-    Working Group. 
        
-  
        Further information on submitting testcases and implementation reports
-    can be found from on the CSS Working Group’s website at http://www.w3.org/Style/CSS/Test/.
-    Questions should be directed to the public-css-testsuite@w3.org mailing list.
        
-  
-  
        Index
        
-  
        Terms defined by this specification
        
-  
-  
        Terms defined by reference
        
-  
          
-   
        • 
-    [CSS-CASCADE-5] defines the following terms:
-    
            
-     
          • computed value
-     
          • declared value
-     
          • initial value
-     
          • longhand
-     
          • reset-only sub-property
-     
          • shorthand
-     
          • shorthand property
-     
          • specified value
-     
          • sub-property
-     
          • used value
-    
          
-   
        • 
-    [CSS-CASCADE-6] defines the following terms:
-    
            
-     
          • cascade
-     
          • cascade origin
-    
          
-   
        • 
-    [CSS-DISPLAY-4] defines the following terms:
-    
            
-     
          • display
-     
          • none
-    
          
-   
        • 
-    [CSS-EASING-2] defines the following terms:
-    
            
-     
          • <easing-function>
-     
          • timing function
-    
          
-   
        • 
-    [CSS-LOGICAL-1] defines the following terms:
-    
            
-     
          • logical property group
-    
          
-   
        • 
-    [CSS-MASKING-1] defines the following terms:
-    
            
-     
          • add
-    
          
-   
        • 
-    [CSS-TRANSFORMS-2] defines the following terms:
-    
            
-     
          • scale
-    
          
-   
        • 
-    [CSS-VALUES-4] defines the following terms:
-    
            
-     
          • #
-     
          • <custom-ident>
-     
          • <dashed-ident>
-     
          • <length-percentage>
-     
          • <percentage>
-     
          • <time>
-     
          • ?
-     
          • coordinated value list
-     
          • coordinating list base property
-     
          • coordinating list property group
-     
          • CSS identifier
-     
          • {A,B}
-     
          • |
-     
          • ||
-    
          
-   
        • 
-    [CSS-WRITING-MODES-4] defines the following terms:
-    
            
-     
          • writing mode
-    
          
-   
        • 
-    [CSS2] defines the following terms:
-    
            
-     
          • declaration block
-    
          
-   
        • 
-    [CSS3-ANIMATIONS] defines the following terms:
-    
            
-     
          • <keyframe-block>
-     
          • <keyframe-selector>
-     
          • <keyframes-name>
-     
          • <single-animation-direction>
-     
          • <single-animation-fill-mode>
-     
          • <single-animation-iteration-count>
-     
          • <single-animation-play-state>
-     
          • @keyframes
-     
          • AnimationEvent
-     
          • animation
-     
          • animation-delay
-     
          • animation-direction
-     
          • animation-fill-mode
-     
          • animation-iteration-count
-     
          • animation-name
-     
          • animation-play-state
-     
          • animation-timing-function
-     
          • animationcancel
-     
          • animationend
-     
          • animationiteration
-     
          • animationstart
-     
          • cssRules
-     
          • elapsedTime
-     
          • none (for animation-fill-mode)
-     
          • none (for animation-name)
-     
          • paused
-     
          • running
-    
          
-   
        • 
-    [CSSOM-1] defines the following terms:
-    
            
-     
          • CSSOMString
-     
          • property name
-     
          • resolved value
-    
          
-   
        • 
-    [DOM] defines the following terms:
-    
            
-     
          • Event
-     
          • event target
-     
          • target
-     
          • tree order
-     
          • type
-    
          
-   
        • 
-    [SCROLL-ANIMATIONS] defines the following terms:
-    
            
-     
          • <timeline-range-name>
-     
          • animation-range
-     
          • animation-range-end
-     
          • animation-range-start
-     
          • named timeline range
-     
          • scroll progress timelines
-     
          • scroll()
-     
          • scroll-driven animations
-     
          • view progress timelines
-     
          • view()
-    
          
-   
        • 
-    [WEB-ANIMATIONS] defines the following terms:
-    
            
-     
          • Animation
-     
          • AnimationEffect
-     
          • DocumentTimeline
-     
          • KeyframeEffect
-     
          • active duration
-     
          • active phase
-     
          • active time
-     
          • after phase
-     
          • animation
-     
          • animation class
-     
          • animation effect
-     
          • animation frame
-     
          • animation playback events
-     
          • associated effect
-     
          • associated effect end
-     
          • before phase
-     
          • composite operation
-     
          • current iteration
-     
          • current time
-     
          • default document timeline
-     
          • effect
-     
          • fill mode
-     
          • getAnimations()
-     
          • getKeyframes()
-     
          • global animation list
-     
          • idle
-     
          • idle phase
-     
          • iteration count
-     
          • iteration duration
-     
          • iteration start
-     
          • keyframe
-     
          • pause an animation
-     
          • pause()
-     
          • paused
-     
          • pending pause task
-     
          • pending play task
-     
          • play an animation
-     
          • play state
-     
          • play()
-     
          • playState
-     
          • playback direction
-     
          • reverse()
-     
          • setKeyframes(keyframes)
-     
          • start delay
-     
          • target element
-     
          • timeline
-     
          • timing
-     
          • unresolved
-     
          • updateTiming()
-    
          
-   
        • 
-    [WEB-ANIMATIONS-2] defines the following terms:
-    
            
-     
          • active interval
-     
          • animation trigger
-     
          • animation trigger behavior
-     
          • default range
-     
          • exit range
-     
          • startTime
-    
          
-   
        • 
-    [WEBIDL] defines the following terms:
-    
            
-     
          • Exposed
-    
          
-  
        
-  
        References
        
-  
        Normative References
        
-  
        
-   
        [CSS-CASCADE-5]
-   
        Elika Etemad; Miriam Suzanne; Tab Atkins Jr.. CSS Cascading and Inheritance Level 5. URL: https://drafts.csswg.org/css-cascade-5/
-   
        [CSS-CASCADE-6]
-   
        Elika Etemad; Miriam Suzanne; Tab Atkins Jr.. CSS Cascading and Inheritance Level 6. URL: https://drafts.csswg.org/css-cascade-6/
-   
        [CSS-DISPLAY-4]
-   
        Elika Etemad; Tab Atkins Jr.. CSS Display Module Level 4. URL: https://drafts.csswg.org/css-display/
-   
        [CSS-EASING-2]
-   
        CSS Easing Functions Level 2. URL: https://drafts.csswg.org/css-easing/
-   
        [CSS-VALUES-4]
-   
        Tab Atkins Jr.; Elika Etemad. CSS Values and Units Module Level 4. URL: https://drafts.csswg.org/css-values-4/
-   
        [CSS2]
-   
        Bert Bos; et al. Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification. URL: https://drafts.csswg.org/css2/
-   
        [CSS3-ANIMATIONS]
-   
        David Baron; et al. CSS Animations Level 1. URL: https://drafts.csswg.org/css-animations/
-   
        [CSSOM-1]
-   
        Daniel Glazman; Emilio Cobos Álvarez. CSS Object Model (CSSOM). URL: https://drafts.csswg.org/cssom/
-   
        [DOM]
-   
        Anne van Kesteren. DOM Standard. Living Standard. URL: https://dom.spec.whatwg.org/
-   
        [RFC2119]
-   
        S. Bradner. Key words for use in RFCs to Indicate Requirement Levels. March 1997. Best Current Practice. URL: https://datatracker.ietf.org/doc/html/rfc2119
-   
        [SCROLL-ANIMATIONS]
-   
        Brian Birtles; et al. Scroll-driven Animations. URL: https://drafts.csswg.org/scroll-animations-1/
-   
        [WEB-ANIMATIONS]
-   
        Brian Birtles; et al. Web Animations. URL: https://drafts.csswg.org/web-animations-1/
-   
        [WEB-ANIMATIONS-2]
-   
        Brian Birtles; Robert Flack. Web Animations Level 2. URL: https://drafts.csswg.org/web-animations-2/
-   
        [WEBIDL]
-   
        Edgar Chen; Timothy Gu. Web IDL Standard. Living Standard. URL: https://webidl.spec.whatwg.org/
-  
        
-  
        Informative References
        
-  
        
-   
        [CSS-CASCADE-4]
-   
        Elika Etemad; Tab Atkins Jr.. CSS Cascading and Inheritance Level 4. URL: https://drafts.csswg.org/css-cascade-4/
-   
        [CSS-LOGICAL-1]
-   
        Rossen Atanassov; Elika Etemad. CSS Logical Properties and Values Level 1. URL: https://drafts.csswg.org/css-logical-1/
-   
        [CSS-MASKING-1]
-   
        Dirk Schulze; Brian Birtles; Tab Atkins Jr.. CSS Masking Module Level 1. URL: https://drafts.fxtf.org/css-masking-1/
-   
        [CSS-TRANSFORMS-2]
-   
        Tab Atkins Jr.; et al. CSS Transforms Module Level 2. URL: https://drafts.csswg.org/css-transforms-2/
-   
        [CSS-WRITING-MODES-4]
-   
        Elika Etemad; Koji Ishii. CSS Writing Modes Level 4. URL: https://drafts.csswg.org/css-writing-modes-4/
-   
        [CSS3-TRANSITIONS]
-   
        David Baron; et al. CSS Transitions. URL: https://drafts.csswg.org/css-transitions/
-  
        
-  
        Property Index
        
-  
        
-   
-    
-     
-      
-     
-      
-      
-      
-      
-      
-      
-      
-      
-      
-      
-      
-      
-      
-      
        Name
-      Value
-      Initial
-      Applies to
-      Inh.
-      %ages
-      Anim­ation type
-      Canonical order
-      Com­puted value
-    
        animation-composition
-      <single-animation-composition>#
-      replace
-      all elements
-      no
-      N/A
-      not animatable
-      per grammar
-      list, each item a keyword as specified
-     
        animation-duration
-      [ auto | <time [0s,∞]> ]#
-      auto
-      all elements
-      no
-      N/A
-      not animatable
-      per grammar
-      list, each item either a time or the keyword auto
-     
        animation-timeline
-      <single-animation-timeline>#
-      auto
-      all elements
-      no
-      N/A
-      not animatable
-      per grammar
-      list, each item either
-the keyword none,
-the keyword auto,
-a case-sensitive css identifier,
-a computed scroll() function,
-or
-a computed view() function
-     
        animation-trigger
-      auto | none | <single-animation-trigger>#
-      see individual properties
-      all elements
-      no
-      N/A
-      not animatable
-      per grammar
-      see individual properties
-     
        animation-trigger-behavior
-      <single-animation-trigger-behavior>#
-      once
-      all elements
-      no
-      N/A
-      not animatable
-      per grammar
-      list, each item a keyword as specified
-     
        animation-trigger-event
-      none | [ <single-trigger-event> ]#
-      none
-      all elements
-      no
-      N/A
-      not animatable
-      per grammar
-      as specified
-     
        animation-trigger-exit-range
-      [ <'animation-trigger-exit-range-start'> <'animation-trigger-exit-range-end'>? ]#
-      see individual properties
-      see individual properties
-      see individual properties
-      see individual properties
-      see individual properties
-      per grammar
-      see individual properties
-     
        animation-trigger-exit-range-end
-      [ auto | normal | <length-percentage> | <timeline-range-name> <length-percentage>? ]#
-      auto
-      all elements
-      no
-      relative to the specified named timeline range if one was specified, else to the entire timeline
-      not animatable
-      per grammar
-      list, each item either the keyword normal or a timeline range and progress percentage
-     
        animation-trigger-exit-range-start
-      [ auto | normal | <length-percentage> | <timeline-range-name> <length-percentage>? ]#
-      auto
-      all elements
-      no
-      relative to the specified named timeline range if one was specified, else to the entire timeline
-      not animatable
-      per grammar
-      list, each item either the keyword normal or a timeline range and progress percentage
-     
        animation-trigger-name
-      none | [ <trigger-name> ]#
-      none
-      all elements
-      no
-      N/A
-      not animatable
-      per grammar
-      as specified
-     
        animation-trigger-range
-      [ <'animation-trigger-range-start'> <'animation-trigger-range-end'>? ]#
-      see individual properties
-      see individual properties
-      see individual properties
-      see individual properties
-      see individual properties
-      per grammar
-      see individual properties
-     
        animation-trigger-range-end
-      [ normal | <length-percentage> | <timeline-range-name> <length-percentage>? ]#
-      normal
-      all elements
-      no
-      relative to the specified named timeline range if one was specified, else to the entire timeline
-      not animatable
-      per grammar
-      list, each item either the keyword normal or a timeline range and progress percentage
-     
        animation-trigger-range-start
-      [ normal | <length-percentage> | <timeline-range-name> <length-percentage>? ]#
-      normal
-      all elements
-      no
-      relative to the specified named timeline range if one was specified, else to the entire timeline
-      not animatable
-      per grammar
-      list, each item either the keyword normal or a timeline range and progress percentage
-     
        animation-trigger-timeline
-      <single-animation-timeline>#
-      auto
-      all elements
-      no
-      N/A
-      not animatable
-      per grammar
-      list, each item either
-the keyword none,
-the keyword auto,
-a case-sensitive css identifier,
-a computed scroll() function,
-or
-a computed view() function
-   
        
-  
        
-  
        IDL Index
        
-
        [Exposed=Window]
-interface CSSAnimation : Animation {
-  readonly attribute CSSOMString animationName;
-};
-
-
        
-  
        Issues Index
        
-  
        
-   
         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. ↵
        
-   
         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. ↵
        
-   
         Create pictures of these examples and verify they make sense. ↵
        
-   
         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. ↵
        
-   
         Should animation-trigger-behavior allow multiple values (currently it does)? ↵
        
-   
         Probably a trigger with timeline "none" is under-specified here. Need to clarify what it means. ↵
        
-  
        
-  
        
-   ✔MDN
-   
        
-    
        CSSAnimation/animationName
        
-    
        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?
-    
        
-   
        
-  
        
-  
        
-   ✔MDN
-   
        
-    
        CSSAnimation
        
-    
        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?
-    
        
-   
        
-  
        
-  
        
-   ✔MDN
-   
        
-    
        animation-composition
        
-    
        In all current engines.
        
-    
        
-     Firefox115+Safari16+Chrome112+
-     
        
-     Opera?Edge112+
-     
        
-     Edge (Legacy)?IENone
-     
        
-     Firefox for Android?iOS Safari?Chrome for Android?Android WebView?Samsung Internet?Opera Mobile?
-    
        
-   
        
-  
        
-  
        
-   ⚠MDN
-   
        
-    
        animation-duration#Values
        
-    
        In only one current engine.
        
-    
        
-     FirefoxNoneSafariNoneChrome115+
-     
        
-     Opera?Edge115+
-     
        
-     Edge (Legacy)?IENone
-     
        
-     Firefox for Android?iOS Safari?Chrome for Android?Android WebView?Samsung Internet?Opera Mobile?
-    
        
-   
        
-  
        
-  
        
-   MDN
-   
        
-    
        animation-timeline
        
-    
        
-     Firefox110+SafariNoneChrome115+
-     
        
-     Opera?Edge115+
-     
        
-     Edge (Legacy)?IENone
-     
        
-     Firefox for Android?iOS Safari?Chrome for Android?Android WebView?Samsung Internet?Opera Mobile?
-    
        
-   
        
-  
        
-
-
-
-
-
\ No newline at end of file
diff --git a/web-animations-2/Overview.html b/web-animations-2/Overview.html
deleted file mode 100644
index b3a46d71bf6..00000000000
--- a/web-animations-2/Overview.html
+++ /dev/null
@@ -1,6903 +0,0 @@
-
- 
-  
-  
-  Web Animations Level 2
-  
-  
-  
-  
-  
-  
-  
-  
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- 
-  
        
-   
         
        
-   
        Web Animations Level 2
        
-   
        Editor’s Draft, 
        
-   
        
-    More details about this document
-    
        
-     
        
-      
        This version:
-      
        https://drafts.csswg.org/web-animations-2/
-      
        Latest published version:
-      
        https://www.w3.org/TR/web-animations-2/
-      
        Version History:
-      
        https://github.com/w3c/csswg-drafts/commits/main/web-animations-2
-      
        Feedback:
-      
        CSSWG Issues Repository
-      
        Inline In Spec
-      
        Editors:
-      
         (Invited Expert)
-      
         (Google)
-      
        Former Editors:
-      
         (Google)
-      
         (Google)
-      
        Suggest an Edit for this Spec:
-      
        GitHub Editor
-      
        Participate:
-      
        Fix the text through GitHub
-      
        Join the ‘waapi’ channel on the Animation at Work slack
-      
        IRC: #webanimations on W3C’s IRC
-      
        Issue Tracking:
-      
        GitHub
-     
        
-    
        
-   
        
-   
        
-    
        
-     Not Ready For Implementation
-     
         This spec is not yet ready for implementation.
-		It exists in this repository to record the ideas and promote discussion. 
        
-     
         Before attempting to implement this spec,
-		please contact the CSSWG at www-style@w3.org. 
        
-    
        
-   
        
-   
        Copyright © 2025 World Wide Web Consortium. W3C® liability, trademark and permissive document license rules apply. 
        
-   
        
-  
        
-  
        
-   
        Abstract
        
-   
        This specification defines a model for synchronization and
-timing of changes to the presentation of a Web page.
-This specification also defines an application programming interface
-for interacting with this model and it is expected that further
-specifications will define declarative means for exposing these
-features.
        
-    CSS is a language for describing the rendering of structured documents
-(such as HTML and XML)
-on screen, on paper, etc. 
-  
        
-  
        Status of this document
        
-  
        
-   
         This is a public copy of the editors’ draft.
-	It is provided for discussion only and may change at any moment.
-	Its publication here does not imply endorsement of its contents by W3C.
-	Don’t cite this document other than as work in progress. 
        
-   
        Please send feedback
-	by filing issues in GitHub (preferred),
-	including the spec code “web-animations” in the title, like this:
-	“[web-animations] …summary of comment…”.
-	All issues and comments are archived.
-	Alternately, feedback can be sent to the (archived) public mailing list www-style@w3.org. 
        
-   
        This document is governed by the 03 November 2023 W3C Process Document. 
        
-  
        
-  
        
-  
-  
        
-   
        1. Delta specification
        
-   
        This is a delta specification, meaning that it currently contains
-only the differences from Web Animations Level 1 [WEB-ANIMATIONS-1].
-Once the Level 1 specification is closer to complete, it will be merged
-with the additions here into a complete level 2 specification.
        
-   
        2. Changes since level 1
        
-   
        This specification introduces the following changes compared to the
-previous level of this specification:
        
-   
-   
         This module also includes some exploratory proposals for § 4.5 Custom effects,
-however there are some concerns about the design of this feature
-and it may be replaced in a future revision.
-See discussion. 
        
-   
        3. Timing model
        
-   
        This section describes and defines the behavior of the Web Animations
-timing model.
        
-   
        3.1. Timing model overview
        
-   
        
-    
        This section is non-normative
        
-    
        3.1.1. Hierarchical
        
-    
        This level of the specification includes an updated timing hierarchy diagram.
        
-    
        
-      A hierarchy of timing nodes 
-     
         A hierarchy of timing nodes.
-    Each node in the tree derives its time from its parent node. 
        
-    
        
-    
        Along with the following updated description:
        
-    
        
-     
        A consequence of this hierarchical arrangement is that complex
-  animation arrangements can be reversed, scheduled, accelerated and so
-  on as a whole unit since the manipulations applied to the parent,
-  cascade down to its descendants.
-  Furthermore, since time has a common source, it is easy to synchronize
-  animations.
        
-    
        
-   
        
-   
        3.2. Timelines
        
-   
        Add:
        
-   
        
-    
        The duration of a timeline gives the
-maximum value a timeline may generate for its current time. This value is
-used to calculate the intrinsic iteration duration for the target effect
-of an animation that is associated with the timeline when the effect’s iteration duration is "auto". The value is computed such that the effect
-fills the available time. For a monotonic timeline, there is no upper bound
-on current time, and timeline duration is unresolved. For a non-monotonic
-(e.g. scroll) timeline, the duration has a fixed upper bound. In this
-case, the timeline is a progress-based
-timeline, and its timeline duration is 100%.
        
-   
        
-   
        3.3. Animation Frames
        
-   
        Update the note on the first step of the algorithm by adding the following bullet:
        
-   
        
-    
-   
        
-   
        3.4. Animations
        
-   
        Append:
        
-   
        
-    
        Animation effects associated with a progress-based timeline require their
-timing properties to be converted to proportions. The procedure for converting
-a  is as
-follows:
        
-    
          
-     
        1. 
-      
          If the iteration duration is auto, then perform the following steps.
          
-      
            
-       
          • 
-        
            Set start delay and end delay to 0, as it is not
-possible to mix time and proportions.
            
-        
            Note: Future versions may allow these properties to be assigned
-percentages, at which point the delays are only to be ignored if
-their values are expressed as times and not as percentages.
            
-      
          
-      
          Otherwise:
          
-      
            
-       
          1. 
-        
            Let total time be equal to end time
            
-       
          2. 
-        
            Set start delay to be the result of evaluating specified start delay / total time * timeline duration.
            
-       
          3. 
-        
            Set iteration duration to be the result of evaluating specified iteration duration / total time * timeline duration.
            
-       
          4. 
-        
            Set end delay to be the result of evaluating specified end delay / total time * timeline duration.
            
-      
          
-    
        
-    
        The procedure to normalize specified timing is as follows:
        
-    
        If timeline duration is resolved:
        
-    
-    Otherwise: 
-    
          
-     
        1. 
-      
          Set start delay = specified start delay
          
-     
        2. 
-      
          Set end delay = specified end delay
          
-     
        3. 
-      
          If iteration duration is auto:
          
-      
-       Otherwise: 
-      
-    
        
-   
        
-   
        3.4.1. Setting the timeline of an animation
        
-   
        The procedure to set the timeline of an animation, animation, to new timeline which may be null, is as
-follows:
        
-   
          
-    
        1. 
-     
          Let old timeline be the current timeline of animation, if any.
          
-    
        2. 
-     
          If new timeline is the same object as old timeline,
-abort this procedure.
          
-    
        3. 
-     
          Let previous play state be animation’s play state.
          
-    
        4. 
-     
          Let previous current time be the animation’s current time.
          
-    
        5. 
-     
          Set previous progress based in the first condition that applies:
          
-     
          
-      
          If previous current time is unresolved:
-      
          
-       
          Set previous progress to unresolved.
          
-      
          If end time is zero:
-      
          
-       
          Set previous progress to zero.
          
-      
          Otherwise
-      
          
-       
          Set previous progress = previous current time / end time
          
-     
          
-    
        6. 
-     
          Let from finite timeline be true if old timeline is not null and
-not monotonically increasing.
          
-    
        7. 
-     
          Let to finite timeline be true if timeline is not null and not monotonically increasing.
          
-    
        8. 
-     
          Let the timeline of animation be new timeline.
          
-    
        9. 
-     
          Perform the steps corresponding to the first matching
-condition from the following, if any:
          
-     
          
-      
          If to finite timeline,
-      
          
-       
            
-        
          1. 
-         
            Apply any pending playback rate on animation
            
-        
          2. 
-         
            set auto align start time to true.
            
-        
          3. 
-         
            Set start time to unresolved.
            
-        
          4. 
-         
            Set hold time to unresolved.
            
-        
          5. 
-         
            If previous play state is "finished" or "running"
            
-         
              
-          
            1. 
-           
              Schedule a pending play task
              
-         
            
-        
          6. 
-         
            If previous play state is "paused" and previous progress is resolved:
            
-         
              
-          
            1. 
-           
              Set hold time to previous progress * end time.
              
-         
            
-       
          
-       
           This step ensures that previous progress is preserved
-    even in the case of a pause-pending animation with a
-    resolved start time. 
          
-      
          If from finite timeline and previous progress is resolved,
-      
          
-       
          Run the procedure to set the current time to previous progress * end time.
          
-     
          
-    
        10. 
-     
          If the start time of animation is resolved, make animation’s hold time unresolved.
          
-     
           This step ensures that the finished play state of animation is not “sticky” but is re-evaluated
-based on its updated current time. 
          
-     
          
-    
        11. 
-     
          Run the procedure to update an animation’s finished state for animation with the did seek flag set to false, and
-the synchronously notify flag set to false.
          
-   
        
-    Issue: If new timeline is null, we should ensure that custom
-effects get called with an unresolved iteration progress (unless a subsequent change in the same script execution context makes this
-redundant). 
-   
        3.4.2. Setting the target effect of an
-  animation
        
-   
        After the step to reschedule a pending play task add the following step:
        
-   
        
-    
          
-     
        1. 
-      
          If new effect is not null and
-if new effect has a parent group, remove new effect from
-its parent group.
          
-    
        
-   
        
-   
-     After the step to assign new effect as animation’s associated effect include the following step: 
-    
        
-     
          
-      
        1. 
-       
          If old effect is not null, queue a task to call
-any custom effects associated with inclusive descendants of old effect with an unresolved iteration progress.
          
-       
          
-         This is not quite right. If old effect is attached to another
-  animation in the same task then we should probably not do an extra
-  callback with unresolved. 
-        
          The definition of when custom effects gets called needs to be
-  audited and probably rewritten.
          
-       
          
-     
        
-    
        
-           
-   
        3.4.3. Waiting for the associated effect
        
-   
        Replace:
        
-   
        
-    
        An animation is ready at the first moment
- where both of the following conditions are true:
        
-    
          
-     
        • 
-      
          the user agent has completed any setup required
- to begin the playback of the animation’s associated effect,
- including rendering the first frame of any keyframe effect.
          
-     
        • 
-      
          the animation is associated with a timeline that is not inactive.
          
-    
        
-   
        
-   
        With:
        
-   
        
-    
        An animation is ready at the first moment
- where all of the following conditions are true:
        
-    
-   
        
-   
        Note: an animation is not ready while it has no start time or hold time.
-For a scroll-driven animation, the start-time is determined when updating the timeline if auto align start time is true.
        
-   
        3.4.4. Validating a CSSNumberish time
        
-   
        The procedure to validate a CSSNumberish time for an input
-value of time is based on the first condition that matches:
        
-   
        
-    
        
-     
        If all of the following conditions are true:
        
-     
          
-      
        • 
-       
          The animation is associated with a progress-based timeline, and
          
-      
        • 
-       
          time is not a CSSNumeric value with percent units:
          
-     
        
-    
        
-     
        throw a TypeError.
        
-    
        
-     
        return false;
        
-    
        
-     
        If all of the following conditions are true:
        
-     
-    
        
-     
        throw a TypeError.
        
-    
        
-     
        return false.
        
-    
        Otherwise
-    
        
-     
        return true.
        
-   
        
-   
        3.4.5. Setting the current time of an
-Animation
        
-   
        The current time of an animation can be set to a new value to seek the animation.
-The procedure for setting the current time is defined in two parts.
        
-   
        The procedure to silently set the current time of
-an animation, animation, to seek time is as follows:
        
-   
          
-    
        1. 
-     
          If seek time is an unresolved time value,
-then perform the following steps.
          
-     
            
-      
          1. 
-       
            If the current time is resolved, then throw a TypeError.
            
-      
          2. 
-       
            Abort these steps.
            
-     
          
-    
        2. 
-     
          Let valid seek time be the result of running the validate a CSSNumberish time procedure with seek time as the input.
          
-    
        3. 
-     
          If valid seek time is false, abort this procedure.
          
-    
        4. 
-     
          Set auto align start time to false.
          
-    
        5. 
-     
          Update either animation’s hold time or start time as follows:
          
-     
          
-      
          
-       
          If any of the following conditions are true:
          
-       
-      
          
-       
            
-        
          1. 
-         
            Set animation’s hold time to seek time.
            
-       
          
-      
          Otherwise,
-      
          
-       
          Set animation’s start time to the result of
-evaluating timeline time - (seek time / playback rate) where timeline time is the current time value of timeline associated with animation.
          
-     
          
-    
        6. 
-     
          If animation has no associated timeline or the associated timeline is inactive,
-make animation’s start time unresolved.
          
-     
           This preserves the invariant that when we don’t have an active timeline it
-  is only possible to set either the start time or the animation’s current time. 
          
-    
        7. 
-     
          Make animation’s previous current time unresolved.
          
-   
        
-   
        The procedure to set the current time of an animation, animation, to seek time is as follows:
        
-   
          
-    
        1. 
-     
          Run the steps to silently set the current time of animation to seek time.
          
-    
        2. 
-     
          If animation has a pending pause task, synchronously
-complete the pause operation by performing the following steps:
          
-     
            
-      
          1. 
-       
            Set animation’s hold time to seek time.
            
-      
          2. 
-       
            Apply any pending playback rate to animation.
            
-      
          3. 
-       
            Make animation’s start time unresolved.
            
-      
          4. 
-       
            Cancel the pending pause task.
            
-      
          5. 
-       
            Resolve animation’s current ready promise with animation.
            
-     
          
-    
        3. 
-     
          Run the procedure to update an animation’s finished state for animation with the did seek flag set to true, and
-the synchronously notify flag set to false.
          
-   
        
-   
        3.4.6. Setting the start time of an
-Animation
        
-   
        The procedure to set the start time of animation, animation, to new start time,
-is as follows:
        
-   
          
-    
        1. 
-     
          Let valid start time be the result of running the validate a CSSNumberish time procedure with new start time as the input.
          
-    
        2. 
-     
          If valid start time is false, abort this procedure.
          
-    
        3. 
-     
          Set auto align start time to false.
          
-    
        4. 
-     
          Let timeline time be the current time value of the timeline that animation is associated with.
-If there is no timeline associated with animation or the
-associated timeline is inactive,
-let the timeline time be unresolved.
          
-    
        5. 
-     
          If timeline time is unresolved and new start
-time is resolved, make animation’s hold time unresolved.
          
-     
           This preserves the invariant that when we don’t have an active timeline it
-  is only possible to set either the start time or the animation’s current time. 
          
-    
        6. 
-     
          Let previous current time be animation’s current time.
          
-     
          Note: This is the current time after applying the changes from
-the previous step which may cause the current time to become unresolved.
          
-    
        7. 
-     
          Apply any pending playback rate on animation.
          
-    
        8. 
-     
          Set animation’s start time to new start time.
          
-    
        9. 
-     
          Update animation’s hold time based
-on the first matching condition from the following,
          
-     
          
-      
          If new start time is resolved,
-      
          
-       
          If animation’s playback rate is not zero,
-make animation’s hold time unresolved.
          
-      
          Otherwise (new start time is unresolved),
-      
          
-       
            
-        
          1. 
-         
            Set animation’s hold time to previous current time even if previous current time is unresolved.
            
-       
          
-     
          
-    
        10. 
-     
          If animation has a pending play task or
-a pending pause task, cancel that task and resolve animation’s current ready promise with animation.
          
-    
        11. 
-     
          Run the procedure to update an animation’s finished state for animation with the did seek flag set to true, and
-the synchronously notify flag set to false.
          
-   
        
-   
        3.4.7. Playing an animation
        
-   
        The procedure to play an animation, animation, given
-a flag auto-rewind, is as follows:
        
-   
        Note: The auto-rewind flag is provided for other specifications
-that build on this model but do not require the rewinding behavior, such
-as CSS Animations [CSS-ANIMATIONS-1].
        
-   
          
-    
        1. 
-     
          Let aborted pause be a boolean flag that is true if animation has a pending pause task, and false otherwise.
          
-    
        2. 
-     
          Let has pending ready promise be a boolean flag that is
-initially false.
          
-    
        3. 
-     
          Let has finite timeline be true if animation has an associated timeline that is not monotonically increasing.
          
-    
        4. 
-     
          Let previous current time be the animation’s current time
          
-    
        5. 
-     
          Let enable seek be true if the auto-rewind flag is
-true and has finite timeline is false.
-Otherwise, initialize to false.
          
-    
        6. 
-     
          Perform the steps corresponding to the first matching
-condition from the following, if any:
          
-     
          
-      
          
-       
          If animation’s effective playback rate > 0, enable seek is true and either animation’s:
          
-       
-      
          
-       
          Set the animation’s hold time to zero.
          
-      
          
-       
          If animation’s effective playback rate < 0, enable seek is true and either animation’s:
          
-       
-      
          
-       
          
-        
          If associated effect end is positive infinity,
-        
          
-         
          throw an "InvalidStateError" DOMException and
-abort these steps.
          
-        
          Otherwise,
-        
          
-         
          Set the animation’s hold time to the animation’s associated effect end.
          
-       
          
-      
          If animation’s effective playback rate = 0 and animation’s current time is unresolved,
-      
          
-       
          Set the animation’s hold time to zero.
          
-     
          
-    
        7. 
-     
          If has finite timeline and previous current time is unresolved:
          
-     
            
-      
          • 
-       
            Set the flag auto align start time to true.
            
-     
          
-     
          Note: If play is called for a CSS animation during style update,
-the animation’s start time cannot be reliably calculated until post layout since the start time is to align with the start or end of the animation range (depending on the playback rate).
-In this case, the animation is said to have an auto-aligned start
-time,
-whereby the start time is automatically adjusted as needed to align the animation’s progress to the animation range.
          
-    
        8. 
-     
          If animation’s hold time is resolved,
-let its start time be unresolved.
          
-    
        9. 
-     
          If animation has a pending play task or a pending pause task,
          
-     
            
-      
          1. 
-       
            Cancel that task.
            
-      
          2. 
-       
            Set has pending ready promise to true.
            
-     
          
-    
        10. 
-     
          If the following three conditions are all satisfied:
          
-     
-     
          abort this procedure.
          
-    
        11. 
-     
          If has pending ready promise is false,
-let animation’s current ready promise be a new promise in the relevant Realm of animation.
          
-    
        12. 
-     
          Schedule a task to run as soon as animation is ready.
-The task shall perform the following steps:
          
-     
            
-      
          1. 
-       
            Assert that at least one of animation’s start time or hold time is resolved.
            
-      
          2. 
-       
            Let ready time be the time value of
-the timeline associated with animation at the moment
-when animation became ready.
            
-      
          3. 
-       
            Perform the steps corresponding to the first matching condition below,
-if any:
            
-       
            
-        
            If animation’s hold time is resolved,
-        
            
-         
              
-          
            1. 
-           
              Apply any pending playback rate on animation.
              
-          
            2. 
-           
              Let new start time be the result of evaluating ready time - hold time / playback rate for animation.
-If the playback rate is zero, let new start time be simply ready time.
              
-          
            3. 
-           
              Set the start time of animation to new start time.
              
-          
            4. 
-           
              If animation’s playback rate is not 0, make animation’s hold time unresolved.
              
-         
            
-        
            If animation’s start time is resolved and animation has a pending playback rate,
-        
            
-         
              
-          
            1. 
-           
              Let current time to match be the result of evaluating (ready time - start time) × playback rate for animation.
              
-          
            2. 
-           
              Apply any pending playback rate on animation.
              
-          
            3. 
-           
              If animation’s playback rate is zero, let animation’s hold time be current time to match.
              
-          
            4. 
-           
              Let new start time be the result of evaluating ready time - current time to match / playback rate for animation.
-If the playback rate is zero, let new start time be simply ready time.
              
-          
            5. 
-           
              Set the start time of animation to new start time.
              
-         
            
-       
            
-      
          4. 
-       
            Resolve animation’s current
-ready promise with animation.
            
-      
          5. 
-       
            Run the procedure to update an animation’s finished state for animation with the did seek flag set to false,
-and the synchronously notify flag set to false.
            
-       
             Note that the order of the above two steps is important
-    since it means that an animation with zero-length associated
-    effect will resolve its current ready promise before its current finished promise. 
            
-     
          
-     
          So long as the above task is scheduled but has yet to run, animation is described as having a pending play task.
-While the task is running, however, animation does not have
-a pending play task.
          
-     
          If a user agent determines that animation is immediately ready, it
-may schedule the above task as a microtask such that it runs at the next microtask checkpoint, but it must not perform the task synchronously.
          
-     
          
-      
          The above requirement to run the pending play task asynchronously
-ensures that code such as the following behaves consistently between
-implementations:
          
-      
          
-       
-
          animation.play();
-animation.ready.then(
-  () => { console.log('Playback commenced'); },
-  () => { console.log('Playback was canceled'); }
-);
-// Suppose some condition requires playback to be canceled...
-animation.cancel();
-// "Playback was canceled" will be printed to the console.
-
          
-      
          
-      
          In the above code, were the pending play task run synchronously, the current ready promise would not be rejected.
          
-     
          
-    
        13. 
-     
          Run the procedure to update an animation’s finished state for animation with the did seek flag set to false, and
-the synchronously notify flag set to false.
          
-   
        
-   
         The procedure to play an animation needs to include scheduling a task for
-updating custom effects.
        
-   
        3.4.7.1. Auto-aligning the start time
        
-   
        When attached to a non-monotonic timeline, the start time of the animation may be layout dependent.
-In this case, we defer calculation of the start time until the timeline has been updated post
-layout.
-When updating timeline current time, the start time of any attached animation is conditionally updated.
-The procedure for calculating an auto-aligned start time is as follows:
        
-   
          
-    
        1. 
-     
          If the auto-align start time flag is false, abort this procedure.
          
-    
        2. 
-     
          If the timeline is inactive, abort this procedure.
          
-    
        3. 
-     
          If play state is idle, abort this procedure.
          
-    
        4. 
-     
          If play state is paused, and hold time is resolved,
-abort this procedure.
          
-    
        5. 
-     
          Let start offset be the resolved timeline time corresponding to the start of the animation attachment range.
-In the case of view timelines, it requires a calculation based on the proportion of the cover range.
          
-    
        6. 
-     
          Let end offset be the resolved timeline time corresponding to the end of the animation attachment range.
-In the case of view timelines, it requires a calculation based on the proportion of the cover range.
          
-    
        7. 
-     
          Set start time to start offset if effective playback rate ≥ 0,
-and end offset otherwise.
          
-    
        8. 
-     
          Clear hold time.
          
-   
        
-   
        3.4.8. Pausing an animation
        
-   
        The procedure to pause an animation needs to refer not only to the associated effect but also any descendants of the associated effect.
        
-   Likewise, the procedure to pause an animation needs to include scheduling
-a task for updating custom effects.
-   
        Update the constraints for setting the seek time to only apply when using a
-monotonic timeline. A scroll-driven animation needs to defer setting the
-hold time until the animation range has been computed.
        
-   
        Replace:
        
-   
        
-    
          
-     
        1. 
-      
          Let seek time be
-   a time value that is initially unresolved.
          
-     
        2. 
-      
          Let has finite timeline be true
-   if animation has an associated timeline that is not monotonically increasing.
          
-     
        3. 
-      
          If the animation’s current time is unresolved,
-   perform the steps according to the first matching condition below:
          
-      
          
-       
          If animation’s playback rate is ≥ 0,
-       
          
-        
          Set seek time to zero.
          
-       
          Otherwise,
-       
          
-        
          
-         
          If associated effect end for animation is positive infinity,
-         
          
-          
          throw an "InvalidStateError" DOMException and abort these steps.
          
-         
          Otherwise,
-         
          
-          
          Set seek time to animation’s associated effect end.
          
-        
          
-      
          
-     
        4. 
-      
          If seek time is resolved,
          
-      
          
-       
          
-        
          If has finite timeline is true,
-        
          
-         
          Set animation’s start time to seek time.
          
-        
          Otherwise,
-        
          
-         
          Set animation’s hold time to seek time.
          
-       
          
-      
          
-    
        
-   
        
-   
        with:
        
-   
        
-    
          
-     
        1. 
-      
          Let has finite timeline be true
-   if animation has an associated timeline that is not monotonically increasing.
          
-     
        2. 
-      
          If the animation’s current time is unresolved and has finite timeline is false,
-   perform the steps according to the first matching condition below:
          
-      
          
-       
          If animation’s playback rate is ≥ 0,
-       
          
-        
          Set hold time to zero.
          
-       
          Otherwise,
-       
          
-        
          
-         
          If associated effect end for animation is positive infinity,
-         
          
-          
          throw an "InvalidStateError" DOMException and abort these steps.
          
-         
          Otherwise,
-         
          
-          
          Set hold time to animation’s associated effect end.
          
-        
          
-      
          
-     
        3. 
-      
          If has finite timeline is true,
-   and the animation’s current time is unresolved
          
-      
            
-       
          • 
-        
            Set the auto align start time flag to true.
            
-      
          
-    
        
-   
        
-   
        Replace:
        
-   
        
-    
        Schedule a task to be executed at the first possible moment where both of the following conditions are true:
        
-    
          
-     
        • 
-      
          the user agent has performed any processing necessary to suspend the playback of animation’s associated effect, if any.
          
-     
        • 
-      
          the animation is associated with a timeline that is not inactive.
          
-    
        
-   
        
-   
        With:
        
-   
        
-    
        Schedule a task to be executed at the first possible moment where all of the following conditions are true:
        
-    
          
-     
        • 
-      
          the user agent has performed any processing necessary to suspend the playback of animation’s associated effect, if any.
          
-     
        • 
-      
          the animation is associated with a timeline that is not inactive.
          
-     
        • 
-      
          the animation has a resolved hold time or start time.
          
-    
        
-   
        
-   
        Note: A start time is still required for a pause-pending animation if the auto-align start time flag is true to properly align to the animation range.
-The start time is set following the procedure for calculating an auto-aligned start time.
        
-   
        3.4.9. Canceling an animation
        
-   
-     Append the final step: 
-    
        
-     
          
-      
        1. 
-       
          Queue a task to call any custom effects associated with inclusive descendants of animation’s associated effect with an unresolved iteration progress.
          
-       
           The procedures for calling custom effects need to be reworked.
-       Currently they probably involve calling too often for changes that
-       could be coalesced.
          
-     
        
-    
        
-           
-   
        3.4.10. Speed control
        
-   
        
-    
        Add the following sentence:
        
-    
        
-     
        Note that animation effects also have a playback rate associated
-  with them that behaves differently to that defined here.
        
-    
        
-   
        
-   
        3.4.11. Calculating the overall progress of an animation
        
-   
        An animation’s overallProgress is the ratio of its current time to its associated effect end.
        
-   
        
-     The overallProgress of an animation, animation, is calculated as follows: 
-    
        
-     
        
-      
        If any of the following are true:
        
-      
-     
        
-      
        animation’s overallProgress is null.
        
-     
        If animation’s associated effect end is zero,
-     
        
-      
        
-       
        If animation’s current time is negative,
-       
        
-        
        animation’s overallProgress is zero.
        
-       
        Otherwise,
-       
        
-        
        animation’s overallProgress is one.
        
-      
        
-     
        If animation’s associated effect end is infinite,
-     
        
-      
        animation’s overallProgress is zero.
        
-     
        Otherwise,
-     
        
-      
         overallProgress = min(max(current time / animation’s associated effect end, 0), 1)  
        
-    
        
-   
        
-   
        3.5. Animation effects
        
-   
        Adds the following text:
        
-   
        
-    
        The associated effect of an animation is said to be directly associated with that animation.
        
-    
        Animation effects can be combined together into a hierarchy using group effects (see § 3.10 Grouping and synchronization).
-    Only the root animation effect of such a hierarchy can be directly associated with an animation.
-    If an animation effect that has a parent group is designated as the associated effect of an animation, the animation effect is removed from its parent group before
-    being associated with the animation.
        
-    
        An animation effect is associated with an animation if
-    it is directly associated with an animation or if it has an ancestor group effect that is directly associated with an
-    animation.
        
-   
        
-   
        3.5.1. Types of animation effects
        
-   
        This specification defines two types of animation effects:
        
-   
-   
        3.5.2. The active interval
        
-   
        In this level of the specification the lower bound of the active interval is
-defined as:
        
-   
        
-    
        The lower bound of the active interval is determined by the start time of the animation effect but may be shifted by a start delay on
-    the animation effect.
        
-   
        
-   
        The subsequent diagram should also refer to the animation effect start
-time as opposed to the animation start time.
        
-   
        Finally, the description of the end delay is updated to:
        
-   
        
-    
        An end delay may also be specified but is primarily only of
-    use when sequencing animations such as by using a sequence effect.
        
-   
        
-   
        The normative description is updated as follows:
        
-   
        
-    
        The lower bound of the active interval is defined by the
-    combination of the animation effect’s start time and start delay.
        
-    
        An animation effect’s start time is the moment at
-    which the parent group,
-    if any, has scheduled the animation effect to begin.
-    It is expressed in inherited time.
        
-    
        In most cases, including the case when the animation effect has
-    no parent group,
-    the start time is zero.
-    The singular exception is sequence effects which set
-    the start times of their
-    children as described in § 3.10.4.1 The start time of
-  children of a sequence effect.
        
-    
        In addition to the start
-    time, an animation effect also has a start delay which is an offset from the start
-    time.
        
-    
        Unlike the start time which
-    is determined by the parent group, the start
-    delay is a property of the animation effect itself.
        
-    
        The lower bound of the active interval of an animation effect,
-    expressed in inherited time space,
-    is the sum of the start time and the start delay.
        
-    
        These definitions are incorporated in the calculation of the local
-    time (see § 3.5.3 Local time and inherited time) and active time.
        
-   
        
-   
        And finally regarding the definition of the end time:
        
-   
        
-    
        The end time of an animation effect is the result of
-    evaluating max(start
-    time + start delay + active duration + end delay,
-    0).
        
-   
        
-   
        3.5.3. Local time and inherited time
        
-   
        This section is added.
        
-   
        
-    
        In Web Animations all times are relative to some point of reference.
-These different points of reference produce different time
-spaces.
        
-    
        This can be compared to coordinate spaces as used in computer
-graphics.
-The zero time of a time space is analogous to the origin of
-a coordinate space.
        
-    
        Just as with coordinate spaces, time spaces can also be nested. Group effects typically perform some
-transformations on the time values they
-receive from their parent or animation before passing on the transformed time values to their children.
-Child animation effects then operate within that
-transformed time space.
        
-    
        Children take the transformed time values from their
-parent—called the inherited time—and add their start time to establish
-their own local time space as illustrated
-below.
        
-    
        
-      Inherited time and local time. 
-     
         Inherited time and local time.
         At time t, the inherited time is 2.5.
         For animation effect (a) which has a start time of 1, the local time is 1.5.
         For animation effect (b) which has a start time of 1
-      and a start delay of 1,
-      the local time is also 1.5
-      since local time is based on an animation effect’s start time only,
-      and not on its start delay. 
        
-    
        
-   
        
-   
        For an animation effect, the inherited time at
-a given moment is based on the first matching condition from the
-following:
        
-   
        
-    
        If the animation effect has a parent group,
-    
        
-     
        the inherited time is the parent group’s current transformed time.
        
-    
        If the animation effect is directly associated with
-an animation,
-    
        
-     
        the inherited time is the current time of the animation.
        
-    
        Otherwise,
-    
        
-     
        the inherited time is unresolved.
        
-   
        
-   
        The local time of an animation effect is the animation effect’s inherited time minus its start time.
-If the inherited time is unresolved then the local time
-is also unresolved.
        
-   
        3.5.4. Animation effect phases and
-states
        
-   
        
-    This section is non-normative 
-    
        The non-normative description of the in play state includes the following
-description;
        
-    
        
-     
        This occurs when the animation effect and all its
-    ancestors are in the active phase. Animation effects only “move” when
-    they are in play.
        
-     
        It is possible for an animation effect to be in the active phase but not in play.
-    For example, if an animation effect has a parent
-    group that causes the animation effect’s active
-    interval to be clipped and both parent and child apply the
-    same fill mode, the child animation effect may be
-    effectively be snapshotted within the active phase despite no longer being in play.
        
-    
        
-    
        Likewise for current
        
-    
        
-     
        This will be the case if the animation effect is in
-    play or in its before phase, or it has an
-    ancestor for which this is true thereby opening up the
-    possibility that this animation effect might play again
-    (e.g. due to repeating).
        
-    
        
-   
        
-   
        The normative definition of in play includes the following condition:
        
-   
        
-    
          
-     
        1. 
-      
          the animation effect has a parent group that
-is in play or else the animation effect is directly associated with an animation that is not finished.
          
-    
        
-   
        
-   
        In place of:
        
-   
        
-    
          
-     
        1. 
-      
          the animation effect is associated with an animation that is
-not finished.
          
-    
        
-   
        
-   
        The normative definition of current adds the following
-condition:
        
-   
        
-    
-   
        
-   
        Add the following definitions to the list used in determining the phase of
-an animation effect.
        
-   
        
-    
        at progress timeline boundary
-    
        
-     
        Determined using the following procedure:
        
-     
          
-      
        1. 
-       
          If any of the following conditions are true:
          
-       
-       
          return false
          
-      
        2. 
-       
          Let effective start time be the animation’s start time if resolved, or zero otherwise.
          
-      
        3. 
-       
          Set unlimited current time based on the first matching
-condition:
          
-       
          
-        
          start time is resolved:
-        
          
-         
          (timeline time - start time)
-× playback rate
          
-        
          Otherwise
-        
          
-         
          animation’s current time
          
-       
          
-      
        4. 
-       
          Let effective timeline time be unlimited current time / animation’s playback rate + effective start time
          
-      
        5. 
-       
          Let effective timeline progress be effective timeline time / timeline duration
          
-      
        6. 
-       
          If effective timeline progress is 0 or 1, return true,
-otherwise false.
          
-     
        
-   
        
-   
         This procedure is not strictly correct for a paused
-animation if the animation’s current time is explicitly set, as this can
-introduce a lead or lag, between the timeline’s current time and animation’s current time.
        
-   
         This procedure can likely be simplified, and instead determine if at a
-scrolling boundary regardless of playback rate or start time. The surprising
-behavior that this is trying to prevent is an animation becoming inactive
-precisely at the scroll limit, alleviating the need for set a fill-mode with
-a ScrollTimeline. Checking if timeline current time is
-0 or timeline duration may be sufficient.
        
-   
        Replace:
        
-   
        
-    
        An animation effect is in the before phase if the animation effect’s local time is not unresolved and either of the
-following conditions are met:
        
-    
          
-     
        1. 
-      
          the local time is less than the before-active boundary time, or
          
-     
        2. 
-      
          the animation direction is "backwards" and the local
-time is equal to the before-active boundary time.
          
-    
        
-   
        
-   
        with:
        
-   
        
-    
        An animation effect is in the before phase if the animation effect’s local time is not unresolved and either of the
-following conditions are met:
        
-    
          
-     
        1. 
-      
          the local time is less than the before-active boundary time, or
          
-     
        2. 
-      
          the animation direction is "backwards" and the local
-time is equal to the before-active boundary time and not at progress timeline boundary.
          
-    
        
-   
        
-   
        Replace:
        
-   
        
-    
        An animation effect is in the after phase if the animation
-effect’s local time is not unresolved and either of the
-following conditions are met:
        
-    
          
-     
        1. 
-      
          the local time is greater than the active-after boundary
-time, or
          
-     
        2. 
-      
          the animation direction is "forwards" and the local
-time is equal to the active-after boundary time.
          
-    
        
-   
        
-   
        with:
        
-   
        
-    
        An animation effect is in the after phase if the animation
-effect’s local time is not unresolved and either of the
-following conditions are met:
        
-    
          
-     
        1. 
-      
          the local time is greater than the active-after boundary
-time, or
          
-     
        2. 
-      
          the animation direction is "forwards" and the local
-time is equal to the active-after boundary time and not at progress timeline boundary.
          
-    
        
-   
        
-   
        3.5.5. Fill modes
        
-   
        
-    This section is non-normative 
-    
        The description of the forwards fill mode is updated from:
        
-    
        
-     
        When the animation effect is in the after phase,
-    …
        
-    
        
-    
        to:
        
-    
        
-     
        When the animation effect is in the after phase,
-    or when the animation effect is in the active phase but an ancestor is in its after phase,
-    …
        
-    
        
-    
        The description of the backwards fill mode is updated from:
        
-    
        
-     
        When the animation effect is in the before phase,
-    …
        
-    
        
-    
        to:
        
-    
        
-     
        When the animation effect is in the before phase,
-    or when the animation effect is in the active phase but an ancestor is in its before phase,
-    …
        
-    
        
-    
        The description of the both fill mode is updated from:
        
-    
        
-     
        When the animation effect …
        
-    
        
-    
        to:
        
-    
        
-     
        When the animation effect or an ancestor …
        
-    
        
-    
        (twice).
        
-    
        
-      Currently timing functions that generate results outside the
-range [0, 1] will behave unexpectedly when applied to group
-effects, as children will increase iterations or enter into fill mode
-rather than continuing to extrapolate along their defined behavior
-(which is what they would do if the timing function applied to them
-directly). 
-     
        To fix this it is possible we will wish to introduce ‘overflow’
-fill modes that respond to time values larger than or smaller than the
-active time range by extrapolating rather than filling.
        
-     
        See section
-15 (Overflowing fill) of minuted discussion from Tokyo 2013 F2F.
        
-    
        
-   
        
-   
        3.6. Repeating
        
-   
        3.6.1. Iteration intervals
        
-   
        After:
        
-   
        
-    
        The length of a single iteration is called the iteration duration.
        
-   
        
-   
        Add:
        
-   
        
-    
        The initial iteration duration of an animation effect is simply its intrinsic iteration duration.
-    The intrinsic iteration duration is calculated from the first
-    matching condition from below:
        
-    
        
-     
        If the animation effect is a group effect,
-     
        
-      
        Follow the procedure in § 3.10.3 The intrinsic
-  iteration duration of a group effect
        
-     
        If the animation effect is a sequence effect,
-     
        
-      
        Follow the procedure in § 3.10.4.2 The intrinsic
-  iteration duration of a sequence effect
        
-     
        If timeline duration is unresolved or iteration count is zero,
-     
        
-      
        Return 0
        
-     
        Otherwise
-     
        
-      
        Return (100% - start delay - end delay) / iteration count
        
-      
        Note: Presently start and end delays are zero until such time as percentage
-based delays are supported.
        
-    
        
-    
        The iteration duration of an animation effect may be set
-    by the author to represent a value other than the intrinsic
-    iteration duration.
        
-   
        
-   
        3.6.2. Iteration time space
        
-   
        
-    This section is non-normative 
-    
        The first few paragraphs of this section are replaced with:
        
-    
        
-     
        We have already encountered different time spaces in describing local time and inherited time (see § 3.5.3 Local time and inherited time).
-    Repetition introduces yet another time space: the iteration time
-    space.
        
-    
        
-   
        
-   
        3.6.3. Interval timing
        
-   
        
-    This section is non-normative 
-    
        The description is updated as follows:
        
-    
        
-     
        In the examples below, for the repeated effect, at local time 1s,
-    the iteration time is 0.
-    For the sequenced effects, at inherited time 1s, only effect B will be in play; there is no overlap.
        
-    
        
-    
        And likewise the figure is updated as follows:
        
-    
        
-      Illustration of end-point exclusive timing. 
-     
         Illustration of end-point exclusive timing. For both repeated and
-    sequenced animation effects there is no overlap at the boundaries
-    between intervals. 
        
-    
        
-   
        
-   
        3.7. Animation effect speed control
        
-   
        (This section is added.)
        
-   
        Like animations, animation effects also have a playback rate parameter.
-The playback rate of
-an animation effect is a finite real number that acts as
-a multiplier when calculating the animation effect’s transformed
-time from its local time.
        
-   
        The effect of setting the playback rate of an animation effect differs from the
-setting the playback rate on an animation.
-Its behavior is defined in the timing calculations given in § 3.8 Core animation effect
-calculations.
        
-   
        
-    This section is non-normative 
-    
        In summary, the behavior of the playback rate of an animation effect is as follows:
        
-    
-   
        
-   
        3.8. Core animation effect
-calculations
        
-   
        3.8.1. Overview
        
-   
        
-    This section is non-normative 
-    
        Update description from:
        
-    
        
-     
        At the core of the Web Animations timing model is the process that
-    takes a local time value and converts it to an iteration
-    progress.
        
-    
        
-    
        to:
        
-    
        
-     
        At the core of the Web Animations timing model is the process that
-    takes an inherited time value
-    and converts it to an iteration progress.
        
-    
        
-    
        Update diagram to show animation effect playback rate:
        
-    
        
-      Calculation of the active duration. 
-     
         Calculation of the active duration is based on
-    multiplying the iteration duration by the iteration count and then dividing by the playback rate. 
        
-    
        
-    
        Update:
        
-    
        
-     
        Having established the active duration, the process for
-    transforming an animation effect’s local time into its transformed progress (iteration progress) is illustrated
-    below.
        
-    
        
-    
        to:
        
-    
        
-     
        Having established the active duration, the process for
-    transforming an animation effect’s inherited time into its transformed progress (iteration progress) is illustrated
-    below.
        
-    
        
-    
        Update the time calculations diagram as follows:
        
-    
        
-      An overview of timing model calculations. 
-     
         An overview of timing model calculations.
         (1) The inherited time is converted into a local time by
-    incorporating the start time.
         (2) The local time is converted into an active time by
-    incorporating the start
-    delay.
         (3) The active time is divided by the iteration duration incorporating also the iteration start property and the playback rate property
-    to produce the overall progress.
         (4) The overall progress time is then converted to an offset
-    within a single iteration: the simple iteration progress.
         (5) The simple iteration progress is converted into a directed
-    progress by incorporating the playback direction.
         (6) Finally, a timing function is applied to the directed
-    progress to produce the transformed progress. 
        
-    
        
-    
        Update:
        
-    
        
-     
        The first step, calculating the local time is described in
-    Local time.
        
-    
        
-    
        to:
        
-    
        
-     
        The first step, calculating the local time is described in § 3.5.3 Local time and inherited time.
        
-    
        
-   
        
-   
        3.8.2. Calculating the active duration
        
-   
        Updated to:
        
-   
        
-    
        In order to calculate the active duration we first define the repeated duration as follows:
        
-    
        
-      repeated duration = iteration duration × iteration count 
-     
         If either the iteration duration or iteration count are zero, the repeated duration is zero. 
        
-     
         This clarification is needed since the result of infinity
-          multiplied by zero is undefined according to IEEE 754-2008. 
        
-    
        
-    
        The active duration is calculated according to the following
-    steps:
        
-    
          
-     
        1. 
-      
          If the playback rate is
-  zero, return Infinity.
          
-     
        2. 
-      
          Otherwise, return repeated duration /
-  abs(playback rate).
          
-    
        
-   
        
-   
        3.8.3. Transforming the local time
        
-   
        3.8.3.1. Calculating the active time
        
-   
        Update the qualification on the definition of the active time to include
-reference to the parent group:
        
-   
        
-    
        However, it is only defined when the animation effect should
-    produce an output and hence depends on its fill mode and
-    phase as well as the phase of its parent group, if any,
-    as follows,
        
-   
        
-   
        Update the definition to include the additional steps to for each phase:
        
-   
        
-    
        
-     
        If the animation effect is in the before phase,
-     
        
-      
        The result depends on the first matching condition from the
-following,
        
-      
        
-       
        If the animation effect has a parent group and that parent group is in the after
-phase,
-       
        
-        
        Return an unresolved time value.
        
-      
        
-      
        …
        
-     
        If the animation effect is in the active phase,
-     
        
-      
        The result depends on the first matching condition from the
-following,
        
-      
        
-       
        If the animation effect has a parent group and that parent group is in the before
-phase, and the fill mode of this animation effect
-is none or forwards,
-       
        
-        
        Return an unresolved time value.
        
-       
        If the animation effect has a parent group and that parent group is in the after
-phase, and the fill mode of this animation effect
-is none or backwards,
-       
        
-        
        Return an unresolved time value.
        
-       
        Otherwise,
-       
        
-        
        Return the result of evaluating local time - start delay.
        
-      
        
-     
        If the animation effect is in the after phase,
-     
        
-      
        The result depends on the first matching condition from the
-following,
        
-      
        
-       
        If the animation effect has a parent group and that parent group is in the before
-phase,
-       
        
-        
        Return an unresolved time value.
        
-      
        
-      
        …
        
-     
        Otherwise (the local time is unresolved),
-     
        
-      
        Return an unresolved time value.
        
-    
        
-   
        
-   
        3.8.3.2. Calculating the overall progress
        
-   
        In the definition of the overall progress update the “Otherwise”
-branch of the definition of the initial progress as:
        
-   
        
-    
        
-     
        Otherwise,
-     
        
-      
        Calculate the overall progress following the first
-matching condition from below:
        
-      
        
-       
        If the playback rate is less than zero,
-       
        
-        
        Let overall progress be (active time - active duration)
-× playback rate / iteration duration.
        
-       
        If the playback rate is zero,
-       
        
-        
        Let overall progress be zero.
        
-       
        Otherwise,
-       
        
-        
        Let overall progress be (active time × playback rate) / iteration duration.
        
-      
        
-    
        
-   
        
-   
        3.9. Time transformations
        
-   
        
-     Currently, the set of timing functions allowed on
-a group effect is not restricted.
-This has raised concern about complexity of implementation and also
-complexity of behavior with regards to fill modes.
-As a result, allowing the full set of timing functions on group
-effects is considered at risk. 
-    
        Alternatives are to either restrict timing functions on group
-effects to the linear timing function or to a set of
-“simple” timing functions that have properties that
-alleviate some of the concerns with the more complex timing
-functions.
        
-    
        See section
-2 of the discussion from August 2013.
        
-   
        
-   
        
-   
        3.9.1. Calculating the transformed progress
        
-   
        Replace the second step as the calculation of the before
-flag (to accommodate the effect playback rate):
        
-   
        
-    
          
-     
        1. 
-      
          If either the current direction is forwards or the playback rate ≥ 0
-(but not when both conditions are true),
-let going forwards be true, otherwise it is false.
          
-    
        
-   
        
-   
        3.9.2. Calculating the transformed time
        
-   
        (This section is added.)
        
-   
        The transformed time of an animation effect is simply the transformed progress multiplied by the iteration duration.
        
-   
        If the transformed progress is unresolved, then the transformed
-time is also unresolved.
        
-   
        If the transformed progress is zero and the iteration duration is infinity, then the transformed time is zero.
        
-   
        3.10. Grouping and synchronization
        
-   
        
-    This section is non-normative 
-    
        While it is possible to set the timing properties of animation
-effects individually, it is often useful to synchronize animation
-effects so that they share common timing properties and maintain
-their temporal relationship.  This is achieved using an group
-effect.
        
-    
        A simple example is illustrated below.
        
-    
        
-      Using groups to share common timing properties. 
-     
         Using groups to share common timing properties.
         (a) Shows setting a delay of 5 seconds on individual animations.
         (b) Produces the same effect by setting the delay on the group. 
        
-    
        
-    
        When a group effect is directly associated with
-an animation, the animation effect associated with the group effect can be seeked, paused, and stopped as a unit.
        
-   
        
-   
        A group effect is a type of animation effect that
-contains an ordered sequence of zero or more animation effects known as child effects.
        
-   
        At a given moment, an animation effect may be a child effect of at most one group effect known as the parent group.
-The parent group cannot be the same animation
-effect as the child effect itself.
        
-   
        By nesting group effects it is possible to create hierarchical
-tree structures.
-The following terms are used to describe the parts and properties of
-such structures and are defined in [DOM]:
        
-   
-   
        Note: in applying these definitions to animation effects, the
-    term parent refers exclusively to a parent group and does not include the animation which with
-    an animation effect may be directly associated despite the fact that conceptually the animation acts as a parent
-    time source.
        
-   
        The temporal relationship between a child effect and its parent group is incorporated in the definition of inherited time (see § 3.5.3 Local time and inherited time).
        
-   
        3.10.1. Relationship of group time to child time
        
-   
        
-    This section is non-normative 
-    
        The timing of the children of a group effect is based on
-the timing of the group.
-Specifically, times for the children are based on the parent’s transformed time.
-With regards to repetition, this means the children operate inside an iteration of the parent.
        
-    
        For example, if a group effect has an iteration
-count of 2, then the children of the group will all play twice
-since they effectively play inside the group’s iterations.
        
-    
        
-      The effect of multiple iterations on the children of a group. 
-     
         Since children of a group effect base their timing on the
-    group’s transformed time, when the group repeats, the
-    children play again. 
        
-    
        
-    
        Note that even in this case, the child animation effects still
-have only one active interval.
-However, as a result of the parent’s timing, the active
-interval is played twice.
        
-    
        If an iteration count is specified for the children of a group
-as well as for the group itself, the effect is as if the iteration
-count of the group was multiplied with the iteration count of the children.
        
-    
        
-      Iteration counts are multiplicative. 
-     
         Specifying an iteration count of 2 on a group effect and an iteration count of 3 on one of its children results in
-    that child playing 6 times. 
        
-    
        
-    
        A further result of the children of a group effect basing
-their timing on the group’s transformed time is that they
-cannot animate outside of the group’s active interval.
-This is because the transformed time of a group will not
-change outside its active interval.
-This allows groups to clip the playback of their children.
        
-    
        
-      Groups clip the active interval of contained children. 
-     
         In the first instance, an animation effect has a negative delay
-    and an infinite iteration count.
         However, when a similar animation effect is placed inside
-    a group effect with a specified iteration duration it has the effect of clipping the child animation effect’s active interval. 
        
-    
        
-    
        Some further consequences of group effect children basing
-their timing on their parent group’s transformed time are:
        
-    
-   
        
-   
        3.10.2. The start time of
-  children of a group effect
        
-   
        The start time of a child
-effect of a group effect is zero.
        
-   
        Note that specific types of group effects may override
-this definition to provide other kinds of synchronization behavior.
        
-   
        3.10.3. The intrinsic
-  iteration duration of a group effect
        
-   
        The intrinsic iteration duration of a group
-effect is based on the time when the last child effect completes
-its active interval and depends on the
-number of child effects as follows.
        
-   
        
-    
        If the group has no child effects,
-    
        
-     
        the intrinsic iteration duration is zero.
        
-    
        Otherwise,
-    
        
-     
          
-      
        1. 
-       
          Let maximum end time be the maximum value
-after calculating the end time of each child
-effect in the group. The end time may be
-expressed as a time or a percentage (in the case of a progress-based timeline). In the event of mixed time and
-percentage end times, the largest time based value
-equates to 100% for the purpose of time scaling.
          
-      
        2. 
-       
          The intrinsic iteration duration is the result of
-evaluating max(0, maximum end
-time).
          
-     
        
-   
        
-   
        This definition of the intrinsic iteration duration may be
-overridden by specific types of group effects.
        
-   
        3.10.4. Sequence effects
        
-   
        
-    This section is non-normative 
-    
        Specific types of group effects can be used to provide
-different kinds of synchronization behavior for their children.
-This specification defines one additional type of group
-effect: a sequence effect. Sequence effects arrange the start times of their
-children so that they run one at a time, in turn.
        
-    
        Compare the two arrangements illustrated below:
        
-    
        
-      Group effects and sequence effects. 
-     
         Group effects and sequence effects.
         (a) is a regular group effect where all the children run
-        simultaneously.
         (b) is a sequence effect where the children run in turn. 
        
-    
        
-    
        Since group effects can also contain other group
-effects, complex synchronization is possible by combining
-different types of groups as illustrated below.
        
-    
        
-      Nesting of group effects. 
-     
         A sequence effect that contains a regular group
-    effect as a child.
         The group effect waits for the previous child of the sequence effect to finish, and then the children of the group effect play simultaneously.
-    After they have finished the next child of the sequence
-    effect plays. 
        
-    
        
-   
        
-   
        A sequence effect is a type of group effect that schedules its child effects such that they play in
-turn following their order in the group.
-This sequencing is achieved by adjusting the start time of each child
-effect in the group.
        
-   
        3.10.4.1. The start time of
-  children of a sequence effect
        
-   
        The start time of
-a child effect of a sequence effect is the end time of the child’s previous sibling.
-If the child has no previous sibling the start time is zero.
        
-   
        
-     When the active duration is positive infinity the behavior
-for calculating the end time of an animation effect and the start time of
-subsequent children follows the usual behavior defined by IEEE
-754-2008.
-As a result, if any of the children of a sequence
-effect has an infinite active duration, any children
-that occur later in the sequence will not play. 
-    
        Similarly, the above definition does not restrict start times to positive
-values and hence some children may not play due to a negative start delay on children that occur earlier in the group
-since their active interval may end before the group’s start time.
        
-   
        
-   
        
-    This section is non-normative 
-    
        Because the start of the active interval is based on the
-sum of an animation effect’s start time and start delay, the active intervals of
-children of a sequence effect need not run in strict
-sequence but can be shifted back and forth by using the start
-delay as shown in the following diagram.
        
-    
        
-      Using negative start delays to overlap children of seq
-        groups 
-     
         Example of using the start delay on children of a sequence effect to shift their timing so that they
-    overlap (a negative delay) or are spaced apart (a positive delay). 
        
-    
        
-    
        A negative start delay can be used to cause the active
-interval of two children to overlap.
-Note that the start delay affects the start time of subsequent
-children in the group.
        
-   
        
-   
        3.10.4.2. The intrinsic
-  iteration duration of a sequence effect
        
-   
        The intrinsic iteration duration of a sequence
-effect is equivalent to the start time of a hypothetical child effect appended to the group’s children
-calculated according to the definition in § 3.10.4.1 The start time of
-  children of a sequence effect unless that produces a negative value, in
-which case the intrinsic iteration duration is zero.
        
-   
        As a result, if the sequence effect has no child
-effects the intrinsic iteration duration will be
-zero.
        
-   
        4. Animation model
        
-   
        4.1. Animation types
        
-   
        4.1.1. Not animatable
        
-   
        Update the description of an effect that targets a non-animated property as:
        
-   
        
-    
        An animation effect that targets a property that is not animatable will still exhibit the
-    usual behavior for an animation effect such as
-    occupying time in a sequence effect and
-    delaying the fulfillment of an animation’s current finished
-    promise.
        
-   
        
-   
        4.2. Keyframe Effects
        
-   
        4.2.1. The effect value of a keyframe effect
        
-   
        The procedure for computing the effect value of a single property
-referenced by a keyframe effect as one of its target properties,
-for a given iteration progress, current iteration and underlying value is amended by inserting the following step
-after the step to apply the keyframe effect composite mode.
        
-   
          
-    
        1. 
-     
          For each keyframe in interval endpoints:
          
-     
            
-      
          1. 
-       
            (As in web-animations-1).
            
-      
          2. 
-       
            If this keyframe effect has an iteration
-composite operation of accumulate,
-apply the following step current iteration times:
            
-       
              
-        
            • 
-         
              replace the property value of target property on keyframe with the result of combining the
-property value on the final keyframe in property-specific
-keyframes (Va) with the
-property value on keyframe (Vb) using the accumulation procedure defined for target property.
              
-       
            
-       
            Note: The order of arguments here is important. In the case where
-      the animation type of the target property does not define a
-      procedure for accumulation or addition, the default definition
-      for these procedures result in Vb being
-      returned. When performing iteration composition on properties
-      that do not support accumulation, the result should be the
-      initial property value of target property on keyframe, hence we make this Vb in the above step.
            
-     
          
-   
        
-   
        4.3. Combining effects
        
-   
        4.3.1. The effect stack
        
-   
        The procedure for sorting effects appends the following step:
        
-   
        
-    
          
-     
        1. 
-      
          Sort A and B in tree order.
-(By this point, A and B must have the
-same animation since otherwise the order would have been
-resolved in the previous step.)
          
-    
        
-   
        
-   
         The "associated animation of an animation effect" definition used when
-sorting animation effects needs to be revised to use the associated with an animation definition introduced in this level of the specification so that it
-correctly handles group effects.
        
-   
        4.4. Effect accumulation
        
-   
        Similar to the compositing performed between effect values (see Web Animations § 5.4.4 Effect composition), the iteration composite operation determines how values are combined between successive iterations of
-the same keyframe effect.
        
-   
        This specification defines two iteration composite operations as follows:
        
-   
        
-    
        replace
-    
        
-     
        Each successive iteration is calculated independently of previous
-iterations.
        
-    
        accumulate
-    
        
-     
        Successive iterations of the animation are accumulated with the
-final value of the previous iteration.
        
-     
        The application of the iteration composite operation is
-incorporated in the calculation of the effect value in § 4.2.1 The effect value of a keyframe effect.
        
-   
        
-   
-    
        4.5. Custom effects
        
-    
        (This section is added.)
        
-    
         This whole feature needs to be revisited. The current thinking is that
-       rather than having custom effects, we should simply have an onupdate callback on each animation effect.  That
-       would allow, for example, augmenting an existing effect with a function
-       that performs logging or triggers additional actions at certain times.
-       With the current arrangement, doing this would require adding a parent
-       group just to achieve this.
        
-    
        
-     This section is non-normative 
-     
        In some situations the animation
-effects provided by Web Animations may be insufficient.
-For example, the animation effects defined here are only able to target certain CSS properties.
-They are unable, therefore, to modify the currentScale property of an SVG element to smoothly zoom the viewport without
-affecting the document content.
        
-     
        In such cases, where the provided animation
-effects do not provide needed functionality, an effect defined by
-script may be used.
-Such custom effects receive an iteration
-progress and current iteration from the timing model and
-are responsible for producing an effect corresponding to the specified
-time.
        
-     
        Using an effect defined in script it is possible to animate not only
-otherwise un-animatable attributes and properties, but potentially
-anything that is accessible via script, including even producing audio
-or creating vibrations.
        
-     
        For example, using a custom effect that draws to a canvas element, it is possible to produce a complex animated effect
-featuring patterns that may be difficult to create using CSS or
-SVG.
-Compared to using Timing control for
-script-based animations,
-this approach ensures the animation is frame-rate
-independent and can be paused, reversed, eased with timing effects,
-accelerated, synchronized with other animations, and be controlled
-in the same manner as any other Web Animations animation without any
-additional programming.
        
-    
        
-    
        A custom effect is an author-defined programming callback
-that is passed timing information as part of the update animations and send events procedure.
        
-    
         It needs to be called whenever timing properties are updated too, right?
        
-    
        4.5.1. Sampling custom effects
        
-    
        Custom effects are called for each referencing animation effect when the update animations and send events procedure is performed
-(henceforth referred to simple as an update) based on
-the following criteria.
        
-    
          
-     
        1. 
-      
          If, on the previous update, the animation effect referencing the custom effect:
          
-      
-      
          Call the callback passing an unresolved iteration progress and the target element from the previous update as
-parameters to the callback.
          
-     
        2. 
-      
          Call the callback for the current target element based on
-the first matching condition from the following:
          
-      
          
-       
          If the animation effect referencing the custom
-effect is not in effect but was in effect in the previous
-update,
-       
          
-        
          Call the callback passing an unresolved iteration progress and the current target element as parameters to
-the callback.
          
-       
          Otherwise, if the animation effect referencing
-the custom effect:
-       
          
-        
-       
          
-        
          Call the callback passing with the referencing animation effect’s current iteration
-progress and target element as parameters to
-the callback.
          
-      
          
-    
        
-    
        
-      There may be use cases where an action needs to be triggered at
-a specific point in an animation tree.
-In many cases this can be achieved by inserting a custom effect with
-a step-start easing that spans the period during which the action
-should be triggered.
-However, this can impose additional layout requirements on the
-content which might be cumbersome to accommodate. 
-     
        Some alternatives under consideration:
        
-     
          
-      
        • 
-       
          Additional calling conditions could be defined to accommodate
-zero-width custom effects. For example, it could be required
-that the callback be called if (given infinite precision) there
-was a time between the previous and current update times that
-aligned with the custom effect.
          
-      
        • 
-       
          Instead of adding special calling conditions to custom effects,
-a new type of animation effect, Trigger, could be introduced. The
-trigger would only ever act as a zero-width custom effect as
-described above, its constructor would take a callback function,
-but not require a target or timing. It could also specify other
-calling conventions, for example whether it should only trigger
-in a specific playback direction.
          
-     
        
-    
        
-    
        4.5.2. Execution order of custom effects
        
-    
        Since custom effects, unlike animation effects, are not limited to
-a single target property, the steps for assessing their
-order of execution differs from animation effects.
        
-    
        Custom effects are executed after all animation effects have completed and
-applied their result to their targets (see Applying the composited result).
        
-    
         Need to define this more precisely.
-    Are styles flushed?
-    Presumably they are.
-    Can we suspend reflow for the duration of executing the script-based
-    animation effects and just do it once afterwards?
        
-    
        Within the set of custom effects, the
-order of execution is the same as that defined for animation effects in
-[[#the-effect-stack]].
-Items sorted earlier are executed before those sorted later.
        
-           
-   
        4.6. Animation Triggers
        
-   
        4.6.1. Overview
        
-   
        An animation trigger is used to control the playback
-of its associated animation for time-driven animations.
-An animation trigger has a behavior attribute
-which determines the trigger’s effect on its
-associated animation’s playback.
        
-   
         Should there be any effect of triggers on scroll-driven animations?
        
-   
        There are two types of animation triggers: timeline-based and event-based. The
-type of an animation trigger is deduced from its attributes: a
-timeline-based animation trigger will have a non-empty timeline attribute, while an event-based animation trigger will have non-empty eventTarget and eventType attributes.
        
-   
        4.6.2. Event-Based Animation Triggers
        
-   
        An event-based animation trigger executes its behavior when a qualifying event is dispatched.
-A qualifying event is 
-an Event with type matching the trigger’s eventType and target matching the trigger’s eventTarget.
        
-   
        4.6.2.1. Event-Based Animation Trigger Behavior
        
-   
        When a qualifying event is dispatched, the associated
-animation’s playback is modified as follows,
-based on the trigger’s behavior and the current play state of the animation:
        
-   
        
-    
        once
-    
        If play state is finished, do nothing.
-      Otherwise, perform the actions specified for the play function. 
-    
        repeat
-    
        First, if play state is running or paused perform the actions specified for the cancel function.
-      Then, in all cases, perform the actions specified for the play function. 
-    
        alternate
-    
        Perform the actions specified for the reverse function.
-    
        state
-    
        If the play state is running,
-      perform the actions specified for the pause function.
-      Otherwise, perform the actions specified for the play function. 
-   
        
-   
        4.6.3. Timeline-Based Animation Triggers
        
-   
        Like animations, timeline-based animation triggers are associated with a timeline and are attached to an attachment range.
-Changes to animation playback occur when the associated timeline transitions
-between inside and outside the attachment range.
        
-   
        4.6.3.1. Timeline-Based Animation Trigger Internal State
        
-   
        A timeline-based animation trigger trigger has an internal boolean did trigger flag, which is initially false,
-and an internal state with
-these possible values:
        
-   
        
-    
        idle 
-    
        primary 
-    
        inverse 
-   
        
-   
        The values of state and did trigger are
-updated by the updating animation trigger state procedure, described below.
        
-   
         Do we need a formal resolution on the spec of the idle state?
        
-   
        4.6.3.2. Timeline-Based Animation Trigger Behavior
        
-   
        For timeline-based animation triggers, the behavior attribute
-combines with did trigger and state to determine
-the effect on playback.
        
-   
        The animation effect associated with an animation trigger in the idle state
-remains in its before phase and
-stays at zero current time,
-regardless of the trigger’s did trigger flag or state.
-Otherwise, the effect on playback is as follows for
-given values of behavior:
        
-   
        
-    
        once
-    
        
-     
        
-      
        If state is primary,
-      
        
-       
        the effect is to trigger the associated animation.
        
-      
        Otherwise,
-      
        
-       
        the trigger has no effect.
        
-     
        
-    
        repeat
-    
        
-     
        
-      
        If state is primary,
-      
        
-       
        the effect is to trigger the associated animation.
        
-      
        If state is inverse,
-      
        
-       
        the effect is to reset the associated animation effect back to
- its before phase and its associated animation’s start time to zero.
        
-     
        
-    
        alternate 
-    
        
-     
        
-      
        If state is primary and did trigger is false,
-      
        
-       
        the effect is to trigger the associated animation.
        
-      
        If state is primary and did trigger is true,
-      
        
-       
        the effect is to reverse the associated animation.
        
-      
        If state is inverse
-      
        
-       
        the effect is to reverse the associated animation.
        
-     
        
-    
        state 
-    
        
-     
        
-      
        If state is primary
-      
        
-       
        the effect is to trigger or resume the associated animation.
        
-      
        If state is inverse
-      
        
-       
        the effect is to pause the associated animation.
        
-     
        
-   
        
-   
         Do we need a proper definition for "behavior types primary/inverse"?
        
-   
        4.6.3.3. Timeline-Based Animation Trigger Active Interval
        
-   
        Each timeline-based animation trigger defines an active interval and only one such interval. This interval is the segment of the timeline’s progress
-during which the trigger’s state is set to primary.
        
-   
        4.6.3.4. Timeline-Based Animation Trigger Ranges
        
-   
        An animation trigger has two ranges,
-the default range and the exit range.
-The exit range is used to replace default range and extend
-the active interval.
        
-   
         Should we specify that that exit range’s edges can only be equal to or greater than the default range’s edges?
        
-   
        Depending on its most recent state state, the active interval is defined as follows:
        
-   
        
-    
        If state is primary,
-    
        
-     
        Then the active interval is exit range.
        
-    
        Otherwise,
-    
        
-     
        The active interval is default range.
        
-   
        
-   
        4.6.3.5. Updating Timeline-Based Animation Trigger State
        
-   
        
-     The procedure of updating animation trigger state of a timeline-based animation trigger trigger is as follows: 
-    
          
-     
        1. 
-      
          Let did trigger be the current value of trigger’s did trigger flag.
          
-     
        2. 
-      
          Let behavior be trigger’s behavior attribute.
          
-     
        3. 
-      
          Set trigger.state as follows:
          
-      
          
-       
          If trigger’s local time is unresolved,
-       
          
-        
          Then abort this procedure.
          
-       
          Otherwise,
-       
          
-        
          
-         
          If behavior is once and did trigger is true,
-         
          
-          
          Then abort this procedure.
          
-         
          Otherwise,
-         
          
-          
          
-           
          If trigger is inside its active interval,
-           
          
-            
            
-             
          1. 
-              
            Set trigger.state to primary.
            
-             
          2. 
-              
            Set trigger.did trigger to true.
            
-            
          
-           
          Otherwise,
-           
          
-            
          
-             
          If did trigger is true,
-             
          
-              
          Set trigger.state to inverse.
          
-            
          
-          
          
-        
          
-      
          
-    
        
-   
        
-   
         Should it be the correct/expected behavior for the "did trigger" flag to reset to false if the timeline becomes idle again?
        
-   
        4.6.4. Setting a Trigger of an Animation
        
-   
        
-     The procedure of setting a trigger of an animation animation,
-    to new trigger, is as follows: 
-    
          
-     
        1. 
-      
          Let old trigger be the current animation trigger of animation, if any.
          
-     
        2. 
-      
          If new trigger is the same object as old trigger, abort this procedure.
          
-     
        3. 
-      
          Let the trigger of animation be new trigger.
          
-     
        4. 
-      
          If new trigger is a timeline-based animation trigger,
- run the updating animation trigger state procedure for new trigger.
          
-    
        
-   
        
-   
        4.6.5. Setting the timeline of a Timeline-Based Animation Trigger
        
-   
        
-     The procedure of setting timeline of animation trigger trigger,
-    to new timeline which may be null, is as follows: 
-    
          
-     
        1. 
-      
          If trigger is not a timeline-based animation trigger throw a TypeError.
          
-     
        2. 
-      
          Let old timeline be the current value of trigger.timeline, if any.
          
-     
        3. 
-      
          If new timeline is the same object as old timeline, abort this procedure.
          
-     
        4. 
-      
          Set trigger.timeline to new timeline.
          
-     
        5. 
-      
          Run the updating animation trigger state procedure for trigger.
          
-    
        
-   
        
-   
        5. Programming interface
        
-   
        5.1. The AnimationTimeline interface
        
-
        [Exposed=Window]
-partial interface AnimationTimeline {
-    readonly attribute CSSNumberish? currentTime;
-    readonly attribute CSSNumberish? duration;
-    Animation play (optional AnimationEffect? effect = null);
-};
-
        
-   
        
-    
        Update the attribute type for currentTime.
        
-    
        
-     
        currentTime,  of type CSSNumberish, readonly, nullable
-     
        
-      
        Returns the current time for this timeline or null if this timeline is inactive.  The value is expressed as a
-percentage for a progress-based timeline, or as a double in
-milliseconds otherwise.
        
-     
        duration,  of type CSSNumberish, readonly, nullable
-     
        
-      
        Returns the duration for this timeline.
        
-    
        
-   
        
-   
        
-    
        
-     
         Animation play(optional AnimationEffect? effect = null)
-     
        
-      
        Creates a new Animation object associated with
-this timeline that begins playback as soon as it is ready.
        
-      
        If effect is specified, it will be used as the animation’s associated effect.
        
-      
         It has been suggested this method be renamed, or even removed
-(see TAG
-feedback).
        
-      
         Need to define the start behavior when effect is null.
        
-      
        The new Animation object is created using the Animation() constructor passing this AnimationTimeline object as the timeline parameter and effect as the effect parameter.
        
-      
        Following construction of the Animation object, the procedure to play an animation is performed on the newly constructed object
-with the auto-rewind flag set to true.
        
-      
        
-       
        
-        
        effect
-        
        
-         
        the associated effect to assign to the newly-created Animation object.
        
-       
        
-      
        
-    
        
-   
        
-   
        5.2. The Animation interface
        
-   
        Update the startTime and currentTime of the Animation interface, and add
-rangeStart, rangeEnd, and overallProgress as follows:
        
-
        [Exposed=Window]
-partial interface Animation {
-    attribute CSSNumberish?       startTime;
-    attribute CSSNumberish?       currentTime;
-    attribute AnimationTrigger?   trigger;
-    attribute (TimelineRangeOffset or CSSNumericValue or CSSKeywordValue or DOMString) rangeStart;
-    attribute (TimelineRangeOffset or CSSNumericValue or CSSKeywordValue or DOMString) rangeEnd;
-    readonly attribute double? overallProgress;
-};
-
        
-   
        Add or update attribute descriptions as follows:
        
-   
        
-    
        
-     
        startTime,  of type CSSNumberish, nullable
-     
        
-      
        Update the description as:
        
-    
        
-    
        
-     
        The start time of this animation. When associated with a progress-based timeline, start time must be returned as
-a CSSNumericValue with percent units. Otherwise start time must be returned as a double value, representing
-the time in units of milliseconds. Setting this attribute updates the start time using the procedure to set the start time of this object to the new value.
        
-    
        
-    
        
-     
        currentTime,  of type CSSNumberish, nullable
-     
        
-      
        update the description as:
        
-    
        
-    
        
-     
        The current time of this animation. When associated with a progress-based timeline, current time must be returned
-as a CSSNumericValue. with percent units.
-Otherwise current time must be returned as a double value,
-representing the time in units of milliseconds.
-Setting this attribute follows the procedure to set the current time of this object to the new value.
        
-    
        
-    
        Add:
        
-    
        
-     
        
-      
        rangeStart,  of type (TimelineRangeOffset or CSSNumericValue or CSSKeywordValue or DOMString)
-      
        
-       
        Specifies the start of the animation’s animation attachment range.
-Setting the attribute follows the same rules as the KeyframeAnimationOption rangeStart.
-When reading the attribute, the returned value is either a TimelineRangeOffset or the DOMString "normal".
        
-      
        rangeEnd,  of type (TimelineRangeOffset or CSSNumericValue or CSSKeywordValue or DOMString)
-      
        
-       
        Specifies the end of the animation’s animation attachment range.
-Setting the attribute follows the same rules as the KeyframeAnimationOption rangeEnd.
-When reading the attribute, the returned value is either a TimelineRangeOffset or the DOMString "normal".
        
-      
        overallProgress,  of type double, readonly, nullable
-      
        
-       
        Specifies the overallProgress of the animation as a proportion of its associated effect end.
        
-      
        trigger,  of type AnimationTrigger, nullable
-      
        
-       
        Specifies the animation’s associated animation trigger.
-Setting the attribute follows the same rules as the KeyframeAnimationOption trigger.
        
-     
        
-    
        
-   
        
-   
        5.3. The AnimationEffect interface
        
-
        [Exposed=Window]
-partial interface AnimationEffect {
-    // Timing hierarchy
-    readonly attribute GroupEffect?     parent;
-    readonly attribute AnimationEffect? previousSibling;
-    readonly attribute AnimationEffect? nextSibling;
-
-    undefined before (AnimationEffect... effects);
-    undefined after (AnimationEffect... effects);
-    undefined replace (AnimationEffect... effects);
-    undefined remove ();
-};
-
        
-   
        
-    
        
-     
        getComputedTiming()
-     
        
-      
        The description of the duration attribute of the object
-needs to indicate that if timing.duration is the string auto, this attribute will return
-the current calculated value of the intrinsic iteration duration, which may be a expressed as a double
-representing the duration in milliseconds or a percentage when the effect
-is associated with a progress-based timeline.
        
-     
        parent,  of type GroupEffect, readonly, nullable
-     
        
-      
        The parent group of this animation effect or null if this animation effect does not have
-a parent group.
        
-      
         Should this be parentGroup?
        
-     
        previousSibling,  of type AnimationEffect, readonly, nullable
-     
        
-      
        The previous sibling of this animation effect.
        
-     
        nextSibling,  of type AnimationEffect, readonly, nullable
-     
        
-      
        The next sibling of this animation effect.
        
-    
        
-   
        
-   
        
-    
        
-     
         undefined before (AnimationEffect... effects)
-     
        
-      
        Inserts effects before this animation effect.
        
-      
          
-       
        1. 
-        
          If there is no parent group, abort these steps.
          
-       
        2. 
-        
          If any of the animation effects in effects is an inclusive ancestor of this animation effect, throw a HierarchyRequestError exception and abort these steps.
          
-       
        3. 
-        
          Insert effects before
-this animation effect.
          
-      
        
-      
        
-        Note that this definition precludes the following usage since effect is an inclusive ancestor of itself: 
-
        effect.before(effect); // throws HierarchyRequestError
        
-      
        
-     
         undefined after(AnimationEffect... effects)
-     
        
-      
        Inserts effects after this animation effect.
        
-      
          
-       
        1. 
-        
          If there is no parent group, abort these steps.
          
-       
        2. 
-        
          If any of the animation effects in effects is an inclusive ancestor of this animation effect, throw a HierarchyRequestError exception and abort these steps.
          
-       
        3. 
-        
          Let reference child be the next sibling of
-this animation effect not in effects.
          
-       
        4. 
-        
          Insert effects before reference child.
          
-      
        
-     
         undefined replace(AnimationEffect... effects)
-     
        
-      
        Replaces this AnimationEffect with the passed in effects.
        
-      
          
-       
        1. 
-        
          If there is no parent group, abort these steps.
          
-       
        2. 
-        
          If any of the animation effects in effects is an inclusive ancestor of the parent group throw a HierarchyRequestError exception and abort these steps.
          
-       
        3. 
-        
          Let reference child be the next sibling of
-this animation effect not in effects.
          
-       
        4. 
-        
          Remove this animation effect from its parent group.
          
-       
        5. 
-        
          Insert effects before reference child.
          
-      
        
-     
        undefined remove()
-     
        
-      
        Removes this animation
-effect from its parent group or animation.
        
-    
        
-   
        
-   
         The remove() method can be used to remove an effect from
-either its parent group or animation. Should we keep it in level 1 and define it
-simply as removing the animation from its animation?
        
-   
        5.4. The EffectTiming and OptionalEffectTiming dictionaries
        
-
        partial dictionary EffectTiming {
-    double delay;
-    double endDelay;
-    double playbackRate = 1.0;
-    (unrestricted double or CSSNumericValue or DOMString) duration = "auto";
-};
-
-partial dictionary OptionalEffectTiming {
-    double playbackRate;
-};
-
        
-   
        Note: In this version of the spec, duration is not settable as a
-CSSNumericValue; however, duration may be returned as a CSSNumericValue when
-resolving the duration in getComputedTiming(). Future
-versions of the spec may enable setting the duration as a CSSNumeric value,
-where the unit is a valid time unit or percent.
        
-   
        
-    
        
-     
        delay,  of type double
-     
        
-      
        Update the description as:
        
-    
        
-    
        
-     
        The specified start delay which represents the number of
-milliseconds from an animation effect’s start time to the start of the active interval.
-The specified start delay is converted to a start delay following
-the normalize specified timing procedure.
        
-    
        
-    
        
-     
        endDelay,  of type double
-     
        
-      
        Update the description as:
        
-    
        
-    
        
-     
        The specified end delay which represents the number of milliseconds
-from the end of an animation effect’s active interval until the start time of any animation effect that may follow, for example, in a sequence effect. The specified end delay is converted to an end delay following the normalize specified timing procedure.
        
-    
        
-    
        
-     
        duration,  of type (unrestricted double or CSSNumericValue or DOMString), defaulting to "auto"
-     
        
-      
        Update the description as:
        
-    
        
-    
        
-     
        The specified iteration duration which is a real number greater
-than or equal to zero (including positive infinity) representing the
-time taken in milliseconds to complete a single iteration of the animation effect, or the string value auto to indicate
-that the iteration duration reflects the animation effect’s intrinsic iteration duration. The specified iteration duration is
-converted to an iteration duration following the normalize specified timing procedure.
        
-    
        
-    
        
-     
        playbackRate,  of type double, defaulting to 1.0
-     
        
-      
        The animation effect’s playback rate property which is a multiplier applied to the local time potentially
-causing the effect to run at a different rate to its natural speed.
        
-    
        
-   
        
-   
        5.5. Updating the timing of an
-AnimationEffect
        
-   
        Replace:
        
-   
        
-    
        Assign each member that exists in input to the corresponding
-   timing property of effect as follows:
        
-    
-   
        
-   
        with:
        
-   
        
-    
        Assign each member that exists in input to the corresponding
-   timing property of effect as follows:
        
-    
-   
        
-   
        Add:
        
-   
        
-    
        Follow the procedure to normalize specified timing.
        
-    
         Timing properties may also be updated due to a style change. Any change to
-   a CSS animation property that affects timing requires rerunning the
-   procedure to normalize specified timing. 
        
-   
        
-   
        5.6. The ComputedEffectTiming dictionary
        
-
        partial dictionary ComputedEffectTiming {
-    CSSNumberish         startTime;
-    CSSNumberish         endTime;
-    CSSNumberish         activeDuration;
-    CSSNumberish?        localTime;
-};
-
        
-   
        
-    
        
-     
        startTime,  of type CSSNumberish
-     
        
-      
        The start time of this animation effect expressed as a percentage if associated with a progress-based timeline, or as a double in milliseconds otherwise.
        
-      
        This is the time at which the parent group, if
-any, has scheduled this child to run within its transformed time space, that is, the animation effect’s inherited time
-space.
        
-      
        The start of the active interval is based on the sum of
-the start time and start delay.
        
-     
        endTime,  of type CSSNumberish
-     
        
-      
        Update the description as:
        
-    
        
-    
        
-     
        The end time of the animation effect in inherited timespace. The value is expressed as
-a percentage if associated with a progress-based timeline, or as a
-double in milliseconds otherwise.
-This corresponds to the end of the animation effect’s active
-interval plus any end delay.
        
-    
        
-    
        
-     
        activeDuration,  of type CSSNumberish
-     
        
-      
        Update the description as:
        
-    
        
-    
        
-     
        The active duration of this animation effect expressed
-as a percentage if associated with a progress-based timeline, or as a
-double in milliseconds otherwise.
        
-    
        
-    
        
-     
        localTime,  of type CSSNumberish, nullable
-     
        
-      
        Update the second paragraph as:
        
-    
        
-    
        
-     
        This will be null if this animation effect is not associated with an animation or if it has a parent group that is not in effect.
        
-    
        
-    
        Append:
        
-    
        
-     
        The value is expressed as a percentage if associated with a progress-based timeline, or as a double in milliseconds otherwise.
        
-    
        
-   
        
-   
        5.6.1. The FillMode enumeration
        
-
        enum FillMode { "none", "forwards", "backwards", "both", "auto" };
-
        
-   
        
-    
        auto
-    
        
-     
        Update the description as:
        
-   
        
-   
        
-    
        Fill backwards and forwards when applied to a GroupEffect and no fill when applied to a KeyframeEffect.
        
-   
        
-   
        5.7. The GroupEffect interface
        
-   
        (This section is added.)
        
-   
        Group effects are represented by the GroupEffect interface.
        
-
        [Exposed=Window]
-interface GroupEffect {
-  constructor(sequence<AnimationEffect>? children,
-              optional (unrestricted double or EffectTiming) timing = {});
-
-  readonly attribute AnimationNodeList  children;
-  readonly attribute AnimationEffect?   firstChild;
-  readonly attribute AnimationEffect?   lastChild;
-  GroupEffect clone ();
-
-  undefined prepend (AnimationEffect... effects);
-  undefined append (AnimationEffect... effects);
-};
-
        
-   
        
-    
        
-     
        GroupEffect ()
-     
        
-      
        Creates a new GroupEffect object using the following
-procedure:
        
-      
          
-       
        1. 
-        
          Create a new GroupEffect object, group.
          
-       
        2. 
-        
          Let timing input be the result of applying the
-procedure to process a timing argument to timing.
          
-       
        3. 
-        
          Let timing input be the result corresponding to the first
-matching condition from below.
          
-        
          
-         
          If options is an EffectTiming object,
-         
          
-          
          Let timing input be options.
          
-         
          Otherwise (if options is a double),
-         
          
-          
          Let timing input be a new EffectTiming object with all members set to their default values
-and duration set to options.
          
-        
          
-       
        4. 
-        
          Call the procedure to update the timing properties of an animation effect of group from timing input.
          
-        
          If that procedure causes an exception to be thrown, propagate the
-exception and abort this procedure.
          
-       
        5. 
-        
          Insert children before null.
          
-      
        
-      
        
-       
        
-        
        children
-        
        
-         
        A sequence of animation effects to add as children of this group.
        
-         
        These children are appended in sequence using the same
-  semantics as the append() method of the GroupEffect interface.
        
-        
        timing
-        
        
-         
        The timing properties or iteration duration of the new
-  group effect.
        
-       
        
-      
        
-    
        
-   
        
-   
        
-    
        
-     
        children,  of type AnimationNodeList, readonly
-     
        
-      
        The list of child effects in the group.
        
-     
        firstChild,  of type AnimationEffect, readonly, nullable
-     
        
-      
        The first child of this group effect.
        
-     
        lastChild,  of type AnimationEffect, readonly, nullable
-     
        
-      
        The last child of this group effect.
        
-    
        
-   
        
-   
        
-    
        
-     
        
-     
        undefined prepend (AnimationEffect... effects)
-     
        
-      
          
-       
        1. 
-        
          If any of the animation effects in effects is an inclusive ancestor of this animation effect, throw a HierarchyRequestError exception and abort these steps.
          
-       
        2. 
-        
          Insert effects before
-the first child.
          
-      
        
-     
         undefined append (AnimationEffect... effects)
-     
        
-      
          
-       
        1. 
-        
          If any of the animation effects in effects is an inclusive ancestor of this animation effect, throw a HierarchyRequestError exception and abort these steps.
          
-       
        2. 
-        
          Insert effects before null.
          
-      
        
-     
         GroupEffect clone ()
-     
        
-      
        Creates a deep copy of this GroupEffect object using the
-following procedure.
        
-      
          
-       
        1. 
-        
          Let source be this GroupEffect object,
-the object to be cloned.
          
-       
        2. 
-        
          Let cloned timing be a new EffectTiming object whose members are assigned
-the value of the attribute with the same name on source.getTiming().
          
-       
        3. 
-        
          Let cloned children be an empty sequence of AnimationEffect objects.
          
-       
        4. 
-        
          For each child in source.children, append the result
-of calling child.clone() to cloned children.
          
-       
        5. 
-        
          Return a new GroupEffect object created by
-calling the GroupEffect() constructor with parameters GroupEffect(cloned children, cloned timing).
          
-      
        
-    
        
-   
        
-   
        5.7.1. Processing a timing argument
        
-   
        The timing parameter passed to the GroupEffect() or SequenceEffect() constructor may be an EffectTiming object, a double
-representing the duration of the animation effect in milliseconds, or
-undefined.
        
-   
        The following procedure to process a timing argument, timing, normalizes the above inputs into
-a EffectTiming object.
        
-   
        
-    
        If timing is an EffectTiming object,
-    
        
-     
        Return timing.
        
-    
        If timing is a double,
-    
        
-     
        Return a new EffectTiming object with all members set
-to their default values and duration set
-to timing.
        
-    
        Otherwise (timing is undefined),
-    
        
-     
        Return a new EffectTiming object with all members set
-to their default values.
        
-   
        
-   
        5.7.2. Definitions for manipulating hierarchies
        
-   
        The next sibling of effect not included in a set of animation
-effects, effects is determined using the following
-steps:
        
-   
          
-    
        1. 
-     
          Let context effect be effect.
          
-    
        2. 
-     
          While the next sibling of context effect is not null perform the following steps:
          
-     
            
-      
          1. 
-       
            Let context effect be the next sibling of context effect.
            
-      
          2. 
-       
            If context effect is not in effects return context effect and abort these steps.
            
-     
          
-    
        3. 
-     
          Return null.
          
-   
        
-   
        To remove a effect from its parent group or animation, perform the steps corresponding to the first
-matching condition from below, if any:
        
-   
        
-    
        If effect has a parent group,
-    
        
-     
        Remove effect from the parent group’s
-list of child effects.
        
-    
        If effect is directly associated with
-an animation,
-    
        
-     
        Disassociate effect from the animation.
        
-   
        
-   
        To insert a series of zero or
-more animation effects, effects, to parent’s list of child effects before reference child perform the following steps for each effect in effects:
        
-   
          
-    
        1. 
-     
          Remove effect from its parent.
          
-    
        2. 
-     
          Insert effect to parent’s list of child
-effects before reference child
          
-   
        
-   
        5.8. The AnimationNodeList interface
        
-   
        A list of animation effects may be represented by
-an AnimationNodeList.
        
-   
        The AnimationNodeList interface supports indexed
-properties with indices in the range 0 ≤ index < length.
        
-   
         The only reason this interface exists is to provide a familiar
-experience for authors familiar with DOM interfaces where child nodes
-are accessed via a children member. 
        
-
        [Exposed=Window]
-interface AnimationNodeList {
-    readonly attribute unsigned long length;
-    getter AnimationEffect? item (unsigned long index);
-};
-
        
-   
        
-    
        
-     
        length,  of type unsigned long, readonly
-     
        
-      
        The number of animation effects in the list.
        
-    
        
-   
        
-   
        
-    
        
-     
         getter AnimationEffect? item(unsigned long index)
-     
        
-      
        Returns the animation effect at index.
-If index is greater than or equal to length returns null.
        
-    
        
-   
        
-   
        5.9. The SequenceEffect interfaces
        
-   
        Sequence effects are represented by the SequenceEffect interface.
        
-
        [Exposed=Window]
-interface SequenceEffect : GroupEffect {
-  constructor(sequence<AnimationEffect>? children,
-              optional (unrestricted double or EffectTiming) timing = {});
-
-  SequenceEffect clone ();
-};
-
        
-   
        
-    
        
-     
        constructor (sequence<AnimationEffect>? children,
-optional (unrestricted double or EffectTiming) timing)
-     
        
-      
        The meaning and handling of each of the parameters in this
-constructor is identical to the GroupEffect() constructor.
        
-    
        
-   
        
-   
        
-    
        
-     
         SequenceEffect clone ()
-     
        
-      
        Creates a deep copy of this SequenceEffect object using
-the same procedure as defined for the clone() method of the GroupEffect interface except that a new SequenceEffect object is created.
        
-    
        
-   
        
-   
        5.10. The KeyframeEffect interfaces
        
-   
        The KeyframeEffect interface is modified to add the following:
        
-
        partial interface KeyframeEffect {
-    attribute IterationCompositeOperation    iterationComposite;
-};
-
        
-   
        
-    
        
-     
         KeyframeEffect (target, keyframes, options)
-     
        
-      
        Amend step 5 of the procedure to create a new KeyframeEffect object as
-follows:
        
-      
          
-       
        1. 
-        
          If options is a KeyframeEffectOptions object,
-assign the iterationComposite, and composite, properties of effect to the
-corresponding value from options.
          
-        
          When assigning these properties, the error-handling defined for the
-corresponding setters on the KeyframeEffect interface is applied.
-If any of those setters require an exception to be thrown
-for the values specified by options, this procedure must throw the same exception and abort all further steps.
          
-      
        
-     
        KeyframeEffect (source)
-     
        
-      
        Amend the procedure to create a new KeyframeEffect object with the
-same properties as source to include setting the iteration composite operation from source on effect.
        
-    
        
-   
        
-   
        
-    
        
-     
        iterationComposite,  of type IterationCompositeOperation
-     
        
-      
        The iteration composite operation property of this keyframe effect as specified by one of the IterationCompositeOperation enumeration values.
        
-      
        On setting, sets the iteration composite operation property of this animation effect to the provided value.
        
-    
        
-   
        
-   
        5.10.1. Creating a new KeyframeEffect object
        
-   
        
-    This section is non-normative 
-    
        Replace:
        
-    
        
-     
        If the duration is not specified, a value of zero is used.
        
-    
        
-    
        with:
        
-    
        
-     
        If the duration is not specified, the intrinsic iteration duration is
-    used.
        
-    
        
-    
        Add:
        
-    
        
-     
        This is particularly useful in combination with other animation
-effects.  For example, fading an element before switching visibility to
-‘hidden’ can be achieved as follows,
        
-    
        
-    
        
-     
-
        new SequenceEffect(
-  [
-    new KeyframeEffect(elem, { opacity: 0 }, 1000),
-    new KeyframeEffect(elem, { visibility: 'hidden' }, { fill: 'forwards' })
-  ]
-);
        
-    
        
-   
        
-   
        5.10.2. Modification to the *Keyframe dictionaries
        
-   
        The double? type of the offset key
-in ComputedKeyframe, BaseComputedKeyframe, BaseKeyframe, BasePropertyIndexedKeyframe,
-etc.
-is replaced by (CSSNumberish? or TimelineRangeOffset or DOMString),
-where double continues to be interpreted as a percentage,
-a DOMString is parsed into a TimelineRangeOffset according to the syntax of <keyframe-selector>,
-and the resulting TimelineRangeOffset or CSSNumericValue is interpreted as defined for @keyframes.
        
-   
        If the DOMString fails to parse as a valid <keyframe-selector>,
-then the keyframe is invalid,
-and will throw a TypeError when [[web-animations-1#processing-a-keyframes-argument|processed]]
-(same as if the double value was outside the [0,1] range).
        
-   
        5.10.3. The KeyframeEffectOptions dictionary
        
-   
        The KeyframeEffectOptions dictionary interface is modified to add the
-following member:
        
-
        partial dictionary KeyframeEffectOptions {
-    IterationCompositeOperation iterationComposite = "replace";
-};
-
        
-   
        
-    
        
-     
        iterationComposite,  of type IterationCompositeOperation, defaulting to "replace"
-     
        
-      
        The iteration composite operation used to define the way
-animation values build from iteration to iteration.
        
-    
        
-    
        5.11. The IterationCompositeOperation enumeration
        
-    
        The possible values of an animation effect’s iteration composite operation are represented by the IterationCompositeOperation enumeration.
        
-
        enum IterationCompositeOperation { "replace", "accumulate" };
-
        
-    
        
-     
        replace
-     
        
-      
        Corresponds to the replace iteration composite operation value such that the effect value produced is independent of the current iteration.
        
-     
        accumulate
-     
        
-      
        Corresponds to the accumulate iteration composite operation value such that
-subsequent iterations of an animation effect build
-on the final value of the previous iteration.
        
-    
        
-    
        5.12. The EffectCallback callback function
        
-    
-     
        Custom effects can be defined in script by providing an EffectCallback callback function.
        
-
        callback EffectCallback = undefined (double? progress,
-                                (Element or CSSPseudoElement) currentTarget,
-                                Animation animation);
-
        
-     
        An EffectCallback is called each time an KeyframeEffect object
-with which it is associated is updated.
        
-     
        
-      
        
-       
        double? progress
-       
        
-        
        The iteration progress value for which to produce an effect.
-When this is null, the function SHOULD
-remove the effect.
        
-       
        (Element or CSSPseudoElement) currentTarget
-       
        
-        
        The target element on which this callback is expected
-to operate.
        
-        
        
-         
        Note that currentTarget may differ from animation.target.
        
-         
        If the target element of animation is changed between updates, this method will be
-called once with a null progress and the
-previous target element as the currentTarget, then again with the current progress and the updated target
-element as the currentTarget.
-This allows the animation effect to be removed from the old target element.
        
-        
        
-       
        Animation animation
-       
        
-        
        The Animation object that is being updated.
        
-      
        
-     
        
-            
-    
        5.13. The Animatable interface
        
-    
        
-     
        
-      
        sequence<Animation> getAnimations(options)
-      
        
-       
        Add:
        
-     
        
-     
        
-      
        If this object is the target element of two or more animation effects which are associated with the
-same animation, the corresponding Animation object will still only appear in the returned list once.
        
-     
        
-    
        
-    
        5.14. The Animatable interface mixin
        
-    
        The Animatable mixin interface
-is modified to add the following members:
        
-    
        
-     
        
-      
        Animation animate(keyframes, options)
-      
        
-       
        Amend step 6 of the procedure as follows:
        
-       
          
-        
        1. 
-         
          If options is a KeyframeAnimationOptions object,
-let trigger be the trigger member of options or, if trigger member of options is missing,
-a newly created AnimationTrigger with an empty AnimationTriggerOptions dictionary as its options.
          
-        
        2. 
-         
          Run the procedure to setting a trigger of an animation for animation with the auto-rewind flag set to true.
          
-       
        
-     
        
-    
        
-    
        The KeyframeAnimationOptions dictionary interface
-is modified to add the following members:
        
-
        dictionary TimelineRangeOffset {
-  CSSOMString? rangeName;
-  CSSNumericValue offset;
-};
-
-partial dictionary KeyframeAnimationOptions {
-    (TimelineRangeOffset or CSSNumericValue or CSSKeywordValue or DOMString) rangeStart = "normal";
-    (TimelineRangeOffset or CSSNumericValue or CSSKeywordValue or DOMString) rangeEnd = "normal";
-    AnimationTrigger? trigger;
-};
-
        
-    
        
-     
        
-      
        rangeStart,  of type (TimelineRangeOffset or CSSNumericValue or CSSKeywordValue or DOMString), defaulting to "normal"
-      
        
-       
        If present and not "normal",
-specifies the start of the animation’s animation attachment range.
-A DOMString value is parsed as an animation-range-end value
-to yield a TimelineRangeOffset rangeName and offset or alternatively a CSSKeywordValue with the value of "normal";
-a CSSNumericValue is interpreted as a TimelineRangeOffset with that offset and a null rangeName.
        
-      
        rangeEnd,  of type (TimelineRangeOffset or CSSNumericValue or CSSKeywordValue or DOMString), defaulting to "normal"
-      
        
-       
        If present and not "normal",
-specifies the end of the animation’s animation attachment range.
-A DOMString value is parsed as an animation-range-end value
-to yield a TimelineRangeOffset rangeName and offset;
-a CSSNumericValue is interpreted as a TimelineRangeOffset with that offset and a null rangeName.
        
-      
        trigger,  of type AnimationTrigger, nullable
-      
        
-       
        If present, specifies the animation’s associated animation trigger by running the procedure of setting a trigger of an animation.
        
-     
        
-    
        
-    
        Passing a CSSKeywordValue with a value other than "normal"
-as the rangeStart or rangeEnd value
-to any API defined to accept KeyframeAnimationOptions throws a TypeError.
        
-    
        Note: The rangeName and offset values of rangeStart and rangeEnd are interpreted as defined for animation-range-start/animation-range-end,
-and affect the animation accordingly.
        
-    
        See [[web-animations-1#the-animatable-interface-mixin]] for further description.
        
-    
        5.15. The AnimationPlaybackEvent interface 
        
-    
        Replace double with CSSNumberish as the type for currentTime and timelineTime.
        
-
        [Exposed=Window]
-interface AnimationPlaybackEvent : Event {
-    constructor(DOMString type, optional AnimationPlaybackEventInit
-    eventInitDict = {});
-    readonly attribute CSSNumberish? currentTime;
-    readonly attribute CSSNumberish? timelineTime;
-};
-dictionary AnimationPlaybackEventInit : EventInit {
-    CSSNumberish? currentTime = null;
-    CSSNumberish? timelineTime = null;
-};
-
        
-    
        
-     
        Update the type for the AnimationPlaybackEvent attributes.
        
-     
        
-      
        currentTime,  of type CSSNumberish, readonly, nullable
-      
        
-       
        The current time of the animation that generated the event
-at the moment the event as queued.
-This will be null if the animation was idle at the time the event was generated.
        
-      
        timelineTime,  of type CSSNumberish, readonly, nullable
-      
        
-       
        The time value of the timeline with which the animation that
-generated the event is associated at the moment the event was queued.
-This will be null if the animation was not
-associated with an active timeline at the
-time the event was queued.
        
-     
        
-    
        
-    
        
-     
        Update the type for the AnimationPlaybackEventInit members.
        
-     
        
-      
        currentTime,  of type CSSNumberish, nullable, defaulting to null
-      
        
-       
        See the description of the currentTime attribute.
        
-      
        timelineTime,  of type CSSNumberish, nullable, defaulting to null
-      
        
-       
        See the description of the timelineTime attribute.
        
-     
        
-    
        
-    
        5.16. The AnimationTrigger interface
        
-
        [Exposed=Window]
-interface AnimationTrigger {
-  constructor(optional AnimationTriggerOptions options = {});
-  attribute AnimationTriggerBehavior behavior;
-  attribute EventTarget? eventTarget;
-  attribute DOMString? eventType;
-  attribute AnimationTimeline? timeline;
-  attribute any rangeStart;
-  attribute any rangeEnd;
-  attribute any exitRangeStart;
-  attribute any exitRangeEnd;
-};
-
        
-    
         Should not use type `any` for the range attributes.
        
-    
        
-     
        
-      
        AnimationTrigger(options)
-      
        
-       
        Creates a new AnimationTrigger object using the following procedure:
        
-       
          
-        
        1. 
-         
          If options contains a timeline entry
- and also contains either or both of eventTarget and eventType throw a TypeError.
          
-        
        2. 
-         
          If options contains only one of eventTarget and eventType throw a TypeError.
          
-        
        3. 
-         
          Create a new AnimationTrigger object, trigger.
          
-        
        4. 
-         
          Set trigger.behavior to options.behavior.
          
-        
        5. 
-         
          If options contains a timeline entry
          
-         
            
-          
          1. 
-           
            Set trigger.did trigger to false.
            
-          
          2. 
-           
            Set trigger.state to idle.
            
-          
          3. 
-           
            Set default range of trigger using options.rangeStart and options.rangeEnd following the same rules as the KeyframeAnimationOption rangeStart and rangeEnd respectively.
            
-          
          4. 
-           
            Set exit range of trigger using options.exitRangeStart and options.exitRangeEnd,
- following the same rules above for default range, unless they are set to
- "auto", in which case they are set to their corresponding side
- of the default range.
            
-          
          5. 
-           
            Run the procedure for setting timeline of animation trigger on trigger passing options.timeline as the new timeline.
            
-         
          
-        
        6. 
-         
          If options contains eventTarget and eventType entries
          
-         
            
-          
          1. 
-           
            Set trigger.eventTarget to options.eventTarget.
            
-          
          2. 
-           
            Set trigger.eventType to options.eventType.
            
-         
          
-       
        
-       
        
-        
        
-         
        options
-         
        
-          
        Configuration parameters for the newly-created trigger.
        
-        
        
-       
        
-     
        
-    
        
-    
        
-     
        
-      
        behavior,  of type AnimationTriggerBehavior
-      
        
-      
        eventTarget,  of type EventTarget, nullable
-      
        
-       
        For an event-based animation trigger, this is
-  matched against a dispatched event’s target to determine whether it’s a qualifying event.
        
-      
        eventType,  of type DOMString, nullable
-      
        
-       
        For an event-based animation trigger, this is
-  matched against a dispatched event’s type to determine whether it’s a qualifying event.
        
-      
        timeline,  of type AnimationTimeline, nullable
-      
        
-       
        Returns the timeline for this trigger
-  or `null` if this timeline is inactive.
        
-      
        rangeStart,  of type any
-      
        
-       
        Returns the default range’s start of this trigger.
        
-      
        rangeEnd,  of type any
-      
        
-       
        Returns the default range’s end of this trigger.
        
-      
        exitRangeStart,  of type any
-      
        
-       
        Returns the exit range’s start of this trigger.
        
-      
        exitRangeEnd,  of type any
-      
        
-       
        Returns the exit range’s end of this trigger.
        
-     
        
-     
         Need to specify the behavior of setters.
        
-    
        
-    
        5.17. The AnimationTriggerOptions dictionary
        
-
        dictionary AnimationTriggerOptions {
-  AnimationTriggerBehavior behavior = "once";
-  EventTarget? eventTarget;
-  DOMString? eventType;
-  AnimationTimeline? timeline;
-  (TimelineRangeOffset or CSSNumericValue or CSSKeywordValue or DOMString) rangeStart = "normal";
-  (TimelineRangeOffset or CSSNumericValue or CSSKeywordValue or DOMString) rangeEnd = "normal";
-  (TimelineRangeOffset or CSSNumericValue or CSSKeywordValue or DOMString) exitRangeStart = "auto";
-  (TimelineRangeOffset or CSSNumericValue or CSSKeywordValue or DOMString) exitRangeEnd = "auto";
-};
-
        
-    
        
-     
        
-      
        behavior,  of type AnimationTriggerBehavior, defaulting to "once"
-      
        
-       
        The behavior of the trigger.
-  If not specified, the trigger’s behavior is once.
        
-      
        eventTarget,  of type EventTarget, nullable
-      
        
-       
        The EventTarget for an event-based animation trigger.
        
-      
        eventType,  of type DOMString, nullable
-      
        
-       
        The type for an event-based animation trigger.
        
-      
        timeline,  of type AnimationTimeline, nullable
-      
        
-       
        The timeline to which a timeline-based animation trigger is associated.
-  If not specified, the trigger is associated with default document timeline.
        
-      
        rangeStart,  of type (TimelineRangeOffset or CSSNumericValue or CSSKeywordValue or DOMString), defaulting to "normal"
-      
        
-       
        The start of the trigger’s default range.
-  If not specified, the default range’s start is set to "normal".
        
-      
        rangeEnd,  of type (TimelineRangeOffset or CSSNumericValue or CSSKeywordValue or DOMString), defaulting to "normal"
-      
        
-       
        The end of the trigger’s default range.
-  If not specified, the default range’s end is set to "normal".
        
-      
        exitRangeStart,  of type (TimelineRangeOffset or CSSNumericValue or CSSKeywordValue or DOMString), defaulting to "auto"
-      
        
-       
        The start of the trigger’s exit range.
-  If not specified, the exit range’s start is set to "auto".
        
-      
        exitRangeEnd,  of type (TimelineRangeOffset or CSSNumericValue or CSSKeywordValue or DOMString), defaulting to "auto"
-      
        
-       
        The end of the trigger’s exit range.
-  If not specified, the exit range’s end is set to "auto".
        
-     
        
-    
        
-    
        5.18. The AnimationTriggerBehavior enumeration
        
-
        enum AnimationTriggerBehavior { "once", "repeat", "alternate", "state" };
-
        
-    
        
-     
        once
-     
        
-      
        once.
        
-     
        repeat
-     
        
-      
        repeat.
        
-     
        alternate
-     
        
-      
        alternate.
        
-     
        state
-     
        
-      
        state.
        
-    
        
-    
        5.19. Model liveness
        
-    
        
-     This section is non-normative 
-     
        Regarding the section on, “ Changes made to the Web Animations model take
-effect immediately”, add:
        
-     
        
-      
        The same concept applies to more complex modifications of the
-    Web Animations model such as adding and removing children from
-    an GroupEffect.
        
-     
        
-     
        Add:
        
-     
        
-      
        
-       
        Changes made to the model using the programming interface do not cause any EffectCallback functions to be
-called
-       
        
-        
        For example, in the following code, the callback function will
-not be called until after the script block has
-completed during regular updating.
        
-        
        
-          
-
        var timesCalled = 0;
-elem.animate(function() {
-  timesCalled++;
-}, 10000);
-alert(timesCalled); // Displays ‘0’
        
-        
        
-        
        Note: Need to spec this properly somewhere.
        
-      
        
-     
        
-     
        6. Privacy Considerations
        
-     
        No privacy considerations have been reported on this module.
        
-     
        7. Security Considerations
        
-     
        No security considerations have been reported on this module.
        
-    
        
-   
        
-  
        
-  
         Conformance
        
-  
         Document conventions
        
-  
        Conformance requirements are expressed with a combination of
-    descriptive assertions and RFC 2119 terminology. The key words “MUST”,
-    “MUST NOT”, “REQUIRED”, “SHALL”, “SHALL NOT”, “SHOULD”, “SHOULD NOT”,
-    “RECOMMENDED”, “MAY”, and “OPTIONAL” in the normative parts of this
-    document are to be interpreted as described in RFC 2119.
-    However, for readability, these words do not appear in all uppercase
-    letters in this specification. 
        
-  
        All of the text of this specification is normative except sections
-    explicitly marked as non-normative, examples, and notes. [RFC2119]
        
-  
        Examples in this specification are introduced with the words “for example”
-    or are set apart from the normative text with class="example",
-    like this: 
        
-  
        
-    
-   
        This is an example of an informative example.
        
-  
        
-  
        Informative notes begin with the word “Note” and are set apart from the
-    normative text with class="note", like this: 
        
-  
        Note, this is an informative note.
        
-  
        Advisements are normative sections styled to evoke special attention and are
-    set apart from other normative text with <strong class="advisement">, like
-    this:  UAs MUST provide an accessible alternative. 
        
-  
        
-   Tests
-   
        Tests relating to the content of this specification
-                     may be documented in “Tests” blocks like this one.
-                     Any such block is non-normative.
        
-   
          
-   
          
-  
          
-  
           Conformance classes
          
-  
          Conformance to this specification
-    is defined for three conformance classes: 
          
-  
          
-   
          style sheet 
-   
          A CSS
-            style sheet. 
-   
          renderer 
-   
          A UA that interprets the semantics of a style sheet and renders
-            documents that use them. 
-   
          authoring tool 
-   
          A UA that writes a style sheet. 
-  
          
-  
          A style sheet is conformant to this specification
-    if all of its statements that use syntax defined in this module are valid
-    according to the generic CSS grammar and the individual grammars of each
-    feature defined in this module. 
          
-  
          A renderer is conformant to this specification
-    if, in addition to interpreting the style sheet as defined by the
-    appropriate specifications, it supports all the features defined
-    by this specification by parsing them correctly
-    and rendering the document accordingly. However, the inability of a
-    UA to correctly render a document due to limitations of the device
-    does not make the UA non-conformant. (For example, a UA is not
-    required to render color on a monochrome monitor.) 
          
-  
          An authoring tool is conformant to this specification
-    if it writes style sheets that are syntactically correct according to the
-    generic CSS grammar and the individual grammars of each feature in
-    this module, and meet all other conformance requirements of style sheets
-    as described in this module. 
          
-  
           Partial implementations
          
-  
          So that authors can exploit the forward-compatible parsing rules to
-    assign fallback values, CSS renderers must treat as invalid (and ignore
-    as appropriate) any at-rules, properties, property values, keywords,
-    and other syntactic constructs for which they have no usable level of
-    support. In particular, user agents must not selectively
-    ignore unsupported component values and honor supported values in a single
-    multi-value property declaration: if any value is considered invalid
-    (as unsupported values must be), CSS requires that the entire declaration
-    be ignored.
          
-  
           Implementations of Unstable and Proprietary Features
          
-  
          To avoid clashes with future stable CSS features,
-        the CSSWG recommends following best practices for the implementation of unstable features and proprietary extensions to CSS. 
          
-  
           Non-experimental implementations
          
-  
          Once a specification reaches the Candidate Recommendation stage,
-    non-experimental implementations are possible, and implementors should
-    release an unprefixed implementation of any CR-level feature they
-    can demonstrate to be correctly implemented according to spec. 
          
-  
          To establish and maintain the interoperability of CSS across
-    implementations, the CSS Working Group requests that non-experimental
-    CSS renderers submit an implementation report (and, if necessary, the
-    testcases used for that implementation report) to the W3C before
-    releasing an unprefixed implementation of any CSS features. Testcases
-    submitted to W3C are subject to review and correction by the CSS
-    Working Group. 
          
-  
          Further information on submitting testcases and implementation reports
-    can be found from on the CSS Working Group’s website at http://www.w3.org/Style/CSS/Test/.
-    Questions should be directed to the public-css-testsuite@w3.org mailing list.
          
-  
-  
          Index
          
-  
          Terms defined by this specification
          
-  
-  
          Terms defined by reference
          
-  
            
-   
          • 
-    [CSS-ANIMATIONS-1] defines the following terms:
-    
              
-     
            • <keyframe-selector>
-     
            • @keyframes
-    
            
-   
          • 
-    [CSS-ANIMATIONS-2] defines the following terms:
-    
              
-     
            • alternate
-     
            • once
-     
            • repeat
-     
            • state
-    
            
-   
          • 
-    [CSS-DISPLAY-4] defines the following terms:
-    
              
-     
            • visibility
-    
            
-   
          • 
-    [CSS-EASING-1] defines the following terms:
-    
              
-     
            • linear timing function
-    
            
-   
          • 
-    [CSS-EASING-2] defines the following terms:
-    
              
-     
            • before flag
-     
            • timing function
-    
            
-   
          • 
-    [CSS-PSEUDO-4] defines the following terms:
-    
              
-     
            • CSSPseudoElement
-    
            
-   
          • 
-    [CSS-TYPED-OM-1] defines the following terms:
-    
              
-     
            • CSSKeywordValue
-     
            • CSSNumberish
-     
            • CSSNumericValue
-     
            • value
-    
            
-   
          • 
-    [CSS-VALUES-4] defines the following terms:
-    
              
-     
            • <time>
-     
            • value accumulation
-    
            
-   
          • 
-    [CSSOM-1] defines the following terms:
-    
              
-     
            • CSSOMString
-    
            
-   
          • 
-    [DOM] defines the following terms:
-    
              
-     
            • Element
-     
            • Event
-     
            • EventInit
-     
            • EventTarget
-     
            • target
-     
            • type
-    
            
-   
          • 
-    [HTML] defines the following terms:
-    
              
-     
            • canvas
-     
            • perform a microtask checkpoint
-     
            • relevant realm
-    
            
-   
          • 
-    [INFRA] defines the following terms:
-    
              
-     
            • exist
-    
            
-   
          • 
-    [SCROLL-ANIMATIONS-1] defines the following terms:
-    
              
-     
            • animation attachment range
-     
            • animation-range-end
-     
            • animation-range-start
-     
            • html-processing-model-event-loops
-     
            • scroll-driven animations
-    
            
-   
          • 
-    [WEB-ANIMATIONS-1] defines the following terms:
-    
              
-     
            • Animatable
-     
            • Animation
-     
            • Animation()
-     
            • AnimationEffect
-     
            • AnimationTimeline
-     
            • ComputedEffectTiming
-     
            • EffectTiming
-     
            • KeyframeAnimationOptions
-     
            • KeyframeEffect
-     
            • KeyframeEffectOptions
-     
            • OptionalEffectTiming
-     
            • active phase
-     
            • active time
-     
            • active-after boundary time
-     
            • after phase
-     
            • animation
-     
            • animation direction
-     
            • animation effect
-     
            • Apply any pending playback rate
-     
            • associated effect
-     
            • associated effect end
-     
            • before phase
-     
            • before-active boundary time
-     
            • cancel()
-     
            • composite
-     
            • current finished promise
-     
            • current iteration
-     
            • current ready promise
-     
            • current time (for animation)
-     
            • current time (for timeline)
-     
            • default document timeline
-     
            • directed progress
-     
            • direction
-     
            • easing
-     
            • effect value
-     
            • effective playback rate
-     
            • end delay
-     
            • fill
-     
            • fill mode
-     
            • finished
-     
            • hold time
-     
            • idle
-     
            • in effect
-     
            • inactive timeline
-     
            • iteration count
-     
            • iteration duration
-     
            • iteration progress
-     
            • iteration start
-     
            • iterationStart
-     
            • iterations
-     
            • keyframe effect
-     
            • monotonically increasing
-     
            • monotonically increasing timeline
-     
            • not animatable
-     
            • overall progress
-     
            • pause an animation
-     
            • pause()
-     
            • paused
-     
            • pending pause task
-     
            • pending playback rate
-     
            • play state
-     
            • play()
-     
            • playback direction
-     
            • reverse an animation
-     
            • reverse()
-     
            • running
-     
            • simple iteration progress
-     
            • source
-     
            • start time
-     
            • target element
-     
            • target property
-     
            • time value
-     
            • timeline
-     
            • transformed progress
-     
            • unresolved
-     
            • update an animation's finished state
-     
            • update animations and send events
-     
            • update the timing properties of an animation effect
-    
            
-   
          • 
-    [WEBIDL] defines the following terms:
-    
              
-     
            • DOMException
-     
            • DOMString
-     
            • Exposed
-     
            • InvalidStateError
-     
            • a new promise
-     
            • any
-     
            • double
-     
            • resolve a promise
-     
            • sequence
-     
            • throw
-     
            • undefined
-     
            • unrestricted double
-     
            • unsigned long
-    
            
-  
          
-  
          References
          
-  
          Normative References
          
-  
          
-   
          [CSS-ANIMATIONS-1]
-   
          David Baron; et al. CSS Animations Level 1. URL: https://drafts.csswg.org/css-animations/
-   
          [CSS-ANIMATIONS-2]
-   
          David Baron; Brian Birtles. CSS Animations Level 2. URL: https://drafts.csswg.org/css-animations-2/
-   
          [CSS-DISPLAY-4]
-   
          Elika Etemad; Tab Atkins Jr.. CSS Display Module Level 4. URL: https://drafts.csswg.org/css-display/
-   
          [CSS-EASING-1]
-   
          Brian Birtles; Dean Jackson; Matt Rakow. CSS Easing Functions Level 1. URL: https://drafts.csswg.org/css-easing/
-   
          [CSS-EASING-2]
-   
          CSS Easing Functions Level 2. URL: https://drafts.csswg.org/css-easing/
-   
          [CSS-PSEUDO-4]
-   
          Daniel Glazman; Elika Etemad; Alan Stearns. CSS Pseudo-Elements Module Level 4. URL: https://drafts.csswg.org/css-pseudo-4/
-   
          [CSS-TYPED-OM-1]
-   
          Tab Atkins Jr.; François Remy. CSS Typed OM Level 1. URL: https://drafts.css-houdini.org/css-typed-om-1/
-   
          [CSS-VALUES-4]
-   
          Tab Atkins Jr.; Elika Etemad. CSS Values and Units Module Level 4. URL: https://drafts.csswg.org/css-values-4/
-   
          [CSSOM-1]
-   
          Daniel Glazman; Emilio Cobos Álvarez. CSS Object Model (CSSOM). URL: https://drafts.csswg.org/cssom/
-   
          [DOM]
-   
          Anne van Kesteren. DOM Standard. Living Standard. URL: https://dom.spec.whatwg.org/
-   
          [HTML]
-   
          Anne van Kesteren; et al. HTML Standard. Living Standard. URL: https://html.spec.whatwg.org/multipage/
-   
          [INFRA]
-   
          Anne van Kesteren; Domenic Denicola. Infra Standard. Living Standard. URL: https://infra.spec.whatwg.org/
-   
          [RFC2119]
-   
          S. Bradner. Key words for use in RFCs to Indicate Requirement Levels. March 1997. Best Current Practice. URL: https://datatracker.ietf.org/doc/html/rfc2119
-   
          [SCROLL-ANIMATIONS-1]
-   
          Brian Birtles; et al. Scroll-driven Animations. URL: https://drafts.csswg.org/scroll-animations-1/
-   
          [WEB-ANIMATIONS-1]
-   
          Brian Birtles; et al. Web Animations. URL: https://drafts.csswg.org/web-animations-1/
-   
          [WEBIDL]
-   
          Edgar Chen; Timothy Gu. Web IDL Standard. Living Standard. URL: https://webidl.spec.whatwg.org/
-  
          
-  
          IDL Index
          
-
          [Exposed=Window]
-partial interface AnimationTimeline {
-    readonly attribute CSSNumberish? currentTime;
-    readonly attribute CSSNumberish? duration;
-    Animation play (optional AnimationEffect? effect = null);
-};
-
-[Exposed=Window]
-partial interface Animation {
-    attribute CSSNumberish?       startTime;
-    attribute CSSNumberish?       currentTime;
-    attribute AnimationTrigger?   trigger;
-    attribute (TimelineRangeOffset or CSSNumericValue or CSSKeywordValue or DOMString) rangeStart;
-    attribute (TimelineRangeOffset or CSSNumericValue or CSSKeywordValue or DOMString) rangeEnd;
-    readonly attribute double? overallProgress;
-};
-
-[Exposed=Window]
-partial interface AnimationEffect {
-    // Timing hierarchy
-    readonly attribute GroupEffect?     parent;
-    readonly attribute AnimationEffect? previousSibling;
-    readonly attribute AnimationEffect? nextSibling;
-
-    undefined before (AnimationEffect... effects);
-    undefined after (AnimationEffect... effects);
-    undefined replace (AnimationEffect... effects);
-    undefined remove ();
-};
-
-partial dictionary EffectTiming {
-    double delay;
-    double endDelay;
-    double playbackRate = 1.0;
-    (unrestricted double or CSSNumericValue or DOMString) duration = "auto";
-};
-
-partial dictionary OptionalEffectTiming {
-    double playbackRate;
-};
-
-partial dictionary ComputedEffectTiming {
-    CSSNumberish         startTime;
-    CSSNumberish         endTime;
-    CSSNumberish         activeDuration;
-    CSSNumberish?        localTime;
-};
-
-enum FillMode { "none", "forwards", "backwards", "both", "auto" };
-
-[Exposed=Window]
-interface GroupEffect {
-  constructor(sequence<AnimationEffect>? children,
-              optional (unrestricted double or EffectTiming) timing = {});
-
-  readonly attribute AnimationNodeList  children;
-  readonly attribute AnimationEffect?   firstChild;
-  readonly attribute AnimationEffect?   lastChild;
-  GroupEffect clone ();
-
-  undefined prepend (AnimationEffect... effects);
-  undefined append (AnimationEffect... effects);
-};
-
-[Exposed=Window]
-interface AnimationNodeList {
-    readonly attribute unsigned long length;
-    getter AnimationEffect? item (unsigned long index);
-};
-
-[Exposed=Window]
-interface SequenceEffect : GroupEffect {
-  constructor(sequence<AnimationEffect>? children,
-              optional (unrestricted double or EffectTiming) timing = {});
-
-  SequenceEffect clone ();
-};
-
-partial interface KeyframeEffect {
-    attribute IterationCompositeOperation    iterationComposite;
-};
-
-partial dictionary KeyframeEffectOptions {
-    IterationCompositeOperation iterationComposite = "replace";
-};
-
-enum IterationCompositeOperation { "replace", "accumulate" };
-
-callback EffectCallback = undefined (double? progress,
-                                (Element or CSSPseudoElement) currentTarget,
-                                Animation animation);
-
-dictionary TimelineRangeOffset {
-  CSSOMString? rangeName;
-  CSSNumericValue offset;
-};
-
-partial dictionary KeyframeAnimationOptions {
-    (TimelineRangeOffset or CSSNumericValue or CSSKeywordValue or DOMString) rangeStart = "normal";
-    (TimelineRangeOffset or CSSNumericValue or CSSKeywordValue or DOMString) rangeEnd = "normal";
-    AnimationTrigger? trigger;
-};
-
-[Exposed=Window]
-interface AnimationPlaybackEvent : Event {
-    constructor(DOMString type, optional AnimationPlaybackEventInit
-    eventInitDict = {});
-    readonly attribute CSSNumberish? currentTime;
-    readonly attribute CSSNumberish? timelineTime;
-};
-dictionary AnimationPlaybackEventInit : EventInit {
-    CSSNumberish? currentTime = null;
-    CSSNumberish? timelineTime = null;
-};
-
-[Exposed=Window]
-interface AnimationTrigger {
-  constructor(optional AnimationTriggerOptions options = {});
-  attribute AnimationTriggerBehavior behavior;
-  attribute EventTarget? eventTarget;
-  attribute DOMString? eventType;
-  attribute AnimationTimeline? timeline;
-  attribute any rangeStart;
-  attribute any rangeEnd;
-  attribute any exitRangeStart;
-  attribute any exitRangeEnd;
-};
-
-dictionary AnimationTriggerOptions {
-  AnimationTriggerBehavior behavior = "once";
-  EventTarget? eventTarget;
-  DOMString? eventType;
-  AnimationTimeline? timeline;
-  (TimelineRangeOffset or CSSNumericValue or CSSKeywordValue or DOMString) rangeStart = "normal";
-  (TimelineRangeOffset or CSSNumericValue or CSSKeywordValue or DOMString) rangeEnd = "normal";
-  (TimelineRangeOffset or CSSNumericValue or CSSKeywordValue or DOMString) exitRangeStart = "auto";
-  (TimelineRangeOffset or CSSNumericValue or CSSKeywordValue or DOMString) exitRangeEnd = "auto";
-};
-
-enum AnimationTriggerBehavior { "once", "repeat", "alternate", "state" };
-
-
          
-  
          Issues Index
          
-  
          
-   
          
-     This is not quite right. If old effect is attached to another
-  animation in the same task then we should probably not do an extra
-  callback with unresolved. 
-    
          The definition of when custom effects gets called needs to be
-  audited and probably rewritten.
          
-     ↵
-   
          
-   
           The procedure to play an animation needs to include scheduling a task for
-updating custom effects. ↵
          
-   
           The procedures for calling custom effects need to be reworked.
-       Currently they probably involve calling too often for changes that
-       could be coalesced. ↵
          
-   
           This procedure is not strictly correct for a paused
-animation if the animation’s current time is explicitly set, as this can
-introduce a lead or lag, between the timeline’s current time and animation’s current time. ↵
          
-   
           This procedure can likely be simplified, and instead determine if at a
-scrolling boundary regardless of playback rate or start time. The surprising
-behavior that this is trying to prevent is an animation becoming inactive
-precisely at the scroll limit, alleviating the need for set a fill-mode with
-a ScrollTimeline. Checking if timeline current time is
-0 or timeline duration may be sufficient. ↵
          
-   
          
-     Currently timing functions that generate results outside the
-range [0, 1] will behave unexpectedly when applied to group
-effects, as children will increase iterations or enter into fill mode
-rather than continuing to extrapolate along their defined behavior
-(which is what they would do if the timing function applied to them
-directly). 
-    
          To fix this it is possible we will wish to introduce ‘overflow’
-fill modes that respond to time values larger than or smaller than the
-active time range by extrapolating rather than filling.
          
-    
          See section
-15 (Overflowing fill) of minuted discussion from Tokyo 2013 F2F.
          
-     ↵
-   
          
-   
          
-     Currently, the set of timing functions allowed on
-a group effect is not restricted.
-This has raised concern about complexity of implementation and also
-complexity of behavior with regards to fill modes.
-As a result, allowing the full set of timing functions on group
-effects is considered at risk. 
-    
          Alternatives are to either restrict timing functions on group
-effects to the linear timing function or to a set of
-“simple” timing functions that have properties that
-alleviate some of the concerns with the more complex timing
-functions.
          
-    
          See section
-2 of the discussion from August 2013.
          
-     ↵
-   
          
-   
           The "associated animation of an animation effect" definition used when
-sorting animation effects needs to be revised to use the associated with an animation definition introduced in this level of the specification so that it
-correctly handles group effects. ↵
          
-   
           This whole feature needs to be revisited. The current thinking is that
-       rather than having custom effects, we should simply have an onupdate callback on each animation effect.  That
-       would allow, for example, augmenting an existing effect with a function
-       that performs logging or triggers additional actions at certain times.
-       With the current arrangement, doing this would require adding a parent
-       group just to achieve this. ↵
          
-   
           It needs to be called whenever timing properties are updated too, right? ↵
          
-   
          
-     There may be use cases where an action needs to be triggered at
-a specific point in an animation tree.
-In many cases this can be achieved by inserting a custom effect with
-a step-start easing that spans the period during which the action
-should be triggered.
-However, this can impose additional layout requirements on the
-content which might be cumbersome to accommodate. 
-    
          Some alternatives under consideration:
          
-    
            
-     
          • 
-      
            Additional calling conditions could be defined to accommodate
-zero-width custom effects. For example, it could be required
-that the callback be called if (given infinite precision) there
-was a time between the previous and current update times that
-aligned with the custom effect.
            
-     
          • 
-      
            Instead of adding special calling conditions to custom effects,
-a new type of animation effect, Trigger, could be introduced. The
-trigger would only ever act as a zero-width custom effect as
-described above, its constructor would take a callback function,
-but not require a target or timing. It could also specify other
-calling conventions, for example whether it should only trigger
-in a specific playback direction.
            
-    
          
-     ↵
-   
          
-   
           Need to define this more precisely.
-    Are styles flushed?
-    Presumably they are.
-    Can we suspend reflow for the duration of executing the script-based
-    animation effects and just do it once afterwards? ↵
          
-   
           Should there be any effect of triggers on scroll-driven animations? ↵
          
-   
           Do we need a formal resolution on the spec of the idle state? ↵
          
-   
           Do we need a proper definition for "behavior types primary/inverse"? ↵
          
-   
           Should we specify that that exit range’s edges can only be equal to or greater than the default range’s edges? ↵
          
-   
           Should it be the correct/expected behavior for the "did trigger" flag to reset to false if the timeline becomes idle again? ↵
          
-   
           It has been suggested this method be renamed, or even removed
-(see TAG
-feedback). ↵
          
-   
           Need to define the start behavior when effect is null. ↵
          
-   
           Should this be parentGroup? ↵
          
-   
           The remove() method can be used to remove an effect from
-either its parent group or animation. Should we keep it in level 1 and define it
-simply as removing the animation from its animation? ↵
          
-   
           Should not use type `any` for the range attributes. ↵
          
-   
           Need to specify the behavior of setters. ↵
          
-  
          
-  
          
-   MDN
-   
          
-    
          KeyframeEffect/iterationComposite
          
-    
          
-     Firefox80+Safari16.4+ChromeNone
-     
          
-     Opera?EdgeNone
-     
          
-     Edge (Legacy)?IENone
-     
          
-     Firefox for Android?iOS Safari?Chrome for Android?Android WebView?Samsung Internet?Opera Mobile?
-    
          
-   
          
-  
          
-
-
-
-
-
-
\ No newline at end of file

From a26f516759b9af915d496f0b3a0ddb4524146eca Mon Sep 17 00:00:00 2001
From: Stefan Zager 
Date: Tue, 10 Jun 2025 15:15:39 -0700
Subject: [PATCH 09/11] fix whitespace

---
 css-animations-2/Overview.bs | 4 ++--
 web-animations-2/Overview.bs | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/css-animations-2/Overview.bs b/css-animations-2/Overview.bs
index 92d85a6e0ed..06ad129cd57 100644
--- a/css-animations-2/Overview.bs
+++ b/css-animations-2/Overview.bs
@@ -970,9 +970,9 @@ The 'animation-trigger-name' property associates an element with
 all elements having an 'animation-trigger-event' property with
 a trigger name matching a value in this element's 'animation-trigger-name'.
 When an {{Event}} is dispatched with this element as {{Event/target}},
-and with {{Event/type}} matching the <> of a clause in the 
+and with {{Event/type}} matching the <> of a clause in the
 'animation-trigger-event' property of another element, animation
-playback on the other element is modified according to its 
+playback on the other element is modified according to its
 'animation-trigger-behavior' property, as described for
 [=event-based animation triggers=].
 
diff --git a/web-animations-2/Overview.bs b/web-animations-2/Overview.bs
index 177ce16745c..b8853176d3b 100644
--- a/web-animations-2/Overview.bs
+++ b/web-animations-2/Overview.bs
@@ -2386,7 +2386,7 @@ attribute, while an event-based animation trigger will have non-empty
 
 An [=event-based animation trigger=] executes its {{AnimationTrigger/behavior}}
 when a [=qualifying event=] is dispatched.
-A qualifying event is 
+A qualifying event is
 an {{Event!!interface}} with {{Event/type}} matching the trigger's {{AnimationTrigger/eventType}}
 and {{Event/target}} matching the trigger's {{AnimationTrigger/eventTarget}}.
 
@@ -3758,7 +3758,7 @@ Issue: Should not use type `any` for the range attributes.
       For an [=event-based animation trigger=], this is
       matched against a dispatched event's {{Event/target}}
       to determine whether it's a [=animation trigger/qualifying event=].
-      
+
   : eventType
   ::
       For an [=event-based animation trigger=], this is

From b1a5920c46f4d21879c9990c9497d7a647504820 Mon Sep 17 00:00:00 2001
From: Stefan Zager 
Date: Thu, 12 Jun 2025 10:29:24 -0700
Subject: [PATCH 10/11] Fix behavior spec for "alternate"

---
 web-animations-2/Overview.bs | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/web-animations-2/Overview.bs b/web-animations-2/Overview.bs
index b8853176d3b..ca22461fef2 100644
--- a/web-animations-2/Overview.bs
+++ b/web-animations-2/Overview.bs
@@ -2410,7 +2410,10 @@ and the current [=play state=] of the animation:
   
 
   
          ''animation-trigger-type/alternate''
          
-  
          Perform the actions specified for the {{Animation/reverse}} function.
          
+  
          If [=play state=] is [=play state/idle=],
+      perform the actions specified for the {{Animation/play}} function.
+      Otherwise, perform the actions specified for the {{Animation/reverse}} function.
+  
          
 
   
          ''animation-trigger-type/state''
          
   
          If the [=play state=] is [=play state/running=],

From 172ebc99381b547efe179f5b091459059f8e65a8 Mon Sep 17 00:00:00 2001
From: Stefan Zager 
Date: Tue, 24 Jun 2025 14:34:06 -0700
Subject: [PATCH 11/11] review nits

---
 css-animations-2/Overview.bs | 35 +++++++++++++++++------------------
 1 file changed, 17 insertions(+), 18 deletions(-)

diff --git a/css-animations-2/Overview.bs b/css-animations-2/Overview.bs
index 06ad129cd57..4b6a09829f3 100644
--- a/css-animations-2/Overview.bs
+++ b/css-animations-2/Overview.bs
@@ -770,8 +770,6 @@ for an [=animation trigger=] that enters its [=animation trigger/active interval
 
 The behavior of each value is defined in [[web-animations-2#trigger-behaviors]].
 
-Issue: Should 'animation-trigger-behavior' allow multiple values (currently it does)?
-
 ## The 'animation-trigger-timeline' property ## {#animation-trigger-timeline}
 
 The 'animation-trigger-timeline' property specifies the timeline
@@ -964,20 +962,21 @@ The values of 'animation-trigger-exit-range-start' have the following meaning:
                         it defaults to 100%.
 
          
 
-## The 'animation-trigger-name' property ## {#animation-trigger-name}
+## The 'trigger-name' property ## {#trigger-name}
 
-The 'animation-trigger-name' property associates an element with
-all elements having an 'animation-trigger-event' property with
-a trigger name matching a value in this element's 'animation-trigger-name'.
-When an {{Event}} is dispatched with this element as {{Event/target}},
-and with {{Event/type}} matching the <> of a clause in the
-'animation-trigger-event' property of another element, animation
-playback on the other element is modified according to its
+The 'trigger-name' property causes an [=event-based animation trigger=] to be created
+for any animation whose target element has an 'animation-trigger-event' property
+with matching <>.
+When an {{Event}} is dispatched with the element having the matching 'trigger-name' property
+as {{Event/target}},
+and with {{Event/type}} matching the <> of the
+'animation-trigger-event' property on the animation target, the animation's
+playback is modified according to its
 'animation-trigger-behavior' property, as described for
 [=event-based animation triggers=].
 
 
          -Name: animation-trigger-name
+Name: trigger-name
 Value: none | [ <> ]#
 Initial: none
 Applies to: all elements
@@ -995,17 +994,17 @@ The 'animation-trigger-event' property is used to specify the criteria
 for [=qualifying events=] that cause an [=event-based animation trigger=]
 to perform its effect on its associated [=animation=]. It consists of two parts:
 a <> that is matched against the {{Event/type}} of a dispatched {{Event}},
-and an <> that is matched against the 'animation-trigger-name' property
+and an <> that is matched against the 'trigger-name' property
 of the event's {{Event/target}}. If both criteria match for a given event
 the trigger will perform its effect on its associated [=animation=].
 
-If the <> is omitted from <> declaration,
+If the <> is omitted from <> declaration,
 {{Event/target}} is matched against the element
 having the 'animation-trigger-event' property itself.
 
 
           Name: animation-trigger-event
-Value: none | [ <> ]#
+Value: none | [ <> ]#
 Initial: none
 Applies to: all elements
 Inherited: no
@@ -1014,7 +1013,7 @@ Computed value: as specified
 Animation type: not animatable
 
          
 
-
          <single-trigger-event> = event ( <> <>? )
          
+
          <single-event-trigger> = event ( <> <>? )
          
 
          <trigger-event-type> = <>
          
 
 ## The 'animation-trigger' property ## {#animation-trigger}
@@ -1027,7 +1026,7 @@ together in a single declaration, specifying the [=animation trigger=] for an an
 
 
           Name: animation-trigger
-Value: auto | none | <>#
+Value: <>#
 Initial: see individual properties
 Applies to: all elements
 Inherited: no
@@ -1038,9 +1037,9 @@ Animation Type: not animatable
 
          
 
 
          -<single-animation-trigger> = [ <> | [ <> | <> ] ] <>?
+<single-animation-trigger> = <> || [ <> | <> ]
 
-<single-timeline-trigger> = [ <> | <> | <> ] [ normal | <> | <> <>? ]{0,4}
+<single-timeline-trigger> = none | auto | [ <> | <> | <> ] [ normal | <> | <> <>? ]{0,4}
 
          
 
 # Animation Events # {#events}