[csswg-drafts] [css-values-4] Subtract operation for Relative Animation (#10646)

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

== [css-values-4] Subtract operation for Relative Animation ==
A subtract operation was rejected in public-fx more than a decade ago. The explanation was it can be achieved by addition times a negative scale, and that developers should use the Typed OM. This precludes many benefits I won’t enumerate, other than how Apple natively handles retargeting.

Something like this, except using property `transition-composition` instead of `transition-interrupt` and keyword `blend` instead of `relative` or `special`:
https://github.com/w3c/csswg-drafts/compare/main...KevinDoughty:csswg-drafts:master#diff-fc1c32de78d227c8f0c8008469824444d1ba7f027e48a336125017d40b8f6f6f

Looks like this:
![28](https://github.com/user-attachments/assets/d3e15ade-c057-4eac-a3cf-7375635c3fbb)

Reference implementation in Firefox, partially in Chromium:
https://phabricator.services.mozilla.com/D156634#5139009
https://gitlab.com/kevindoughty/chromium-diff/-/commit/9238b5ae324d535390bbba35d165f45b101a5940

Lists are handled like accumulate. Keyframes [A,B,C,D] become [A-D, B-D, C-D, D-D].

Firefox has an implementation detail called “Interruptible Layout” which causes flickering if animations are not added synchronously. I believe it would be fixed by an animation transaction like Apple’s CATransaction. From the Mozilla link, `discrete-state` (an attempt to remove style recalculations) is probably too difficult, but a transaction plus `getDiscreteStyle` and `getDiscreteRect` would be easy.

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


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

Received on Wednesday, 31 July 2024 14:12:30 UTC