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

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.