[csswg-drafts] [css-animations] Proposal: `animation-time-reference` (#6780)

arcanis has just created a new issue for https://github.com/w3c/csswg-drafts:

== [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:

```css
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.

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/6780 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Friday, 29 October 2021 18:55:33 UTC