Need it, Want it, Got to Have it : Animate.css

It’s 2014, and if you are a front end web developer not using animations in some shape or form to create dynamic interfaces and improve the user experience, then I would encourage you to explore CSS3 animations. Thanks to the creator of Animate.css, Dan Eden, using CSS3 animations in development is very efficient.

Animate.css is a library jam packed with useful animations that allow you to utilize CSS3 to its full potential.

Here’s how to get it up and running in 3 steps:

Step 1. Download Animate.css

Step 2. Attach CSS along with jQuery and other optional components

<link href=”css/animate.css” rel=”stylesheet” media=”all” type=”text/css” />

<script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js”></script>

<!– HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries –>
<!–[if lt IE 9]>
<script src=”https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js”></script>
<script src=”https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js”></script>
<![endif]–>

Step 3. Animate! Using any of the 62 different types of animation provide, you can attach the class to the element you wish to animate.  The Animate.css GitHub page lets you sample all the different classes directly from the page itself.

For example, to add the lightSpeedin effect, simply add the following classes to any element

<div class=”animated lightSpeedin”></div>

Now this is a great & simple way to add cool elements to your project, but what about converting it into functionality that will actually improve the user experience?  The answer is to combine it with some javascript.

One of my favorites is to trigger elements based on the user’s scroll location on the page.  This can be useful when creating a navigation bar that consolidates itself, or to cue up elements to reduce interface clutter.

For example, the following piece of javascript code animates an element to slide in from the left when the user scrolls down to a certain spot on the page:

$(window).scroll(function (event) {
var y = $(this).scrollTop();

if (y >= 100) {
$(‘.some-class’).addClass(‘animated slideInLeft’);
}
else
{
$(‘.some-class’).removeClass(‘animated slideInLeft’);
}
});

Another useful way to combine animations with javascript is through events like focus and hover, as demonstrated in this code snippet:

$( “.some-class” ).hover(
function() {
$( this ).addClass( “animated slideInLeft” );
}, function() {
$( this ).removeClass( “animated slideInLeft” );
}
);

Lastly, I would recommend experimenting with applying delays to animations inorder to create a more dynamic experience.  These can be adjusted using the following style rules with in your CSS

-webkit-animation-duration: 1s;
  animation-duration: 1s;

Related articles