Create Animation in CSS Easily with Animate.css

By . in Web Design. Updated on .

CSS has improved with many features which make web development much more interesting and challenging. One of these features is CSS3 animation effects. Before CSS3, to create an animation you can only work with Javascript. But now you can create it easily with CSS3.

We have walked you through with a good tutorial of creating Bounce Effect with CSS3 previously, and in this post I will introduce to you an awesome library that will make animation creation with CSS3 even easier: Animate.css.

Animate.css is a ready-to-use library collection of CSS3 animation effects. This library supplies you with over 50 different animation effects which work consistently on most all browsers with CSS3 support.

You can then apply the animation on your text, picture, form and so on. There are also many great sites using this librar; Tridiv – the best CSS 3D editor on the web – is one of them.

10 CSS3 Animation Tools You Should Bookmark

10 CSS3 Animation Tools You Should Bookmark

As people tend to more easily perceive things that move, smartly used animations can enhance the user experience... Read more

Getting Started

With Animate.css, all you have to do is to include the appropriate classes with your elements. To get started, firstly include the animate.css file into the head. You can download the complete library from the Github repository page.

By default, Animate.css will animate only once upon the first page load. It will then stay static. To be able to control the animation, we’re going to need a little Javascript. In this matter, we’ll include a jQuery into the project, like so.

<head>
...
    <link rel="stylesheet" type="text/css" media="all" href="css/animate.css">
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
...
</head>

HTML Markup

To apply the animation you have to add .animated class to the element you want to animate, along with the animation name like so.

<div class="option animated wobble">This text will animate.</div>

That’s it! The animation will only be implemented on the page load, so you may also need to use Javascript to apply the animation upon a event trigger. The .option can also be customized to fit your needs.

Additional CSS Options

The animation we have defined previously will loop only once and upon a predefined duration and delay time as well. If you need more loops or a different duration or delay time, here’s how to customize this.

To let the animation loop multiple times or even infinitely, you can use animation-iteration-count attribute. Make sure to also include applicable vendor prefixes like webkit, moz, etc. To make it infinite, then add infinite as the value.

If you need it to loop only several times, just input the value with the number of loops you want.

-vendor-animation-iteration-count: infinite | <number>;

To customize the duration, the appropriate attribute to use is animation-duration; and it’s animation-delay for delay control. The following is a sample option code.

.option {
    -webkit-animation-duration: 3s;
    -webkit-animation-delay: 2s;
    -webkit-animation-iteration-count: 5;
}

Javascript Control

For more control on the animation state, we need a little help from Javascript. Let’s say we want a text link to trigger an animation upon a click. Firstly, we need to add a reference into the link, like so.

<div class="demo animated">
    <p>This text will animate. <a href="" id="ref">Click to animate!</a></p>
</div>

To use the click function, include the link reference into it.

With Javascript, you can define the animation name. We’ll use an approach by creating an animate function, and naming the animation along with the element class (in the above code, we have added the demo attribute).

And the Javascript code will like the following.

<script language="javascript">
    $(function() {
        $("#ref").click(function() {
            animate(".demo", 'bounce');
            return false;
        });
    });
    
    function animate(element_ID, animation) {
        $(element_ID).addClass(animation);
        var wait = window.setTimeout( function(){
            $(element_ID).removeClass(animation)}, 1300
        );
    }
</script>

Animation effect, indeed, is one of the best ways to make your site more attractive but remember to not overdo it.

WebsiteFacebookTwitterInstagramPinterestLinkedInGoogle+YoutubeRedditDribbbleBehanceGithubCodePenWhatsappEmail