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:

- starts after 3 seconds,
- runs twice,
- takes 2 seconds every time, and
- changes the width of a rectangle from 50 pixels to 100 pixels.

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