diff --git a/css-animations-2/Overview.bs b/css-animations-2/Overview.bs
index 669625767cab..ddff6928e65a 100644
--- a/css-animations-2/Overview.bs
+++ b/css-animations-2/Overview.bs
@@ -68,6 +68,13 @@ spec:web-animations-1; type:dfn;
     text:start delay
     text:target element
     text:unresolved
+spec:web-animations-2; type:dfn;
+    text:active interval; for:animation trigger
+    text:default range
+    text:exit range
+spec:scroll-animations-1; type:dfn;
+	text:animation-range-start
+	text:animation-range-end
 </pre>
 
 <h2 id="delta">Delta specification</h2>
@@ -702,7 +709,279 @@ The 'animation' shorthand property syntax is as follows:
 
 <span class=prod><dfn>&lt;single-animation></dfn> = <<'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>></span>
 
+<h2 id="animation-triggers">
+Declaring Animation Triggers</h2>
 
+    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-type' property ## {#animation-trigger-type}
+
+The 'animation-trigger-type' property specifies the [=animation trigger type=]
+of the [=animation trigger=].
+
+<pre class='propdef'>
+Name: animation-trigger-type
+Value: <<single-animation-trigger-type>>#
+Initial: once
+Applies to: all elements
+Inherited: no
+Percentages: N/A
+Computed value: list, each item a keyword as specified
+Animation type: not animatable
+Canonical order: per grammar
+</pre>
+
+<span class=prod><dfn>&lt;single-animation-trigger-type></dfn> = once | repeat | alternate | state</span>
+
+The values of 'animation-trigger-type' have the following meaning
+for an [=animation trigger=] that enters its [=animation trigger/active interval|active interval=]:
+
+<dl dfn-type=value dfn-for=animation-trigger-type>
+	<dt><dfn>once</dfn>
+	<dd>
+		The animation is triggered and played once and only once.
+
+	<dt><dfn>repeat</dfn>
+	<dd>
+		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.
+
+	<dt><dfn>alternate</dfn>
+	<dd>
+		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.
+
+	<dt><dfn>state</dfn>
+	<dd>
+		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.
+</dl>
+
+The behavior of each value is defined in [[web-animations-2#trigger-types]].
+
+## The 'animation-trigger-timeline' property ## {#animation-trigger-timeline}
+
+The 'animation-trigger-timeline' property specifies the <a>timeline</a>
+of the animation’s associated [=animation trigger=].
+
+<pre class='propdef'>
+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 ''single-animation-timeline/none'',
+  the keyword ''single-animation-timeline/auto'',
+  a case-sensitive [=css identifier=],
+  a computed ''scroll()'' function,
+  or
+  a computed ''view()'' function
+Canonical order: per grammar
+Animation Type: not animatable
+</pre>
+
+The values of 'animation-trigger-timeline' have the same meaning as those of 'animation-timeline'.
+
+Issue: Probably a trigger with timeline "none" is under-specified here. Need to clarify what it means.
+
+## The 'animation-trigger-range' property ## {#animation-trigger-range}
+
+<pre class="propdef shorthand">
+  Name: animation-trigger-range
+  Value: [ <<'animation-trigger-range-start'>> <<'animation-trigger-range-end'>>? ]#
+</pre>
+
+The 'animation-trigger-range' property is a [=shorthand property|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#trigger-ranges]].
+
+## The 'animation-trigger-range-start' property ## {#animation-trigger-range-start}
+
+<pre class="propdef">
+  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 ''animation-trigger-range-start/normal'' or a timeline range and progress percentage
+  Animation type: not animatable
+</pre>
+
+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'.
+
+## The 'animation-trigger-range-end' property ## {#animation-trigger-range-end}
+
+<pre class="propdef">
+  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 ''animation-trigger-range-end/normal'' or a timeline range and progress percentage
+  Animation type: not animatable
+</pre>
+
+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'.
+
+## The 'animation-trigger-exit-range' property ## {#animation-trigger-exit-range}
+
+<pre class="propdef shorthand">
+  Name: animation-trigger-exit-range
+  Value: [ <<'animation-trigger-exit-range-start'>> <<'animation-trigger-exit-range-end'>>? ]#
+</pre>
+
+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.
+
+The [=exit range=] replaces the [=default range=] once the [=animation trigger=]’s
+[=animation trigger/active interval|active interval=] is entered,
+and redefines the extent of the [=animation trigger=]’s [=animation trigger/active interval|active interval=].
+It is used to extend the [=default range=], for example,
+in cases where exiting the [=animation trigger/active interval|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#trigger-ranges]].
+
+## The 'animation-trigger-exit-range-start' property ## {#animation-trigger-exit-range-start}
+
+<pre class="propdef">
+  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 ''animation-trigger-exit-range-start/normal'' or a timeline range and progress percentage
+  Animation type: not animatable
+</pre>
+
+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:
+
+<dl dfn-for="animation-trigger-exit-range-start" dfn-type=value>
+	<dt><dfn>auto</dfn>
+	<dd>
+		The start of the trigger’s [=exit range=]
+		is equal to the start of its [=default range=].
+
+	<dt><dfn>normal</dfn>
+	<dd>
+		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.
+
+	<dt><dfn><<length-percentage>></dfn>
+	<dd>
+		The [=exit range=] starts
+		at the specified point on the [=timeline=]
+		measuring from the start of the timeline.
+
+	<dt><dfn><<timeline-range-name>> <<length-percentage>>?</dfn>
+	<dd>
+		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%.
+</dl>
+
+## The 'animation-trigger-exit-range-end' property ## {#animation-trigger-exit-range-end}
+
+<pre class="propdef">
+  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 ''animation-trigger-exit-range-end/normal'' or a timeline range and progress percentage
+  Animation type: not animatable
+</pre>
+
+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:
+
+<dl dfn-for="animation-trigger-exit-range-end" dfn-type=value>
+	<dt><dfn>auto</dfn>
+	<dd>
+		The end of the trigger’s [=exit range=]
+		is equal to the end of its [=default range=].
+
+	<dt><dfn>normal</dfn>
+		<dd>
+			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.
+
+		<dt><dfn><<length-percentage>></dfn>
+		<dd>
+			The [=exit range=] ends
+			at the specified point on the [=timeline=]
+			measuring from the start of the timeline.
+
+		<dt><dfn><<timeline-range-name>> <<length-percentage>>?</dfn>
+		<dd>
+			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%.
+</dl>
+
+## The 'animation-trigger' property ## {#animation-trigger}
+
+The 'animation-trigger' property is a [=shorthand property|shorthand=]
+that sets 'animation-trigger-type', '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.
+
+<pre class='propdef'>
+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
+</pre>
+
+<pre class=prod>
+<dfn>&lt;single-animation-trigger></dfn> = <<single-animation-trigger-type>> || [ none | auto | [ [ <<dashed-ident>> | <<scroll()>> | <<view()>> ] [ normal | <<length-percentage>> | <<timeline-range-name>> <<length-percentage>>? ]{0,4} ] ]
+</pre>
 
 # Animation Events # {#events}
 
diff --git a/web-animations-2/Overview.bs b/web-animations-2/Overview.bs
index bf406db0f074..10d2b174d1c4 100644
--- a/web-animations-2/Overview.bs
+++ b/web-animations-2/Overview.bs
@@ -85,7 +85,7 @@ Abstract: This specification defines a model for synchronization and
     specifications will define declarative means for exposing these
     features.
 Ignored Vars: auto-rewind, current direction, index, initial progress,
-    timeline, new timeline, t, going forwards
+    timeline, new timeline, t, going forwards, did trigger
 </pre>
 <pre class="anchors">
 urlPrefix: https://drafts.csswg.org/web-animations-1/; type: dfn; spec: web-animations-1
@@ -122,6 +122,7 @@ urlPrefix: https://drafts.csswg.org/web-animations-1/; type: dfn; spec: web-anim
     text: play an animation
     text: playback direction
     text: pause an animation
+    text: reverse an animation
     text: ready
     text: set the timeline of an animation
     text: simple iteration progress
@@ -133,6 +134,7 @@ urlPrefix: https://drafts.csswg.org/web-animations-1/; type: dfn; spec: web-anim
     text: update the timing properties of an animation effect
     text: unresolved
     text: update an animation's finished state
+    text: default document timeline
 urlPrefix: https://webidl.spec.whatwg.org/; type: dfn; spec: webidl
     text: resolve a promise; url: resolve
 urlPrefix: http://www.ecma-international.org/ecma-262/6.0/#sec-; type: dfn; spec: ecma-262
@@ -221,6 +223,13 @@ Add:
 > case, the timeline is a <dfn lt="progress-based timeline">progress-based
 > timeline</dfn>, and its [=timeline duration=] is 100%.
 
+<h3 id="animation-frame-loop">Animation Frames</h3>
+
+Update the note on the first step of the algorithm by adding the following bullet:
+
+> * Updating the [=animation trigger state|state=] of [=animation triggers=]
+>   by running the [=updating animation trigger state=] procedure.
+
 <h3 id="animations">Animations</h3>
 
 Append:
@@ -2353,6 +2362,204 @@ Items sorted earlier are executed before those sorted later.
 
 </ins>
 
+Animation Triggers {#triggers}
+-----------------
+
+### Overview ### {#triggers-overview}
+
+An <dfn export>animation trigger</dfn> is used to control the playback
+of its associated [=animation=] for time-driven animations.
+Like animations, [=animation triggers=] are associated with a [=timeline=]
+and are attached to an [=animation attachment range|attachment range=].
+
+Issue: Should there be any effect of triggers on scroll-driven animations?
+
+### Animation Trigger Types ### {#trigger-types}
+
+The behavior an [=animation trigger=] applies to its associated [=animation=]’s
+playback is defined by its <dfn export>animation trigger type</dfn>, and
+depending on its [=animation trigger state|state=] can apply one of two
+distinct behavior types: ''primary'' or ''inverse''.
+Given an internal |did trigger| flag, the values of [=animation trigger type=]
+can be one of the following:
+
+<dl dfn-type=value dfn-for='animation trigger type'>
+  <dt><dfn>once</dfn>
+  <dd>
+    The ''primary'' behavior is [=play an animation|triggering=] the associated animation.
+
+  <dt><dfn>repeat</dfn>
+  <dd>
+    The ''primary'' behavior is [=play an animation|triggering=] the associated animation.
+    The ''inverse'' behavior is resetting the associated [=animation effect=] back to
+    its [=animation effect/before phase=] and its associated animation’s [=animation/start time=] to zero.
+
+  <dt><dfn>alternate</dfn>
+  <dd>
+    <dl class=switch>
+      : if the |did trigger| flag is false,
+      ::
+        The ''primary'' behavior is [=play an animation|triggering=] the associated animation.
+
+      : Otherwise,
+      ::
+        The ''primary'' behavior is [=reverse an animation|reversing=] the associated animation.
+
+    </dl>
+
+    The ''inverse'' behavior is [=reverse an animation|reversing=] the associated animation.
+
+  <dt><dfn>state</dfn>
+  <dd>
+    The ''primary'' behavior is [=play an animation|triggering or resuming=] the associated animation.
+    The ''inverse'' behavior is [=pause an animation|pausing=] the associated animation.
+</dl>
+
+Issue: Need to bike-shed the name for type "state" type.
+
+Issue: Do we need a proper definition for "behavior types primary/inverse"?
+
+### Animation Trigger State ### {#trigger-state}
+
+An [=animation trigger=] |trigger| with [=animation trigger type=] |type|
+and an associated [=animation=] |animation|
+has an internal <dfn export lt="animation trigger state">state</dfn> which
+controls the applied behavior type. This state has discrete values
+which can be one of the following:
+
+<dl dfn-for="animation trigger state" dfn-type=value>
+  <dt><dfn>idle</dfn>
+  <dd>
+    The [=animation effect=] associated |animation| remains in
+    its [=animation effect/before phase=] and stays at zero [=animation/start time=].
+
+  <dt><dfn>primary</dfn>
+  <dd>
+    When switched to this value the ''primary'' behavior type defined by |type| is applied to |animation|.
+
+  <dt><dfn>inverse</dfn>
+  <dd>
+    When switched to this value the ''inverse'' behavior type defined by |type| is applied to |animation|.
+
+</dl>
+
+Issue: Do we need a formal resolution on the spec of the idle state?
+
+### Animation Trigger Active Interval ### {#trigger-active-interval}
+
+Each [=animation trigger=] defines an <dfn for="animation trigger">active interval</dfn>
+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 ''primary''.
+
+### Animation Trigger Ranges ### {#trigger-ranges}
+
+An [=animation trigger=] has two [=animation attachment range|ranges=],
+the <dfn>default range</dfn> and the <dfn>exit range</dfn>.
+The [=exit range=] is used to replace [=default range=] and extend
+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:
+
+<dl class=switch>
+  : If |state| is ''animation trigger state/primary'',
+  ::
+    Then |interval| is set to [=exit range=].
+
+  : Otherwise,
+  ::
+    |interval| is [=default range=].
+
+</dl>
+
+### Setting a Trigger of an Animation ### {#setting-animation-trigger}
+
+  <div algorithm="Setting a Trigger of an Animation">
+    The procedure of <dfn>setting a trigger of an animation</dfn> |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. Run the procedure to [=updating animation trigger state=] for |trigger|.
+  </div>
+
+### Setting the timeline of an Animation Trigger ### {#setting-trigger-timeline}
+
+  <div algorithm="setting timeline of animation trigger">
+    The procedure of <dfn>setting timeline of animation trigger</dfn> |trigger|,
+    to |new timeline| which may be <code>null</code>, is as follows:
+
+    1. Let |old timeline| be the current [=timeline=] of |trigger|, if any.
+
+    1. If |new timeline| is the same object as |old timeline|, abort this procedure.
+
+    1. Let the [=timeline=] of |trigger| be |new timeline|.
+
+    1. Run the procedure to [=updating animation trigger state=] for |trigger|.
+  </div>
+
+### Updating Animation Trigger State ### {#updating-trigger-state}
+
+<div algorithm="updating animation trigger state">
+  The procedure of <dfn>updating animation trigger state</dfn> |state|
+  of an [=animation trigger=] |trigger|,
+  with a given a flag |did trigger|, and an [=animation trigger type=] |type|,
+  is as follows:
+
+  1. Let |did trigger| be a boolean flag that is initially false.
+
+  1. Let |state| be the current [=animation trigger state|state=]
+    of |trigger| that is initially ''animation trigger state/idle''.
+
+  1. Set |state| as follows:
+    <dl class=switch>
+      : If |trigger|’s [=local time=] is [=unresolved=],
+      ::
+        Then abort this procedure.
+
+      : Otherwise,
+      ::
+
+        <dl class=switch>
+          : If |type| is ''animation trigger type/once'' and |did trigger| flag is true,
+          ::
+            Then abort this procedure.
+
+          : Otherwise,
+          ::
+
+            <dl class=switch>
+              : If |trigger| is inside its [=animation trigger/active interval|active interval=],
+              ::
+                  1. Set |state| to ''animation trigger state/primary''.
+                  1. Set |did trigger| to true.
+
+              : Otherwise,
+              ::
+
+                <dl class=switch>
+                  : If |did trigger| flag is true,
+                  ::
+                      Set |state| to ''animation trigger state/inverse''.
+
+                </dl>
+
+            </dl>
+
+        </dl>
+
+    </dl>
+
+</div>
+
+Issue: Should it be the correct/expected behavior for the "did trigger" flag to reset to false if the timeline becomes idle again?
+
 <!-- End of animation model -->
 
 <h2 id="programming-interface">Programming interface</h2>
@@ -2432,6 +2639,7 @@ rangeStart, rangeEnd, and overallProgress as follows:
 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;
@@ -2483,6 +2691,11 @@ Add:
 > :  <dfn attribute for=Animation>overallProgress</dfn>
 > ::  Specifies the [=animation/overallProgress=] of the <a>animation</a> as a proportion of its
 >     [=associated effect end=].
+>
+> :  <dfn attribute for=Animation>trigger</dfn>
+> ::  Specifies the <a>animation</a>’s associated [=animation trigger=].
+>     Setting the attribute follows the same rules as the KeyframeAnimationOption
+>     <a href="#dom-keyframeanimationoptions-trigger">trigger</a>.
 </div>
 
 <h3 id="the-animationeffect-interface">The <code>AnimationEffect</code> interface</h3>
@@ -3267,6 +3480,24 @@ with which it is associated is updated.
 The <code>Animatable</code> interface mixin {#the-animatable-interface-mixin}
 ----------------------------------------
 
+The {{Animatable}} mixin interface
+is modified to add the following members:
+
+<div dfn-type=method class=methods
+       dfn-for="Animatable">
+
+  : <dfn lt="animate(keyframes, options)">Animation animate(|keyframes|, |options|)</dfn>
+  ::  Amend step 6 of the procedure as follows:
+
+	6. If |options| is a {{KeyframeAnimationOptions}} object,
+        let |trigger| be the <code>trigger</code> member of |options|
+        or, if <code>trigger</code> member of |options| is missing,
+        a newly created {{AnimationTrigger}} with an empty
+        {{AnimationTriggerOptions}} dictionary as its options.
+
+    7. 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:
 
@@ -3279,6 +3510,7 @@ dictionary TimelineRangeOffset {
 partial dictionary KeyframeAnimationOptions {
     (TimelineRangeOffset or CSSNumericValue or CSSKeywordValue or DOMString) rangeStart = "normal";
     (TimelineRangeOffset or CSSNumericValue or CSSKeywordValue or DOMString) rangeEnd = "normal";
+    AnimationTrigger? trigger;
 };
 </pre>
 
@@ -3303,6 +3535,10 @@ partial dictionary KeyframeAnimationOptions {
     a {{CSSNumericValue}} is interpreted as a {{TimelineRangeOffset}}
     with that {{TimelineRangeOffset/offset}} and a null {{TimelineRangeOffset/rangeName}}.
 
+:   <dfn dict-member for=KeyframeAnimationOptions>trigger</dfn>
+::  If present, specifies the <a>animation</a>’s associated [=animation trigger=]
+	by running the procedure of [=setting a trigger of an animation=].
+
 </div>
 
 Passing a {{CSSKeywordValue}} with a {{CSSKeywordValue/value}} other than "normal"
@@ -3366,6 +3602,168 @@ Update the type for the AnimationPlaybackEventInit members.
 
 </div>
 
+<h3 id="the-animationtrigger-interface">The <code>AnimationTrigger</code> interface</h3>
+
+<pre class='idl'>
+[Exposed=Window]
+interface AnimationTrigger {
+  constructor(optional AnimationTriggerOptions options = {});
+  attribute AnimationTimeline timeline;
+  attribute AnimationTriggerType type;
+  attribute (TimelineRangeOffset or CSSNumericValue or CSSKeywordValue or DOMString) rangeStart = "normal";
+  attribute (TimelineRangeOffset or CSSNumericValue or CSSKeywordValue or DOMString) rangeEnd = "normal";
+  attribute (TimelineRangeOffset or CSSNumericValue or CSSKeywordValue or DOMString) exitRangeStart = "auto";
+  attribute (TimelineRangeOffset or CSSNumericValue or CSSKeywordValue or DOMString) exitRangeEnd = "auto";
+};
+</pre>
+
+<div dfn-type=constructor class=constructors dfn-for="AnimationTrigger">
+  : <dfn lt="AnimationTrigger(options)">AnimationTrigger(|options|)</dfn>
+  ::
+      Creates a new {{AnimationTrigger}} object using the following procedure:
+
+      1. Create a new {{AnimationTrigger}} object, |trigger|.
+
+      1. Let |type| be the {{AnimationTriggerOptions/type}} property.
+
+      1. Let |timeline| be the {{AnimationTriggerOptions/timeline}} property.
+
+      1. Let |range start| be the {{AnimationTriggerOptions/rangeStart}} property.
+
+      1. Let |range end| be the {{AnimationTriggerOptions/rangeEnd}} property.
+
+      1. Set [=default range=] of |trigger| using |range start| and |range end|,
+          following the same rules as the KeyframeAnimationOption
+          <a href="#dom-keyframeanimationoptions-rangestart">rangeStart</a> and
+          <a href="#dom-keyframeanimationoptions-rangeend">rangeEnd</a> respectively.
+
+      1. Let |exit range start| be the {{AnimationTriggerOptions/exitRangeStart}} property.
+
+      1. Let |exit range end| be the {{AnimationTriggerOptions/exitRangeEnd}} property.
+
+      1. Set [=exit range=] of |trigger| using |exit range start| and |exit range end|,
+          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 |timeline| as the <var ignore>new timeline</var>.
+
+      <div dfn-type=argument class=parameters
+           dfn-for="AnimationTrigger/AnimationTrigger(options)">
+
+          : <dfn>options</dfn>
+          ::  Configuration parameters for the newly-created trigger.
+
+      </div>
+
+</div>
+
+<div dfn-type=attribute class=attributes
+       dfn-for="AnimationTrigger">
+
+  : <dfn>timeline</dfn>
+  ::
+      Returns the [=timeline=] for this trigger
+      or `null` if this timeline is [=inactive timeline|inactive=].
+
+  : <dfn>type</dfn>
+  ::
+      Returns the [=animation trigger type|type=] of this trigger.
+
+  : <dfn>rangeStart</dfn>
+  ::
+      Returns the [=default range=]’s start of this trigger.
+
+  : <dfn>rangeEnd</dfn>
+  ::
+      Returns the [=default range=]’s end of this trigger.
+
+  : <dfn>exitRangeStart</dfn>
+  ::
+      Returns the [=exit range=]’s start of this trigger.
+
+  : <dfn>exitRangeEnd</dfn>
+  ::
+      Returns the [=exit range=]’s end of this trigger.
+
+</div>
+
+<h3 id="the-animationtriggeroptions-dictionary">The <code>AnimationTriggerOptions</code> dictionary</h3>
+
+<pre class='idl'>
+dictionary AnimationTriggerOptions {
+  AnimationTimeline? timeline;
+  AnimationTriggerType? type = "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";
+};
+</pre>
+
+<div dfn-type=dict-member class=members
+       dfn-for="AnimationTriggerOptions">
+
+  : <dfn>timeline</dfn>
+  ::
+      The timeline to which the trigger is associated.
+      If not specified, the trigger is associated with [=default document timeline=].
+
+  : <dfn>type</dfn>
+  ::
+      The type of trigger to create.
+      If not specified, the trigger is of type ''animation trigger type/once''.
+
+  : <dfn>rangeStart</dfn>
+  ::
+      The start of the trigger’s [=default range=].
+      If not specified, the [=default range=]’s start is set to "normal".
+
+  : <dfn>rangeEnd</dfn>
+  ::
+      The end of the trigger’s [=default range=].
+      If not specified, the [=default range=]’s end is set to "normal".
+
+  : <dfn>exitRangeStart</dfn>
+  ::
+      The start of the trigger’s [=exit range=].
+      If not specified, the [=exit range=]’s start is set to "auto".
+
+  : <dfn>exitRangeEnd</dfn>
+  ::
+      The end of the trigger’s [=exit range=].
+      If not specified, the [=exit range=]’s end is set to "auto".
+
+</div>
+
+<h3 id="the-animationtriggertype-enumeration">The <code>AnimationTriggerType</code> enumeration</h3>
+
+<pre class='idl'>
+enum AnimationTriggerType { "once", "repeat", "alternate", "state" };
+</pre>
+
+<dl dfn-type=enum-value
+      dfn-for="AnimationTriggerType">
+
+  : <dfn>once</dfn>
+  ::
+      Type ''animation trigger type/once''.
+
+  : <dfn>repeat</dfn>
+  ::
+      Type ''animation trigger type/repeat''.
+
+  : <dfn>alternate</dfn>
+  ::
+      Type ''animation trigger type/alternate''.
+
+  : <dfn>state</dfn>
+  ::
+      Type ''animation trigger type/state''.
+
+</dl>
+
 <h3 id="model-liveness">Model liveness</h3>
 
 <div class="informative-bg"><em>This section is non-normative</em>