[csswg-drafts] [css-transforms] How to animate image to Topright of viewport (#11484)

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

== [css-transforms] How to animate image to Topright of viewport ==
I understand CSS-transforms can not produce every animation I would like, but how about the most simple animation I can think of?

Suppose there is a small image shown in the viewport. Create an animation that moves the image to Topright of the viewport.

I would expect that this animation would do the job:

@keyframes moveTopRight {
 from {transform: translateXY(0,0);}
 to {transform: translateXY(100vw,0vh);}
}

But they do not because vw and vh are relative values also. The only solution I see is to get rid of the vw and vh and translate them to px. This is very clumsy.

A common "solution" for an animation to move the image out of the viewport from the left is this:

@keyframes VanishRight {
 from {transform: translateX(0);}
 to {transform: translateX(2000px);}
}

Now let's hope nobody has a viewport more then 2000px wide.. Clumsy again. It would be great if the browser could give some help with constructions like translateX(calc(100vw - ox)) where 'ox' (or how you want to name it) would be the x-position of the image. Or calc(100vw - left) (besides left also right, top, bottom, width and height)

Maybe I overlooked something in the documentation but any suggestions?

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


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

Received on Saturday, 11 January 2025 19:46:40 UTC