Open arcanis opened 2 years ago
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).
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:
When set to element (the default, and also the current behavior; sentence taken from the spec):
When set to document, the sentence above is replaced by:
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 tocounter-reset
, for exampleanimation-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.