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.

first, don't use margin on animations - use translate:tranformX(100%) to translate:tranformX(0). that will make the animation much smoother. Try to use this same logic with animating from right to left — Roysh, Apr 01 '18 at 15:12

score 0 · Answer 1 · answered Apr 01 '18 at 19:34

0

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.

answered Apr 01 '18 at 19:34

lewisnewson

410
6
22

Browser expanding, sliding animation css

1 Answers1