Animate.css

Quick guide for stunning website animations with little effort and time

Posted by aquasar on August 24, 2018

Getting Started

There are several ways to use animate.css in your projects.

Option 1: Download straight from the website.

Go to their website and hit the download Animate.css link. Create a new file called animate.css and paste this file into it.

Next open up your index.html file and in the head section, link the two files together.

   
            <head>
            <link rel="stylesheet" href="animate.css">
            </head>
             

Option 2: CDN

Use the CDN option and simply paste the following line of code into your head tag

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

Option 3: NPM

Another option for those familiar with using Node Package Manager

   
              npm install animate.css --save
             


Your first animation

To test that everything is working write the following line of code in your html file:


      <h1 class="animated tada">Animate me once</h1>
      <h1 class="animated bounce infinite">Animate always</h1>
            

You should see first animation effect once. The second animation keeps on bouncing due to the infinite class that is added to it. It is really that simple. But what else can we do?

Animating hover effects

Lets say we have a new h4 header we want to animate, but only when the user hovers over it. We can create this in two steps:

Step 1: Create the h4 in html

We can create a new h4 element with the following class in html


      <h4 class="myCoolStyle">Animate me once</h4>
            

Step 2: Add a custom css style

To do this create a new file style.css and link it to the current html file as we did earlier above with animate.css.

   
          <head>
          <link rel="stylesheet" href="style.css">
          </head>
             

The css to add in this style.css file is:


               .myCoolStyle:hover{
                  animation: tada 1s infinite;
               }
            

By using the css pseudo class hover together with the animate.css library, we are able to create some cool hover effects.

I should probably note, the animation has three parameters: animation name, animation duration and the number of times we want the animation to loop. If we change infinite to say 3, the animation will only loop three times. If you want a longer loop time then changing 1s to say 3s will do just that.

Animation on clicks

With the above examples, you only needed html and css to create the animation effects. But lets say you only wanna do animations on clicks? We will need to invoke some javascript for this.

Step 1: Add Html

Create a the element you want to animate in html, in this example we animate an h4 header tag


          <h4 id="myDiv">Animation on clicks</h4>
            

Step 2: Add the javascript

Create a new javascript file myAnimation.js and add script tag to the html file right before the closing body tag:

   
                <script src = "js/myAnimation.js"></script>
                </body>
             

Next add in the following line of javascript code:


          const animationDiv = document.querySelector('#myDiv');

          animationDiv.addEventListener('click',(e)=>{
              e.preventDefault();
              // add the animation effect
              animationDiv.classList.add('anotherCoolStyle');
              // remove animation effect after 3 seconds.
              setTimeout(function(){
                  animationDiv.classList.remove('anotherCoolStyle');
              },2000);
          });    
            

The javascript code can be broken down into several steps:

  • Create a click event listener on the animationDiv
  • When the h4 element is clicked, we add the class anotherCoolStyle
  • We use a setTimeout function to remove this class 2 seconds after it is clicked

Step 3: Add the css

The final and easy step is to add the css class anotherCoolStyle. We can add that into the style.css file as shown below:


              .anotherCoolStyle{
                animation: tada 1s 1;
              } 
            


Now it is your turn!

The animate.css library has a ton of cool styles to play around with. Hope you enjoyed this article. If so please drop me a line admin@dash-intel.com or subscribe above.

Photo credit Oleg Laptev on Unsplash.