This is an adaptation of the Animate.css animations using the @angular/animations library.

• You can find a demo here.
• Angular 11.x use ngx-animations 5.x
• Angular 9.x use ngx-animations 4.x
• Angular 8.x use ngx-animations 3.x
• Angular 7.x use ngx-animations 2.x

1 Install ngx-animations :

npm install ngx-animations

Or

yarn add ngx-animations

2 Import the BrowserAnimationsModule and NgxAnimationsModule in your module :

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NgxAnimationsModule } from 'ngx-animations';
...

@NgModule({
  imports:      [ BrowserAnimationsModule, NgxAnimationsModule ],
  ...
})

<div (click)="myDiv.animate()">
  <div #myDiv="animated" [animAted]="{time: 800, animation: 'flip'}"></div>
</div>

Running example on stackblitz using @ngx-starter-kit/ngx-utils InViewportDirective

Use the *animIf directive to set the start and end animation :

<div
  *animIf="show; info: { startAnim: 'bounceIn', endAnim: 'bounceOut', time: 1000 }"
></div>

Create an AnimationDefinition instance for every animation you want to add :

const animationDefinition = new AnimationDefinition({}, [
  { background: 'blue', width: '25%', offset: 0.25 },
  { background: 'green', width: '100%', offset: 0.5 },
  { background: 'yellow', width: '50%', offset: 0.75 },
  { background: 'black', width: '200px', offset: 1 }
]);

Inject the AnimationsService in your AppModule and use the addAnimations method to add your array of AnimationDefinitions:

constructor(private animationsService: AnimationsService) {
  this._animationsService.addAnimations([{ name: 'aCustomAnimation', animation: animationDefinition }]);
}

That's it, you are now ready to use your custom animation like other native animations.

You can find a running example for custom animations on stackblitz

Then in your component :

Import the desired animation and the AnimationsService :

import { fadeIn, AnimationsService } from 'ngx-animations';

Get your element using the @ViewChild annotation :

@ViewChild('element') element: ElementRef;

Inject the AnimationsService :

constructor(private animationsService: AnimationsService) {}

After that you can create the player :

const player = this.animationsService.create(
  fadeIn(300),
  this.element.nativeElement
);

And play the animation :

player.play();

stackblitz example

First add animation to routing data :

{
    path: "animals",
    component: AnimalsComponent,
    data: { animation: "AnimalsPage" }
  },
  {
    path: "fruits",
    component: FruitsComponent,
    data: { animation: "FruitsPage" }
  }

Then you can either use a generic value * => * for all the transitions :

@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"],
  animations: [
    trigger("routeAnimation", [
      buildRouteTransition({
        stateChangeExpr: "* => *",
        enter: animations.fadeIn(1000),
        leave: animations.fadeOut(1000)
      })
    ])
  ]
})
export class AppComponent {}

Or add a specific animation for each transition :

@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"],
  animations: [
    trigger("routeAnimation", [
      buildRouteTransition({
        stateChangeExpr: "AnimalsPage => FruitsPage",
        enter: animations.zoomInRight(500),
        leave: animations.zoomOutLeft(200)
      }),
      buildRouteTransition({
        stateChangeExpr: "FruitsPage => AnimalsPage",
        enter: animations.zoomInLeft(500),
        leave: animations.zoomOutRight(200)
      })
    ])
  ]
})
export class AppComponent {}

Finally link the animation definition to the template :

<main [@routeAnimation]="o.activatedRouteData.animation">
	<router-outlet #o="outlet"></router-outlet>
</main>

bounce flash pulse rubberBand shake swing tada wobble jello bounceIn bounceInDown bounceInLeft bounceInRight bounceInUp bounceOut bounceOutDown bounceOutLeft bounceOutRight bounceOutUp fadeIn fadeInDown fadeInDownBig fadeInLeft fadeInLeftBig fadeInRight fadeInRightBig fadeInUp fadeInUpBig fadeOut fadeOutDown fadeOutDownBig fadeOutLeft fadeOutLeftBig fadeOutRight fadeOutRightBig fadeOutUp fadeOutUpBig flip flipInX flipInY flipOutX flipOutY lightSpeedIn lightSpeedOut rotateIn rotateInDownLeft rotateInDownRight rotateInUpLeft rotateInUpRight rotateOut rotateOutDownLeft rotateOutDownRight rotateOutUpLeft rotateOutUpRight slideInUp slideInDown slideInLeft slideInRight slideOutUp slideOutDown slideOutLeft slideOutRight zoomIn zoomInDown zoomInLeft zoomInRight zoomInUp zoomOut zoomOutDown zoomOutLeft zoomOutRight zoomOutUp hinge jackInTheBox rollIn rollOut backInDown backInLeft backInRight backInUp backOutDown backOutLeft backOutRight backOutUp