This is the abstract for your specification.

Introduction

Web Animations defines features for supporting animation and synchronization on the Web platform by means of a programming interface. This interface is intended to be used both directly to easily produce animations using script, as well as a foundation for other specifications whose behavior can be defined in terms of these features.

Relationship to other specifications

CSS Transitions [[CSS3-TRANSITIONS]], CSS Animations [[CSS3-ANIMATIONS]], and SVG [[SVG112]] all provide mechanisms that generate animated content on a web page. Although the three specifications provide similar functionality, the syntaxes are incompatible and the animations cannot be interchanged. Furthermore, the interfaces available for interacting with animations from script are largely general-purpose interfaces with few features tuned specifically to the creation and manipulation of animations.

This specification proposes an abstract animations model that encompasses the abilities of both CSS and SVG, and additionally provides a programming interface to expose these features to script.

This specification is accompanied by a CSS embedding specification, which describes how CSS features can be implemented in terms of Web Animations primitives, and an SVG embedding specification, which describes how SVG features can be implemented in terms of Web Animations primitives.

As a result, this specification does not directly alter the behavior of CSS Transitions, CSS Animations, or SVG. However, Web Animations is intended to replace the SMIL Animation [[SMIL-ANIMATION]] specification where it is currently used to define the behavior of SVG's animation features.

This specification makes some additions to some interfaces defined in HTML5 [[HTML5]].

Web Animations overview

At a glance, Web Animations consists of two largely independent pieces, a timing model and an animation model. The role of these pieces is as follows:

Timing model
Takes a moment in time and converts it to a proportional distance within a single iteration of an animation called the time fraction.
Animation model
Takes the time fractions produced by the timing model and converts them into a series of values to apply to the target properties and attributes.

Graphically, this flow can be represented as follows:

Overview of the operation of Web Animations.
The current time is input to the timing model which produces a time fraction.
This distance is used as input to the animation model which produces the values to apply.

For example, consider an animation that:

The first three points apply to the timing model. At a time of 6 seconds, it will calculate that the animation should be half-way through its second iteration and produces the result 0.5. The animation model then uses that information to calculate a width for the rectangle of 75.

This specification begins with the timing model and then proceeds to the animation model.

The animation timeline

Each document contains a timeline to which animations may be added. These animations have an interval during which they are scheduled to animate.

At time t animations A and B are animating. Animation C has finished animating. Animation D has yet to begin and is not animating.

The start time of the timeline is defined in .

Animations in the timeline

Animations in the timeline are represented by AnimInstance objects.

The MealType enum

rice
a swamp grass that is widely cultivated as a source of food, esp. in Asia.
noodles
a strip, ring, or tube of pasta or a similar dough, typically made with egg and usually eaten with a sauce or in a soup.
other
anything that is not rice or noodles.

The AnimInstance interface

attribute AnimFunction function
The animation function to apply (see ).
readonly attribute MealType? template
For live animation instances (see ), the Anim object from which this object was minted. For independent animation instances, this property is null.
readonly attribute Element targetElement
The element being animated by this object.
bool makeIndependent()

Makes this object independent of the template from which it was created. See .

After this method returns, the template property will be null.

Returns true if this object was previously a live animation instance, false if this object was already an independent animation instance.

The ArrayLike interface

attribute unsigned long length
The number of items in the container.
void clear()
Removes all the items from the container by calling splice(0).
sequence<item> add (item newItem, optional item... otherItems)

Add newItem and each otherItems as the last item(s) in the group by calling splice(container.length, 0, newItem, otherItem1, ... otherItemN).

Returns a sequence containing the added items: [newItem, otherItem1, ... otherItemN].

sequence<item> remove ( long index, optional unsigned long count)

Removes the item(s) at index by calling splice(index, count). If count is not supplied, the default value is 1.

Returns a sequence containing the removed items.

sequence<item> splice ()

Modifies the list of children of this container by first removing deleteCount items from start followed by adding newItems at the same point.

The operation of slice is based on ECMAScript 5's Array.prototype.splice.

Returns a sequence of the items removed from group during the removal step (regardless of whether these items were re-added during the addition step).

optional long start
The index at which items should be removed and inserted. Negative indices represent an offset from the end of the list of items. This value is clamped to the range [-length, length].
optional unsigned long deleteCount
The number of items to remove from the container beginning at start. Negative values are clamped to zero, and all other values are clamped such that 0 < start + deleteCount ≤ length.
optional sequence<item> newItems
The items to be added at start. Each item, if it already has a parent group (including this group), is first removed from its parent group before being added to this group.
sequence<item> splice (optional long start, optional unsigned long deleteCount, optional item... newItem)
An overload of splice to take a variadic list of items rather than requiring a sequence. The operation is identical to splice(unsigned long start, unsigned long deleteCount, sequence<item> newItems).
long indexOf (item item)
Returns the index of item within the container. If item appears more than once, returns first index. If item is not in the group, returns -1.