[css-transforms] How to animate image to Topright of viewport

[FirstByteFirst]

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?