The Web Animations spec supports composite operations on keyframes, we should support this feature for complete spec support.
<rdar://problem/44128785>
Any update on this? End of 2020 and broad support everywhere but WebKit/Safari: https://caniuse.com/?search=Web%20Animations
Hi Ben. No update at the moment. I've got a prototype implementation in a development branch, but I have to invest more time to actually make it something that could be considered for landing into WebKit.
Thanks for the update Antoine, hoping you get to it shortly. I've recently recorded a course on WAAPI and a shame when I have to add WebKit caveats like it is a 'red-headed stepchild'!
The first step towards supporting this feature is covered by bug 230404 so that we support composite operations for software animations.
This is now: rdar://87213273
Composite operations are now generally supported in WebKit and are enabled in Safari Technology Preview and Safari in macOS 13 and iOS 16 betas. The remaining blocking bugs paint a picture of outstanding compatibility issues that we are still working on but will be pretty specific to a given CSS property. The most important thing to be aware of is that properties that can be typically accelerated, such as "opacity", "filter", "transform", "translate", "scale" and "rotate" will not be fully accelerated if composite operations are used. Instead, the animation resolution will operate on the main thread, while the application of the property will operate on a GraphicsLayer. We are continuing to look into how to address this in the future.
Simple operations like a composite add do not work as expected in Safari. Is it best to open a separate issue for that? This simple example: https://codepen.io/benfrain/pen/JjXQqVO Click 'Move Me' to start the box moving, and then click the 'Scale Me' button to add a scale (using composite: add) — in now way renders as expected in Safari. Fine in Firefox/Chrome.
(In reply to Ben Frain from comment #8) > Simple operations like a composite add do not work as expected in Safari. Is > it best to open a separate issue for that? > > This simple example: https://codepen.io/benfrain/pen/JjXQqVO > > Click 'Move Me' to start the box moving, and then click the 'Scale Me' > button to add a scale (using composite: add) — in now way renders as > expected in Safari. Fine in Firefox/Chrome. Yes, this is a specific issue. Could you file a dedicated bug report? I'll look into it.
Done https://bugs.webkit.org/show_bug.cgi?id=248944
This feature has been implemented for quite some time now.