Angular - CSS breaks when you use animations

I created a fadeout animation to navigate between pages. Apparently everything works but a strange error occurs. When the page loads and the animation starts, the CSS "breaks" and adds a blank space to the right, leaving something like that.

When the animation ends it returns to its normal state. In the image there is a login page that occupies the whole screen.

Animation is like this

import {
  trigger,
  animate,
  transition,
  style,
  query,
} from "@angular/animations";

export const fadeAnimation = trigger("fadeAnimation", [
    transition('* => *', [
        query(':enter', [style({ position:'fixed',opacity: 0 }) ], { optional: true }),
        query(':leave', [ animate('3s ease-in-out', style({position:'fixed', opacity: 0 })) ], { optional: true }),
        query(':enter', [ animate('3s ease-in-out', style({position:'fixed', opacity: 1 })) ], { optional: true })
    ])
]);

Does anyone know why this can happen?