Angular Universal SSR CSS animation transform Error

Question

I have added Angular universal to my app and followed the guide on https://angular.io/guide/universal It was realy simple, I'm just struggling with this Error:

ERROR Error: Unable to build the animation due to the following errors: The provided animation property "transform" is not a supported CSS property for animations The provided animation property "transform" is not a supported CSS property for animations

The reason for this is a simple Button with a keyframe animation which uses transform: rotate(0deg); The button is round and rolls from the right to the left side after loading.

Is there any workaround to solve this issue? I'm sure that transform is quite a valid CSS property for animations.

Edit: I use the transform Property inside of a components scss file. The content is static and the component shows a whole site. The css code is this:

  .roll-in {  animation: 2s linear 0s 1 animation;
    animation-fill-mode: both;
    }
@keyframes animation {
  0% {
    left: 110%;
  }

  10% {
    transform: rotate(0deg);
    left: 110%;
  }

  100% {
    transform: rotate(-720deg);
    left: 0px;
  }
}

After running the app with serve:ssr the element has no animation attribute.

Answer 1

I think, it happens when the animation starts on server side rendering itself. Since this is SSR, there is no meaning of loading the animations on server version.

Load the animations only in Browser platform version. So, animations will start only after the page rendered in browser view. For example,

component.ts

import { Component, Inject } from '@angular/core';
import { PLATFORM_ID } from '@angular/core';
import { isPlatformBrowser } from '@angular/common';

@Component({
  selector: 'my-animated-component',
  templateUrl: './my-animated-component.html'
})
export class MyAnimatedComponent{
  isBrowser: boolean;

  constructor( @Inject(PLATFORM_ID) platformId: Object) {
    this.isBrowser = isPlatformBrowser(platformId);
  }
}

In markup

 <div *ngIf="isBrowser">
    <my-animated-component></my-animated-component>
 </div>

It's recommended to use Angular native animations rather than CSS animations. A working example is here: https://stackblitz.com/edit/angular-animate-keyframes