Tiny Hub - Design your website with Animate.css

Design your website with Animate.css

Let me ask you a simple Question!! What is actually an "Animation??".

According to wikipedia "Animation is a dynamic medium in which images or objects are manipulated to appear as moving images." In simple words, many images are put together one after another, and then played at a fast speed to give the moving illusion. But come on!! we are coders!!!

Well now a days challanges are tough. Every upcoming websites are filled with crazy animations. Hover effects, drop-down, navigation and much much more. It's a never ending list. I am not going to dive deeper in to this concept. So today in this post i'll talk about what is "Animate.css" and how to use it in your website. Let's get started.

Animate.css is a cross-browser supported css library. The library has over 50 different animation effects. It's very easy to use and one of the major advantage is that you don't have to write long lines of codes. Simply download the Animate.css library and link it to your web pages.

1. Download Animate.css

Go to daneden.github.io/animate.css and download animate.css. Create a new folder and paste it there. (It's a good practice to create folder for each project.)

Animate.css main page

On the Animate.css page you'll find a lot of animation effects. Try using some of them. But remember one thing, animate.css only work on page load. But if you want to make your webpages more dynamic, you have to add JavaScript as well. You don't have to master JavaScript for that, just the basics will work.

2. Write your HTML code

Let's write our simple html code.

          
    <!DOCTYPE html>
    <html>
    <head>
                          
    </head>
       <body>
        <div>

          <h1>Amimating Text</h1>

        </div>
      </body>
    </html>

That's a simple code I've written.

3. Add some CSS

Let's style the text with some css. But first add a class to the div tag.

          
    <div class="demo">
      <h1>Amimating Text</h1>
    </div>

I've named it demo. Now for this tutorial I'm going to add a little css in between the head tags. This is just to put the text in the center of the screen.

            
                
    <head>

        <style>
      .demo {
        text-align: center;
        color: #cddc38;
        margin: 300px auto 0 auto;

            }

      body {
        background-color: #212121;
           }
      } 
        </style>

    </head>

After finishing, you'll se something like this.

Animated text

Now it's time to add a little life to the text. So we are going to add the animation effects.

3. Add animate.css

Link the downloaded animate.css file to the head of the html file.

    
    <head>

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

    </head>

Now to add the animation effect, we have to add the .animated class to the element you want to animate. In my case the element is the h1 tag. Along with the class you have to declare the animation name. There are more than 50 animation effects. You'll find all the names in the Animate.css home page. Here. The complete code will look like this.

                 

    <!DOCTYPE html>
    <html>
    <head>
    <title></title>
    
    <link rel="stylesheet" type="text/css" href="animate.css">
    <style type="text/css">
    .demo {
      text-align: center;
      color: #cddc38;
      margin: 300px auto 0 auto;

    }

    body {
      background-color: #212121;
    }
    </style>
    </head>
    <body>
   <div class="demo">
      <h1 class="animated bounce">Animating Text</h1>
   </div>
   </body>
   </html>

As you can see the name of the animation is "bounce". It will bounce the text on page load. Save the code and run it in the browser. That's it!! We are done.

Now go and add other animation effects aswell. Play with your code. You can even create a JS button, and set the function to something like, when it is clicked, the element will animate like this.

So thanks for visiting my blog. Keep Coding!!

Home