Re: [csswg-drafts] [css-sizing] Adding a 'size' shorthand for 'width'/'height' (#820)

> That seems completely unrelated to the current issue though?

I was hoping that on Keyframe creation the usual clipping (disallowing of negative values) could be skipped to allow “FLIP” style animation but for width and height instead of transforms. When additive, multiple animations would run simultaneously on interruption and retargeting to allow blending using the easing curve.

For instance, if I want to animate from height 20 to height 100, relative conversion means the animation would run from -80 to 0, which gets added to the specified underlying value of 100. The animation makes the computed height 20 then animates to a computed height of 100. If interrupted midway to go back to 20, the original animation is not replaced but instead allowed to run to completion, 0 height, while a second animation from 80 to 0 would get added to the underlying value, the first animation, and then the specified height, resulting in an animation that slows down then reverses back to the starting point.

This type of animation is superior to CSS Transition's Faster Reversal, which only works when toggling two states, whereas Relative Animation blends any number of arbitrary states. Relative Animation is also well suited for animating from continuous events like dragging, which can be seen in this CodePen, clicking or dragging (I don’t think it works properly on mobile, which I need to fix).

https://codepen.io/kvndy/pen/OJKxYvM

A subtract operation and CompositeOperation would be great because that could also blend CSS Transitions and maybe even CSS Animations. I understand this would take a lot of effort browser vendors aren’t interested in undertaking, which is why I would be grateful at this point if page authors were permitted to manually perform this relative conversion by not disallowing negative width and height values when animating size on Keyframe creation.

The openradar link was a bug report made after Apple broke Relative Animation of CGRect structs by disallowing negative width and height values after macOS 10.5. I haven’t done iOS or Mac programming in a while but I’m pretty sure the workaround, animating a Group containing CGPoint and CGSize structs, is still in use.

-- 
GitHub Notification of comment by KevinDoughty
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/820#issuecomment-3216132140 using your GitHub account


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

Received on Saturday, 23 August 2025 02:29:26 UTC