[css-animations] Proposal: `animation-time-reference`

[arcanis]

Multiple elements added into the dom at different times will have their animations desynchronized, even if they share the same animation name. This proposal aims to solve that through an additional CSS property:

animation-time-reference: element | document;

• When set to element (the default, and also the current behavior; sentence taken from the spec):

  The start time of an animation is the time at which the style applying the animation and the corresponding @Keyframes rule are both resolved.

• When set to document, the sentence above is replaced by:

  The start time of an animation is the time at which the document was opened.

Via this simple unambiguous declarative mechanism, elements defining animation-time-reference: document would be guaranteed to all be synchronized together, regardless when they got added into the dom. It would be backward compatible, and would also degrade gracefully.

An additional improvement may be possible: animation-time-reference could accept an arbitrary identifier (similar to counter-reset, for example animation-time-reference: id(icons)); in that case, the time reference would be the time elapsed since the first matching element got added into the dom. Adding arbitrary values into a property spec may sound complex and more contentious though, so it can be discussed as a follow-up.

[birtles]

The document behavior is similar to SVG/SMIL's behavior where times are relative to the load event of the outermost SVG document fragment.

For what it's worth, it's currently possible to achieve this using getAnimations() to fetch the generated CSS animations and adjust their startTime (setting it to zero).