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

> A common "solution" for an animation to move the image out of the viewport from the left is this. Now let's hope nobody has a viewport more then 2000px wide.

That “solution” is not inherently different from the `100vw` approach: it moves the element out of view over a length that is greater than the actually needed length. In fact, the `100vw` approach is probably safer to do, as it also works nice with a viewport wider than `2000px`.

> Or calc(100vw - left) (besides left also right, top, bottom, width and height)

This would not take existing transforms into account. The box of an element with `left: 0px; translate: 100px 0;` would still be positioned at `left: 0px` whereas it would appear at `100px` from the left due to the translation.

---

To achieve what you want, you can use CSS anchoring, in which you anchor the source element to a fixedpos element which is positioned on the top right corner. See https://codepen.io/bramus/pen/myeLLeg for a demo.

What would still be needed to make it perfect is something like an `animation-speed`, because the speed at which the source element moves depends on how far it must travel. Issue #5091 is concerned with that.

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


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

Received on Friday, 22 August 2025 11:27:02 UTC