Angular 5: fade animation during routing (CSS)

I finally made it work :

export const routeStateTrigger = trigger('routeState', [
    transition('* => *', [
        query(':enter', [
                style({ opacity: 0 })
            ], { optional: true }
        ),
        group([
            query(':leave', [
                    animate(300, style({ opacity: 0 }))
                ],
                { optional: true }
            ),
            query(':enter', [
                    style({ opacity: 0 }),
                    animate(300, style({ opacity: 1 }))
                ],
                { optional: true }
            )
        ])
    ])
]);

This CSS selector did the trick :

/deep/ router-outlet~* {
    position: absolute;
    width: 100%;
    height: 100%;
}

Try this simple transition.

export const routeStateTrigger =
  // trigger name for attaching this animation to an element using the [@triggerName] syntax
  trigger('routeState', [

    // route 'enter and leave (<=>)' transition
    transition('*<=>*', [

      // css styles at start of transition
      style({ opacity: 0 }),

      // animation and styles at end of transition
      animate('0.4s', style({ opacity: 1 }))
    ]),
  ]);

I use CSS only to create fade animation during routing like this:

@keyframes fade {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

router-outlet + * {
  display: block;  /* Change display inline to block */
  animation: fade 1s;
}

Note: I use global style, you can use more classes to isolate.