Add animate.css to your angular project

Animate.css is my favorite css library to easily add nice open/close or fade effects with css3.  Here a few steps on how to add it to your Angular project.

Step 1: install it with npm

Run the following:

npm install animate.css

Step 2: add it to your angular.json

To the styles section of your angular.json add:

 {
  "input": "node_modules/animate.css/animate.min.css"
}

Step 3: Add the library to your styles

To your global.scss file (or whatever your global scss file is:

/* animate.css */
@import '~animate.css/animate.min.css';

You are ready to add classes!

Step 4: enjoy!

 <div *ngIf="profilePaneOpen" class="animate__animated animate__fadeIn">