Why is the animation not showing correctly?

Question

css

I'm trying to make a side menu. As planned, the content should go to the left, and the menu should go to the right, as if they were one. But it turns out that the content is moved first, and only after a while the side block moves. What can be wrong?
code pen

Answer 1

The thing is that #right-menu is specified in percentages (-100%), while .test "transalteX" is specified in pixels. Accordingly, the animation proceeds at different speeds. Here is the correct option .