This is the abstract for your specification.

## Introduction

### Relationship to other Specifications

This specification extends the CSS Transitions [[CSS3-TRANSITIONS]] and CSS Animations [[CSS3-ANIMATIONS]] specifications. It also clarifies the handling of replaced content [[CSS21]] and `image` content [[CSS3-IMAGES]].

## Replaced content and `image` values

How do you synchronize animations in background images, content attributes etc.? Does it appear in the animation tree? Is this a security problem if it does? Do you create a hidden mediaController and associate everything with that so that at least elements with the same background all have the same frame?

## The `timeline-start` property

Values: onload | onstart | manual
Initial: onload
Applies to: Anywhere the `timelineStart` attribute is allowed.

## CSS Transitions

Section 3 of [[!CSS3-TRANSITIONS]] defines the conditions under which a CSS Transition should occur. When these conditions are met, an implementation will behave as if the following objects were constructed via the Web Animation JS API:

- For each property referenced by transition-property that has a different computed style before and after the transition occurs:
  - The from frame, a `WebAnimationFrame` with an offset of 0 and a value of the computed style of property just before the transition occurs.
  - The to frame, a `WebAnimationFrame` with an offset of 1 and a value of the current computed style of property.
  - The frame list, a `WebAnimationFrameList` containing the from frame and to frame.
  - The animation function, a `WebKeyframesAnimationFunction` with a property equal to the property being transitioned, frames set to the frame list, an operation of "replace", an accumulateOperation of "replace", and a pace of undefined.
- The group animation function, a `WebGroupedAnimationFunction` that contains all of the animation function objects generated in the previous step.
- The animation timing, a `WebTiming` with a iterationDuration equal to the transition-duration, a timingFunction equivalent to transition-timing-function (see section ??), and all other properties left at their default values.
- The animation, a `WebAnimation` associating group animation function with animation timing.
- The animation instance, a `WebAnimationInstance` that is equivalent to one constructed by calling animation.animateLive(element)

## `@keyframes` rules

An `@keyframe` rule can be converted to a `WebGroupedAnimationFunction` using the following steps:

1. For each property referenced in the @keyframes rule:
   1. For each keyframe that property is referenced in:
      1. Construct a `WebAnimationFrame` with offset equal to the selector value of the keyframe, value equal to the value of property within the keyframe, and timingFunction equivalent to the timing function desribed by the keyframe (if any).
   2. If there is no keyframe at 0, or if there is a keyframe at 0 but it does not reference property, construct a `WebAnimationFrame` with an offset of 0, a value equal to the current computed value of property, and a null timingFunction.
   3. If there is no keyframe at 1, or if there is a keyframe at 1 but it does not reference property, construct a `WebAnimationFrame` with an offset of 1, a value equal to the current computed value of property, and a null timingFunction.
   4. Construct a `WebAnimationFrameList` and add each of the constructed `WebAnimationFrame` objects to it.
   5. Construct a `WebKeyframeAnimationFunction` with property equal to the property from the @keyframes rule, frames equal to the constructed `WebAnimationFrameList`, and all other values at their defaults.
2. Construct a `WebGroupedAnimationFunction` and add each of the constructed `WebKeyframeAniamtionFunction` objects to it. This is the resulting `WebGroupedAnimationFunction` object.

## CSS Animations

Section 2 of the [[!CSS3-ANIMATIONS]] specification defines the conditions under which a CSS Animation should occur. When these conditions are met, an implementation will behave as if the following objects were constructed via the Web Animation JS API:

- An animation function, constructed from the `@keyframes` declaration referenced by animation-name as described in .
- An animation timing, a `WebTiming` with a iterationDuration equal to the animation-duration, a timingFunction equivalent to animation-timing-function (see ), and all other properties left at their default values.

  Put this object in a par group.

- An animation, a `WebAnimation` associating animation function with animation timing.
- An animation instance, a `WebAnimationInstance` that is equivalent to one constructed by calling animation.animateLive(element)

## Generating Equivalent Timing Functions

Can't do this until we've defined the interface for timing functions in the main spec.