CSS Animation & Angular JS

Question

Making a small application with Angular and Material Design. To leave more cute I decided to put some simple animations. The first of them is the Slideinright that the screen should slide to the right and appear in the view; The second animation is the Slideoutright which practically equals the first, the difference is that this view strip.

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

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