Почему неправильно показывается анимация?

Question

[Dymok]

Пытаюсь сделать боковое меню. По задумке контент должен уходить влево, а меню выезжать справа, будто они одно целое. Но получается так, что сначала отодвигается контент, и только через некоторое время двигается боковой блок. В чем может быть дело?
Codepen

Comments

[Arman]

Под каким браузером? у меня под хром вроде нормально все

[Dymok]

Arik, тоже хром, сейчас гифку сделаю

[Dymok]

Arik,

[Монти Пайтон]

UnluckySerivelha, простите меня за офтоп: в чём вы сделали гифку, в какой программе?

[Dymok]

Ostin1, записал с помощью bandicam видео в mp4 формате и конвертировал в гиф тут https://convertio.co/ru/mp4-gif/

Answer 1

[Алексей Орлов]

Всё дело в том, что #right-menu у вас указано в процентах (-100%), а у .test "transalteX" указан в пикселях. Соответственно, анимация протекает с разной скоростью. Вот правильный вариант.

Answer 2

[tema_sun]

Из-за right: -100%;
Блок спозиционирован как fixed, соотвественно -100% сдвигает элемент на 100% экрана.
Делайте либо right: -300px; либо transform: translateX(100%);

Comments

[Dymok]

Спасибо.