How to prevent css animation to reoccur when angular SSR bootstraps the app

I built a landing site using Angular. To make it SEO friendly, I had to do prerender it.

The landing page starts with an intro animation (using CSS' animation).

When I first load the page/full reload, the animation starts, and in the middle the app is being bootstrapped so ot restarts the animation again.

I was wondering if there's a way to prevent the animations to reoccur. I know that there are few questions that might be similar to mine, but none of them helped me.

I have tried to solve this issue by:

1. Adding initialNavigation in AppRoutingModule:

@NgModule({
  imports: [RouterModule.forRoot(routes, { initialNavigation: 'enabled'})],
  exports: [RouterModule]
})
export class AppRoutingModule {
}

2. AddingTransferHttpCacheModule and BrowserTransferStateModule to AppModule, and ServerTransferStateModule to AppServerModule.

from How to prevent css animation to reoccur when angular SSR bootstraps the app