loading...
Angular

Angular + Animate.css in Five Easy Steps

carlillo profile image Carlos Caballero Updated on ・2 min read

Angular + Animate.css in Five Easy Steps

A step-by-step angular tutorial

Animate.css is a cross-browser library
of CSS animations that is incredibly easy to use.

In this piece, I am going to show you how to configure Animate.css to be used in
Angular in only five steps.


Step 1: Init Your Project

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 our project from scratch.


Step 2. Install Animate.css

Install animate.css.


Step 3. Include 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:

  • Open styles.css and insert a new entry into the file:


Step 4. Add the Animated CSS Class

Open your template’s component and add the animated CSS class into any of the
HTML elements:


Step 5. Run Your App!

Run your app:


More, More, and More…

The GitHub branch of this post is
https://github.com/Caballerog/angular-animate.css


Originally published at https://carloscaballero.io

Posted on by:

carlillo profile

Carlos Caballero

@carlillo

I'm PhD. in Computer Science from Málaga, Spain. Currently, I am teaching developers and degree/master computer science how to be experts in web technologies and computer science.

Angular

This is where we write about all things Angular. It's meant to be a place for Angular community and people interested in Angular and the Angular ecosystem.

Discussion

pic
Editor guide
 
 

Hi Rudolf,

This technique doesn't interact with Angular's animation library.

This is a easy way to include Animate.css which is a popular library in CSS to build animation.

Thanks!

 

Pretty convenient with the import statement. I'm curious, though, is there any way to query for animations you'll only be using rather than importing the entire lib?