Расширение браузера, скользящая анимация CSS

Question

Я пытаюсь сделать несколько простых анимаций для мобильного дизайна. Я хочу вставить некоторые элементы за пределы экрана. Это работает, когда элементы идут слева, но не когда они идут справа, потому что браузер расширяется. Может кто-нибудь придумать простое решение?

(просмотреть страницу в окне размера Iphone)

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

мои анимации выглядят так:

.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;
}
}

ти.

Answer 1

Установить overflow-x: hidden; в родительский контейнер и дать ему 100% ширины. Это должно скрыть элемент, который скользит справа.