Web Animations Module Level 2

Web Animations Module Level 2
Web Animations Module Level 2
W3C Working Draft
24 November 2025
More details about this document
This version:
Latest published version:
Editor's Draft:
History:
Feedback:
CSSWG Issues Repository
Inline In Spec
Editors:
Brian Birtles
Invited Expert
Robert Flack
Google
Former Editors:
Shane Stephens
Google
Douglas Stockwell
Google
Suggest an Edit for this Spec:
GitHub Editor
Delta Spec:
yes
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
Test Suite:
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 section describes the status of this document at the time of its publication.
A list of current W3C publications
and the latest revision of this technical report
can be found in the
W3C standards and drafts index.
This document was published
by the
CSS Working Group
as a
Working Draft
using the
Recommendation
track
Publication as a Working Draft
does not imply endorsement by
W3C
and its Members.
This is a draft document
and may be updated, replaced
or obsoleted by other documents at any time.
It is inappropriate to cite this document as other than a 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
18 August 2025 W3C Process Document
This document was produced by a group operating under the
W3C Patent Policy
W3C maintains a
public list of any patent disclosures
made in connection with the deliverables of the group;
that page also includes instructions for disclosing a patent.
An individual who has actual knowledge of a patent that the individual believes
contains
Essential Claim(s)
must disclose the information in accordance with
section 6 of the W3C Patent Policy
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.
Timing model
This section describes and defines the behavior of the Web Animations
timing model.
2.1.
Timing model overview
This section is non-normative
2.1.1.
Hierarchical
This level of the specification includes an updated timing hierarchy diagram.
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.
2.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%.
2.3.
Animation Frames
Update the note on the first step of the algorithm by adding the following bullet:
Updating the
state
of
animation triggers
by running the
updating animation trigger state
procedure.
2.4.
Animations
Append:
Animation effects associated with a
progress-based timeline
require their
timing properties to be converted to proportions. The procedure for converting
is as
follows:
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:
Let
total time
be equal to
end time
Set
start delay
to be the result of evaluating
specified start delay
total time
timeline duration
Set
iteration duration
to be the result of evaluating
specified iteration duration
total time
timeline duration
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:
Follow the procedure to convert a
time-based animation to a proportional animation
Otherwise:
Set
start delay
specified start delay
Set
end delay
specified end delay
If
iteration duration
is auto:
Set
iteration duration
intrinsic iteration duration
Otherwise:
Set
iteration duration
specified iteration duration
2.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:
Let
old timeline
be the current
timeline
of
animation
, if any.
If
new timeline
is the same object as
old timeline
abort this procedure.
Let
previous play state
be
animation
’s
play state
Let
previous current time
be the
animation
’s
current time
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
Let
from finite timeline
be true if
old timeline
is not null and
not
monotonically increasing
Let
to finite timeline
be true if
timeline
is not null and not
monotonically increasing
Let the
timeline
of
animation
be
new timeline
Perform the steps corresponding to the
first
matching
condition from the following, if any:
If
to finite timeline
Apply any pending playback rate
on
animation
set
auto align start time
to true.
Set
start time
to unresolved.
Set
hold time
to unresolved.
If
previous play state
is "finished" or "running"
Schedule a
pending play task
If
previous play state
is "paused" and
previous progress
is resolved:
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
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
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).
2.4.2.
Setting the target effect of an
animation
After the step to reschedule a
pending play task
add the following step:
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:
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.
2.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:
the user agent has completed any setup required to begin the playback of
each
inclusive descendant
of
the animation’s
associated effect
including rendering the first frame of any
keyframe
effect
or executing any
custom effects
associated with an
animation effect
the animation is associated with a
timeline
that is not
inactive
the animation’s
hold time
or
start time
is resolved.
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.
2.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
TypeError
return false;
If
all
of the following conditions are true:
The animation is not associated with a
progress-based timeline
and
time
is a CSSNumericValue, and
the units of time are not
duration units
throw
TypeError
return false.
Otherwise
return true.
2.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:
If
seek time
is an
unresolved
time value,
then perform the following steps.
If the
current time
is
resolved
, then
throw
TypeError
Abort these steps.
Let
valid seek time
be the result of running the
validate a CSSNumberish time
procedure with
seek time
as the input.
If
valid seek time
is false, abort this procedure.
Set
auto align start time
to false.
Update either
animation
’s
hold time
or
start time
as follows:
If
any
of the following conditions are true:
animation
’s
hold time
is
resolved
, or
animation
’s
start time
is
unresolved
, or
animation
has no associated
timeline
or
the associated
timeline
is
inactive
, or
animation
’s
playback rate
is 0,
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
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
Make
animation
’s
previous current time
unresolved
The procedure to
set the current time
of an animation,
animation
, to
seek time
is as follows:
Run the steps to
silently set the current time
of
animation
to
seek time
If
animation
has a
pending pause task
, synchronously
complete the pause operation by performing the following steps:
Set
animation
’s
hold time
to
seek time
Apply any pending playback rate
to
animation
Make
animation
’s
start time
unresolved
Cancel the
pending pause task
Resolve
animation
’s
current ready promise
with
animation
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.
2.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:
Let
valid start time
be the result of running the
validate a CSSNumberish time
procedure with
new start time
as the input.
If
valid start time
is false, abort this procedure.
Set
auto align start time
to false.
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
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
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
Apply any pending playback rate
on
animation
Set
animation
’s
start time
to
new start time
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
),
Set
animation
’s
hold time
to
previous current time
even if
previous current time
is
unresolved
If
animation
has a
pending play task
or
pending pause task
, cancel that task and
resolve
animation
’s
current ready promise
with
animation
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.
2.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]
Let
aborted pause
be a boolean flag that is true if
animation
has a
pending pause task
, and false otherwise.
Let
has pending ready promise
be a boolean flag that is
initially false.
Let
has finite timeline
be true if
animation
has an associated
timeline
that is not
monotonically increasing
Let
previous current time
be the
animation
’s
current time
Let
enable seek
be true if the
auto-rewind
flag is
true and
has finite timeline
is false.
Otherwise, initialize to false.
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:
previous current time
is
unresolved
, or
previous current time
< zero, or
previous current time
associated effect end
Set the
animation
’s
hold time
to zero.
If
animation
’s
effective playback rate
< 0,
enable seek
is true and
either
animation
’s:
previous current time
is
unresolved
, or
previous current time
≤ zero, or
previous current time
associated effect end
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.
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.
If
animation
’s
hold time
is
resolved
let its
start time
be
unresolved
If
animation
has a
pending play task
or a
pending pause task
Cancel that task.
Set
has pending ready promise
to true.
If the following three conditions are
all
satisfied:
animation
’s
hold time
is
unresolved
, and
aborted pause
is false, and
animation
does
not
have a
pending playback rate
abort this procedure.
If
has pending ready promise
is false,
let
animation
’s
current ready promise
be
a new promise
in the
relevant Realm
of
animation
Schedule a task to run as soon as
animation
is
ready
The task shall perform the following steps:
Assert that at least one of
animation
’s
start time
or
hold time
is
resolved
Let
ready time
be the
time value
of
the
timeline
associated with
animation
at the moment
when
animation
became
ready
Perform the steps corresponding to the first matching condition below,
if any:
If
animation
’s
hold time
is
resolved
Apply any pending playback rate
on
animation
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
Set the
start time
of
animation
to
new start time
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
Let
current time to match
be the result of evaluating
ready time
start time
) ×
playback rate
for
animation
Apply any pending playback rate
on
animation
If
animation
’s
playback rate
is zero, let
animation
’s
hold time
be
current time to match
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
Set the
start time
of
animation
to
new start time
Resolve
animation
’s
current
ready promise
with
animation
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
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.
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
2.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:
If the
auto-align start time
flag is false, abort this procedure.
If the timeline is inactive, abort this procedure.
If
play state
is idle, abort this procedure.
If
play state
is paused, and
hold time
is resolved,
abort this procedure.
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.
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.
Set
start time
to
start offset
if
effective playback rate
≥ 0,
and
end offset
otherwise.
Clear
hold time
2.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:
Let
seek time
be
time value
that is initially
unresolved
Let
has finite timeline
be true
if
animation
has an associated
timeline
that is not
monotonically increasing
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
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:
Let
has finite timeline
be true
if
animation
has an associated
timeline
that is not
monotonically increasing
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
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:
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
2.4.9.
Canceling an animation
Append the final step:
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.
2.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.
2.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
Tests
scroll-timeline-overallProgress.tentative.html
(live test)
(source)
overallProgress.html
(live test)
(source)
The
overallProgress
of an
animation
animation
, is calculated as follows:
If
any
of the following are true:
animation
does not have an
associated effect
, or
animation
’s
current time
is an
unresolved
time value,
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)
2.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
§ 2.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
2.5.1.
Types of animation effects
This specification defines two types of
animation effects
keyframe effects
, and
group effects
2.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
§ 2.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
§ 2.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)
2.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.
At time
, 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
2.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:
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:
the
animation effect
is
associated with an animation
that is
not
finished
The normative definition of
current
adds the following
condition:
the
animation effect
has a
parent group
and the
parent group
is
current
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:
If
any
of the following conditions are true:
the associated
animation
’s timeline is not a
progress-based timeline
, or
the associated
animation
’s
timeline duration
is
unresolved or zero, or
the
animation
’s
playback rate
is zero
return false
Let
effective start time
be the
animation
’s
start time
if resolved, or zero otherwise.
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
Let
effective timeline time
be
unlimited current time
animation
’s
playback rate
effective start time
Let
effective timeline progress
be
effective timeline time
timeline duration
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:
the
local time
is less than the
before-active boundary time
or
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:
the
local time
is less than the
before-active boundary time
or
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:
the
local time
is greater than the
active-after boundary
time
or
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:
the
local time
is greater than the
active-after boundary
time
or
the
animation direction
is "forwards" and the
local
time
is equal to the
active-after boundary time
and not
at progress timeline boundary
2.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
2.6.
Repeating
2.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
§ 2.10.3 The intrinsic
iteration duration of a group effect
If the animation effect is a
sequence effect
Follow the procedure in
§ 2.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
2.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
§ 2.5.3 Local time and inherited time
).
Repetition introduces yet another time space: the iteration time
space.
2.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. For both repeated and
sequenced animation effects there is no overlap at the boundaries
between intervals.
2.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
§ 2.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:
The
playback rate
is
applied only to the
active interval
of an
animation
effect
and not to the time while it is
delayed
or
filling
Setting a negative
playback rate
on an
animation effect
causes the
animation
effect
to begin at the end of its
active interval
This differs from the
playback rate
on an
animation
Setting a
playback rate
on
an
animation
to a negative value at a moment before the
animation
’s
associated effect
has begun, will result in the
associated effect
never playing.
Setting the
playback rate
of an
animation effect
affects the calculated value of
the
active duration
(see
§ 2.8.2 Calculating the active duration
).
Changing the
playback rate
of an
animation effect
whose
local time
is
within its
active interval
will cause it to jump.
This is because the
active duration
will be updated but the
local time
will not.
Furthermore, if other
animation effects
depend on the
animation effect
’s
active duration
, such as sibling
animation effect
in a
sequence effect
, they
too may jump as a result of setting the
animation effect
’s
playback rate
For runtime speed control the
playback rate
of the
animation
should be used.
2.8.
Core animation effect
calculations
2.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
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.
(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
§ 2.5.3 Local time and inherited time
2.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:
If the
playback rate
is
zero, return
Infinity
Otherwise, return
repeated duration
abs(
playback rate
2.8.3.
Transforming the local time
2.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
2.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
2.9.
Time transformations
Currently, the set of
timing functions
allowed on
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
2.9.1.
Calculating the transformed progress
Replace the second step as the calculation of the
before
flag
(to accommodate the effect playback rate):
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.
2.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.
2.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.
(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.
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]
tree order
root
ancestor
descendant
inclusive ancestor
inclusive descendant
next sibling
previous sibling
first child
last child
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
§ 2.5.3 Local time and inherited time
).
2.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.
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.
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.
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
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:
Setting the
playback rate
of a
group effect
will speed up or slow down all children.
Changing the
playback direction
of a
group effect
will change the direction of all children.
Applying a
timing function
to a
group effect
will
affect the progress of all children.
2.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.
2.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,
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 time
s, the largest time based value
equates to 100% for the purpose of time scaling.
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
2.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.
(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.
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.
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.
2.10.4.1.
The start time of
children of a sequence effect
The
start time
of
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.
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.
2.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
§ 2.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.
3.
Animation model
3.1.
Animation types
3.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
3.2.
Keyframe Effects
3.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.
For each
keyframe
in
interval endpoints
(As in web-animations-1).
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
) with the
property value on
keyframe
) 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
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
in the above step.
3.3.
Combining effects
3.3.1.
The effect stack
The procedure for sorting effects appends the following step:
Sort
and
in
tree order
(By this point,
and
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.
3.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
§ 3.2.1 The effect value of a keyframe effect
3.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.
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?
3.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.
If, on the previous update, the
animation effect
referencing the
custom effect
was
in effect
, and
referenced this same
custom effect
, and
had a different
target element
Call the callback passing an
unresolved
iteration progress
and the
target element
from the previous update as
parameters to the callback.
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:
is
in effect
, and
was not
in effect
in the previous update, or
was
in effect
but with a different
iteration
progress
or
current iteration
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.
3.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
.f
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.
3.6.
Animation Triggers
3.6.1.
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
and are attached to an
attachment range
Should there be any effect of triggers on scroll-driven animations?
3.6.2.
Animation Trigger Internal State
An
animation trigger
trigger
has an internal boolean
did trigger
flag, which is initially false,
and an internal
state
with
these possible values:
idle
The
animation effect
associated
animation
remains in
its
before phase
and stays at zero
current time
primary
When switched to this value the
primary
behavior type defined by
type
is applied to
animation
inverse
When switched to this value the
inverse
behavior type defined by
type
is applied to
animation
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?
3.6.3.
Animation Trigger Behavior
An
animation trigger
has an associated
animation trigger behavior
which, along with
did trigger
and
state
determines the
trigger
’s effect on its
associated
animation
’s 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"?
3.6.4.
Animation Trigger Active Interval
Each
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
3.6.5.
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
3.6.6.
Setting a Trigger of an Animation
The procedure of
setting a trigger of an animation
animation
to
new trigger
, is as follows:
Let
old trigger
be the current
animation trigger
of
animation
, if any.
If
new trigger
is the same object as
old trigger
, abort this procedure.
Let the
trigger
of
animation
be
new trigger
Run the procedure to
updating animation trigger state
for
new trigger
3.6.7.
Setting the timeline of an Animation Trigger
The procedure of
setting timeline of animation trigger
trigger
to
new timeline
which may be
null
, is as follows:
Let
old timeline
be the current value of
trigger
timeline
, if any.
If
new timeline
is the same object as
old timeline
, abort this procedure.
Set
trigger
timeline
to
new timeline
Run the
updating animation trigger state
procedure for
trigger
3.6.8.
Updating Animation Trigger State
The procedure of
updating animation trigger state
of an
animation trigger
trigger
is as follows:
Let
did trigger
be the current value of
trigger
’s
did trigger
flag.
Let
behavior
be
trigger
’s associated
animation trigger behavior
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
Set
trigger
state
to
primary
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.
Programming interface
4.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.
Tests
duration.tentative.html
(live test)
(source)
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.
4.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
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
4.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
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
If there is no
parent group
, abort these steps.
If any of the
animation effects
in
effects
is an
inclusive ancestor
of this
animation effect
throw
HierarchyRequestError
exception and abort these steps.
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
If there is no
parent group
, abort these steps.
If any of the
animation effects
in
effects
is an
inclusive ancestor
of this
animation effect
throw
HierarchyRequestError
exception and abort these steps.
Let
reference child
be the
next sibling of
this animation effect not in
effects
Insert
effects
before
reference child
undefined replace(AnimationEffect... effects)
Replaces this
AnimationEffect
with the passed in
effects
If there is no
parent group
, abort these steps.
If any of the
animation effects
in
effects
is an
inclusive ancestor
of the
parent group
throw
HierarchyRequestError
exception and abort these steps.
Let
reference child
be the
next sibling of
this animation effect not in
effects
Remove
this
animation effect
from its
parent group
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?
4.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.
4.5.
Updating the timing of an
AnimationEffect
Replace:
Assign each member that
exists
in
input
to the corresponding
timing property of
effect
as follows:
delay
start delay
endDelay
end delay
fill
fill mode
iterationStart
iteration start
iterations
iteration count
duration
iteration duration
direction
playback direction
easing
timing function
with:
Assign each member that
exists
in
input
to the corresponding
timing property of
effect
as follows:
delay
specified start delay
endDelay
specified end delay
fill
fill mode
iterationStart
iteration start
iterations
iteration count
duration
specified iteration duration
direction
playback direction
easing
timing function
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
4.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.
4.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
4.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:
Create a new
GroupEffect
object,
group
Let
timing input
be the result of applying the
procedure to
process a timing argument
to
timing
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
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.
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)
If any of the
animation effects
in
effects
is an
inclusive ancestor
of this
animation effect
throw
HierarchyRequestError
exception and abort these steps.
Insert
effects
before
the
first child
undefined append (AnimationEffect... effects)
If any of the
animation effects
in
effects
is an
inclusive ancestor
of this
animation effect
throw
HierarchyRequestError
exception and abort these steps.
Insert
effects
before
null
GroupEffect clone ()
Creates a deep copy of this
GroupEffect
object using the
following procedure.
Let
source
be this
GroupEffect
object,
the object to be cloned.
Let
cloned timing
be a new
EffectTiming
object whose members are assigned
the value of the attribute with the same name on
source
.getTiming()
Let
cloned children
be an empty sequence of
AnimationEffect
objects.
For each
child
in
source
.children
, append the result
of calling
child
.clone()
to
cloned children
Return a new
GroupEffect
object created by
calling the
GroupEffect()
constructor with parameters
GroupEffect(
cloned children
cloned timing
4.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
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.
4.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:
Let
context effect
be
effect
While the
next sibling
of
context effect
is not
null
perform the following steps:
Let
context effect
be the
next sibling
of
context effect
If
context effect
is not in
effects
return
context effect
and abort these steps.
Return
null
To
remove
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
Remove
effect
from its parent.
Insert
effect
to
parent
’s list of
child
effects
before
reference child
4.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
4.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? 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.
4.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:
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.
4.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
},
1000
),
new
KeyframeEffect
elem
visibility
'hidden'
},
fill
'forwards'
})
);
4.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,
DOMString
is parsed into a
TimelineRangeOffset
according to the syntax of

and the resulting
TimelineRangeOffset
or
CSSNumericValue
is interpreted as defined for
@keyframes
If the
DOMString
fails to parse as a valid

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).
4.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.
4.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.
4.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.
4.13.
The
Animatable
interface
sequence 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.
4.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:
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.
Run the procedure to
setting a trigger of an animation
for
animation
with the
auto-rewind
flag set to true.
Tests
animate-no-browsing-context.html
(live test)
(source)
animate.html
(live test)
(source)
getAnimations-iframe.html
(live test)
(source)
getAnimations.html
(live test)
(source)
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
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";
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
DOMString
value is parsed as an
animation-range-end
value
to yield a
TimelineRangeOffset
rangeName
and
offset
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
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.
4.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.
4.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
};
Tests
constructor.html
(live test)
(source)
AnimationTrigger(
options
Creates a new
AnimationTrigger
object using the following procedure:
Create a new
AnimationTrigger
object,
trigger
Set
trigger
did trigger
to false.
Set
trigger
state
to
idle
Set
trigger
behavior
to
options
behavior
Set
default range
of
trigger
using
options
rangeStart
and
options
rangeEnd
following the same rules as the KeyframeAnimationOption
rangeStart
and
rangeEnd
respectively.
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
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.
4.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".
4.18.
The
AnimationTriggerBehavior
enumeration
enum
AnimationTriggerBehavior
"once"
"repeat"
"alternate"
"state"
};
once
once
repeat
repeat
alternate
alternate
state
state
4.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
elem
animate
function
()
timesCalled
++
},
10000
);
alert
timesCalled
);
// Displays ‘0’
Note:
Need to spec this properly somewhere.
5.
Changes
5.1.
Changes since level 1
This specification introduces the following changes compared to the
previous level of this specification:
group effects
and
sequence effects
an
animation effect
-specific
playback rate
Support for non-monotonic (scroll) timelines.
This module also includes some exploratory proposals for [[#custom-effects]],
however there are some concerns about the design of this feature
and it may be replaced in a future revision.
See
discussion
5.2.
Changes since the
First Public Working Draft
of 21 February 2023
Renamed animation-trigger-type to animation-trigger-behavior
Corrected mention of start time to current time
Corrected syntax of rangeStart, rangeEnd, exitRangeStart and exitRangeEnd attributes on AnimationTrigger interface (
Issue 11624
Specified the animation-trigger property, added the AnimationTrigger interface
Changed progress to overallProgress (
Issue 8799
Specified Animation progress API (
Issue 9937
Clarified that start time of the animation is auto-aligned with the animation range boundary when it has not been explicitly set (
Issue 9181
Fixed IDL definition of KeyframeAnimationOptions
Expanded offset syntax for keyframes (
Issue 7637
Added rangeStart/rangeEnd to Animatable interface (
Issue 7589
Tidied up effect stack definitions (
Issue 8497
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

, 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
CSS
style sheet
renderer
UA
that interprets the semantics of a style sheet and renders
documents that use them.
authoring tool
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
Questions should be directed to the
public-css-testsuite@w3.org
mailing list.
Index
Terms defined by this specification
"accumulate"
, in § 4.11
active duration
, in § 2.8.2
activeDuration
, in § 4.6
active interval
, in § 3.6.4
after()
, in § 4.3
after(...effects)
, in § 4.3
"alternate"
, in § 4.18
alternate
, in § 4.18
ancestor
, in § 2.10
animate(keyframes, options)
, in § 4.14
animation effect start time
, in § 2.5.2
AnimationNodeList
, in § 4.8
AnimationPlaybackEvent
, in § 4.15
AnimationPlaybackEventInit
, in § 4.15
AnimationPlaybackEvent(type)
, in § 4.15
AnimationPlaybackEvent(type, eventInitDict)
, in § 4.15
animation trigger
, in § 3.6.1
AnimationTrigger
, in § 4.16
AnimationTrigger()
, in § 4.16
animation trigger behavior
, in § 3.6.3
AnimationTriggerBehavior
, in § 4.18
AnimationTrigger(options)
, in § 4.16
AnimationTriggerOptions
, in § 4.17
animation trigger state
, in § 3.6.2
append()
, in § 4.7
append(...effects)
, in § 4.7
associated with an animation
, in § 2.5
at progress timeline boundary
, in § 2.5.4
"auto"
, in § 4.6.1
auto-aligned start time
, in § 2.4.7
"backwards"
, in § 4.6.1
before()
, in § 4.3
before(...effects)
, in § 4.3
behavior
attribute for AnimationTrigger
, in § 4.16
dict-member for AnimationTriggerOptions
, in § 4.17
"both"
, in § 4.6.1
calculating an auto-aligned start time
, in § 2.4.7.1
child effect
, in § 2.10
children
, in § 4.7
clone()
method for GroupEffect
, in § 4.7
method for SequenceEffect
, in § 4.9
constructor()
, in § 4.16
constructor(children)
constructor for GroupEffect
, in § 4.7
constructor for SequenceEffect
, in § 4.9
constructor(children, timing)
constructor for GroupEffect
, in § 4.7
constructor for SequenceEffect
, in § 4.9
constructor(options)
, in § 4.16
constructor(type)
, in § 4.15
constructor(type, eventInitDict)
, in § 4.15
current
, in § 2.5.4
currentTime
attribute for Animation
, in § 4.2
attribute for AnimationPlaybackEvent
, in § 4.15
attribute for AnimationTimeline
, in § 4.1
dict-member for AnimationPlaybackEventInit
, in § 4.15
custom effect
, in § 3.5
default range
, in § 3.6.5
delay
dict-member for EffectTiming
, in § 4.4
dict-member for OptionalEffectTiming
, in § 4.4
descendant
, in § 2.10
did trigger
, in § 3.6.2
directly associated with an animation
, in § 2.5
duration
attribute for AnimationTimeline
, in § 4.1
dict-member for EffectTiming
, in § 4.4
dict-member for OptionalEffectTiming
, in § 4.4
EffectCallback
, in § 4.12
endDelay
dict-member for EffectTiming
, in § 4.4
dict-member for OptionalEffectTiming
, in § 4.4
end time
, in § 2.5.2
endTime
, in § 4.6
exit range
, in § 3.6.5
exitRangeEnd
attribute for AnimationTrigger
, in § 4.16
dict-member for AnimationTriggerOptions
, in § 4.17
exitRangeStart
attribute for AnimationTrigger
, in § 4.16
dict-member for AnimationTriggerOptions
, in § 4.17
FillMode
, in § 4.6.1
first child
, in § 2.10
firstChild
, in § 4.7
"forwards"
, in § 4.6.1
getAnimations(options)
, in § 4.13
getComputedTiming()
, in § 4.3
group effect
, in § 2.10
GroupEffect
, in § 4.7
GroupEffect(children)
, in § 4.7
GroupEffect(children, timing)
, in § 4.7
idle
, in § 3.6.2
inclusive ancestor
, in § 2.10
inclusive descendant
, in § 2.10
inherited time
, in § 2.5.3
in play
, in § 2.5.4
insert children
, in § 4.7.2
intrinsic iteration duration
, in § 2.6.1
inverse
, in § 3.6.2
item(index)
, in § 4.8
iterationComposite
attribute for KeyframeEffect
, in § 4.10
dict-member for KeyframeEffectOptions
, in § 4.10.3
iteration composite operation
, in § 3.4
IterationCompositeOperation
(enum)
, in § 4.11
definition of
, in § 4.11
iteration composite operation accumulate
, in § 3.4
iteration composite operation replace
, in § 3.4
KeyframeEffect(source)
, in § 4.10
KeyframeEffect(target, keyframes, options)
, in § 4.10
last child
, in § 2.10
lastChild
, in § 4.7
length
, in § 4.8
local time
, in § 2.5.3
localTime
, in § 4.6
next sibling
, in § 2.10
nextSibling
, in § 4.3
next sibling not included
, in § 4.7.2
"none"
, in § 4.6.1
normalize specified timing
, in § 2.4
offset
, in § 4.14
"once"
, in § 4.18
once
, in § 4.18
overallProgress
attribute for Animation
, in § 4.2
dfn for animation
, in § 2.4.11
parent
, in § 4.3
parent group
, in § 2.10
pending play task
, in § 2.4.7
play()
, in § 4.1
play an animation
, in § 2.4.7
playback rate
, in § 2.7
playbackRate
dict-member for EffectTiming
, in § 4.4
dict-member for OptionalEffectTiming
, in § 4.4
play(effect)
, in § 4.1
prepend()
, in § 4.7
prepend(...effects)
, in § 4.7
previous sibling
, in § 2.10
previousSibling
, in § 4.3
primary
, in § 3.6.2
process a timing argument
, in § 4.7.1
progress-based timeline
, in § 2.2
rangeEnd
attribute for Animation
, in § 4.2
attribute for AnimationTrigger
, in § 4.16
dict-member for AnimationTriggerOptions
, in § 4.17
dict-member for KeyframeAnimationOptions
, in § 4.14
rangeName
, in § 4.14
rangeStart
attribute for Animation
, in § 4.2
attribute for AnimationTrigger
, in § 4.16
dict-member for AnimationTriggerOptions
, in § 4.17
dict-member for KeyframeAnimationOptions
, in § 4.14
ready
, in § 2.4.3
remove()
, in § 4.3
remove an animation effect
, in § 4.7.2
"repeat"
, in § 4.18
repeat
, in § 4.18
repeated duration
, in § 2.8.2
"replace"
, in § 4.11
replace()
, in § 4.3
replace(...effects)
, in § 4.3
root
, in § 2.10
sequence effect
, in § 2.10.4
SequenceEffect
, in § 4.9
SequenceEffect(children)
, in § 4.9
SequenceEffect(children, timing)
, in § 4.9
set the current time
, in § 2.4.5
set the start time
, in § 2.4.6
set the timeline of an animation
, in § 2.4.1
setting a trigger of an animation
, in § 3.6.6
setting timeline of animation trigger
, in § 3.6.7
silently set the current time
, in § 2.4.5
specified end delay
, in § 4.4
specified iteration duration
, in § 4.4
specified start delay
, in § 4.4
start delay
, in § 2.5.2
startTime
attribute for Animation
, in § 4.2
dict-member for ComputedEffectTiming
, in § 4.6
"state"
, in § 4.18
state
, in § 4.18
time-based animation to a proportional animation
, in § 2.4
timeline
attribute for AnimationTrigger
, in § 4.16
dict-member for AnimationTriggerOptions
, in § 4.17
timeline duration
, in § 2.2
TimelineRangeOffset
, in § 4.14
timelineTime
attribute for AnimationPlaybackEvent
, in § 4.15
dict-member for AnimationPlaybackEventInit
, in § 4.15
transformed time
, in § 2.9.2
tree order
, in § 2.10
trigger
attribute for Animation
, in § 4.2
dict-member for KeyframeAnimationOptions
, in § 4.14
updating animation trigger state
, in § 3.6.8
validate a CSSNumberish time
, in § 2.4.4
Terms defined by reference
[CSS-ANIMATIONS-1]
defines the following terms:

@keyframes
[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:

value accumulation
[CSSOM-1]
defines the following terms:
CSSOMString
[DOM]
defines the following terms:
Element
Event
EventInit
[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
event-loop
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
composite
current finished promise
current iteration index
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 timeline
not animatable
overall progress
pause an animation
pending pause task
pending playback rate
play state
playback direction
reverse an animation
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
. 2 March 2023. WD. URL:
[CSS-DISPLAY-4]
Elika Etemad; Tab Atkins Jr..
CSS Display Module Level 4
. 6 November 2025. WD. URL:
[CSS-EASING-1]
Brian Birtles; Dean Jackson; Matt Rakow.
CSS Easing Functions Level 1
. 13 February 2023. CRD. URL:
[CSS-EASING-2]
CSS Easing Functions Level 2
. 29 August 2024. FPWD. URL:
[CSS-PSEUDO-4]
Elika Etemad; Alan Stearns.
CSS Pseudo-Elements Module Level 4
. 27 June 2025. WD. URL:
[CSS-TYPED-OM-1]
Tab Atkins Jr.; François Remy.
CSS Typed OM Level 1
. 21 March 2024. WD. URL:
[CSS-VALUES-4]
Tab Atkins Jr.; Elika Etemad.
CSS Values and Units Module Level 4
. 12 March 2024. WD. URL:
[CSSOM-1]
Daniel Glazman; Emilio Cobos Álvarez.
CSS Object Model (CSSOM)
. 26 August 2021. WD. URL:
[DOM]
Anne van Kesteren.
DOM Standard
. Living Standard. URL:
[HTML]
Anne van Kesteren; et al.
HTML Standard
. Living Standard. URL:
[INFRA]
Anne van Kesteren; Domenic Denicola.
Infra Standard
. Living Standard. URL:
[RFC2119]
S. Bradner.
Key words for use in RFCs to Indicate Requirement Levels
. March 1997. Best Current Practice. URL:
[SCROLL-ANIMATIONS-1]
Brian Birtles; et al.
Scroll-driven Animations
. 6 June 2023. WD. URL:
[WEB-ANIMATIONS-1]
Brian Birtles; et al.
Web Animations
. 5 June 2023. WD. URL:
[WEBIDL]
Edgar Chen; Timothy Gu.
Web IDL Standard
. Living Standard. URL:
IDL Index
Exposed
Window
partial
interface
AnimationTimeline
readonly
attribute
CSSNumberish
currentTime
readonly
attribute
CSSNumberish
duration
Animation
play
optional
AnimationEffect
effect
null
);
};