Browser expanding, sliding animation css

Question

I'm trying to do some simple animations for a mobile design. I want to slide in some elements from outside the screen. It works when the elements come from the left, but not when they come from the right, because the browser expands. Can someone come up with a simple solution?

(view the page in Iphone size window)

http://e-daktik.dk/notesbogfull.html

my animations look like this:

.jaeger {
 animation-duration: 3s;
 animation-name: slidein1;
 animation-delay: 1.0s;
 animation-fill-mode: backwards;
}

@keyframes slidein1 {
from {
 margin-left: 100%;
 width: 100%;
 opacity: 0;
}

to {
 margin-left: 0%;
 width: 100%;
 opacity: 1;
}
}

ty.

Answer 1

Set an overflow-x: hidden; to the parent container and give it 100% width. This should hide the element as is slides in from the right.