search

w3c / csswg-drafts

CSS Working Group Editor Drafts
https://drafts.csswg.org/
Other
4.52k stars 673 forks source link

[web-animations] CompositeOperation blend #10927

Open KevinDoughty opened 2 months ago

KevinDoughty commented 2 months ago

I asked for a similar feature a dozen years ago in public-fx. There is obviously no interest but I’d like an issue to point to. Previously I used the keyword relative but blend is probably a better choice.

A subtract operation for CSS Values 5 (https://github.com/w3c/csswg-drafts/issues/10646) would be first, then CompositeOperation: blend for Web Animations. CSS Transition and CSS Animation additions could follow, as seen in the Firefox implementation shown here, along with blend: https://phabricator.services.mozilla.com/D156634#5139009

blend in Chromium: https://gitlab.com/kevindoughty/chromium-diff/-/commit/9238b5ae324d535390bbba35d165f45b101a5940

I actually got proof-of-concept working in WebKit more than a decade ago (barely, and pre Web Animations) but the code is not usable. CSS Transitions would look like this: https://www.youtube.com/watch?v=lFgvb7p9dDs

KevinDoughty commented 4 weeks ago

Matrix accumulation for scaling should probably use multiplication and division instead of the formula shown in https://www.w3.org/TR/css-transforms-2/#accumulation-for-one-based-values.

Unlike the scaling transform functions, equal and opposite animations don't quite cancel out