Originally from carloscaballero.io blog.
Animate.css is a cross-browser library of CSS animations. As easy to use as an easy thing.
In this post I am going to show you how to configure Animate.css to be used in angular in only 5-1 steps.
If you are thinking about using animate.css in your angular project, you probably have an initialized project already. However, for this tutorial, let's start with our project from scratch.
ng new angular-animate
cd angular-animate
Install animate.css
npm install animate.css
There are several ways to include Animate.css in our project:
- Open
angular.json
and insert a new entry into the styles array:
"styles": [
"node_modules/animate.css/animate.min.css",
"styles.css",
],
- Open
styles.scss
and insert a new entry into the file:
@import '~animate.css/animate.min';
Open your template's component and add the animated CSS class in any of the html elements:
<div style="text-align:center" class="animated flip infinite">
content
</div>
<h2>Here are some links to help you start:</h2>
<ul class="animated fadeIn infinite">
content
</ul>
<router-outlet></router-outlet>
Run your app:
ng serve