Introducing Animate.css | A styling library to easily add animation effects on web pages or projects

Tan Papercraft Art  DIY YouTube Thumbnail (15).png

Hi, Am delighted to share with you another web development tool or resource which is Animate.css, It is a library designed or developed to make adding of animation effects of all kinds to web applications or projects.

As we all know that adding animation effects to web applications or websites makes it look more interacting, unique, and attractive to the users.

Animate.css comes to help with that easily and brings more interactions to the websites or web applications.

It works on all web development front end frameworks such as VueJs, ReactJs, AngularJs, and other websites or web applciations made with basic HTML, CSS and Javascript.

I have used this in many of my web applications projects using VueJS web application front end frameworks because I so much enjoy working with VueJS using NuxtJS even though I can also code in ReactJS and basic HTML, CSS, and Javascript. It is very easy to set up and integrates into web applications.

I would be explaining how to set up Animate.css into a web application or project.

INSTALLATION

To install animate.css on web applications or projects developed with web application frontend frameworks like VueJS, ReactJS, AngularJS, and others. Either npm or yarn package installer can be used as demonstrated below:

Using npm

$ npm install animate.css --save

Using yarn

$ yarn add animate.css

Also it can be added directly into web applications developed with basic HTML, CSS and Javascript or webpages using the CDN link inside the head tag of the webpage as demonstrated below:

<head>
  <link
    rel="stylesheet"
    href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
  />
</head>

USAGE

After successful installation of animate.css using any of the above options based on requirements, it can be used on any area, elements or sections on the webpage following the demonstration below:

To use animation on any element it has to be given an initial class name of animate__animated then it can now be followed by the class name such as animate__bounce that represents the specific animation effect intended to be used. An instance is given or demonstrated below.

<h1 class="animate__animated animate__bounce">An animated element</h1>

By doing the above the effect works instantly.

Also other parameters can be passed as class name such as delay and repeat as demonstrated below:

<div class="animate__animated animate__bounce animate__delay-2s">Example</div>

<div class="animate__animated animate__bounce animate__repeat-2">Example</div>

The number of seconds for delay and number of times for repeating the animation can be increased or decreased based on requirements easily by changing the numbers in the animate__delay_2s and animate__repeat-2 classes.

For more information regarding animate.css you can visit the official documentation through this link.

Thanks for reading 🤝, don't forget to like, comment, and share.



0
0
0.000

0 comments