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

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.

No repository files, tests, or implementation entry points are identified. Start by reviewing the proposed CSS animation timing behavior; done would require an agreed specification for animation-time-reference, including whether the optional identifier form is in scope.