CSS Animation & Angular JS

Making a small application with Angular and Material Design. To leave more cute I decided to put some simple animations. The first one is SlideInRight that the screen should slide to the right and appear in the view; The second animation is SlideOutRight which is practically the same as the first one, the difference is that it strips the view.

My problem is that when the other screen appears, instead of being aligned with the other, it appears below as shown in the image:

As said the animations are simple. Below the CSS code used:

@keyframes slideInRight {
    from    { transform:translateX(100%); }
    to      { transform: translateX(0); }
}

@keyframes slideOutRight {
    from    { transform:translateX(0); }
    to      { transform: translateX(-100%); }
}

.ng-enter { animation: slideInRight 0.5s both ease-in; z-index: 1111; }
.ng-leave { animation: slideOutRight 0.5s both ease-in; z-index: 9999; }