How can I mask a div with transparent beneath it?

I have a container div (which could be in the center of the page). I want to animate another div (same size) from left edge to over top the container div. That much is easy.

I need the animated div to be invisible except inside the dimensions of the container div.
So you can see the entire page, including the container div but the right edge of the animated div is just left of the left edge of the container div AND INVISIBLE.
I need to move the animated div right until the left edge of the animated div is = the left edge of the container div and visible.
As it moves right I need the part of the animated div that is inside the container div to be visible and everything that is outside the container div to be invisible. At the end of the animation the animated div is completely inside the container div and is visible.

I keep looking at css mask & clip but so far can't figure this out.
Help?

 

I would suggest faking it. You basically want overflow in reverse, which is not a thing. I would make the background of the container div be opaque, but mimic what would be underneath it.

Of course if that's normal page content beneath it that might not be viable.