CODEWITHSUNDEEP
cssanimationslidingmargin-left
Green
Green

Reputation: 21

Browser expanding, sliding animation css

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.

Upvotes: 1

Views: 204

Answers (1)

lewisnewson
lewisnewson

Reputation: 460

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.

Upvotes: 0

Related Questions