Thu, 2015-06-11 15:32
Greetings fellow readers!

Often times I see sites that are a little plain and need a bit of a extra love. What I mean by this is that in the modern world of web design it has become easier to do things we once thought harder for the average joe that's learning his way around CSS and the likes.

With the exploration of CSS3 and the power it grants it's developers has come a nice premade sheet of animated events that you can activate on your div's or other elements on your site. For instance by adding a class of "animated" (required for all animations as this is the father code in which communicates to the rest.) and say, slideInLeft to a div on my website an animation of the div will appear to slide in from the left on page load whether from a refresh or a new visit all together.

Let's start off by setting up the animate.css file to work on our website. Since this is a plain CSS file, all we need to do is add the "animated" class and the name of the "effect" (i.e. slideInLeft) to the div we want effected and then include the .css file in the header of our project, like so:

How to add an effect to your div/element:
<.div class="animated slideInLeft">Example Text

How to include in your file:
<.head> <.link rel="stylesheet" href="file/location/animate.min.css"> <./head>

Once this is done you can refer to an insanely long list of effects that are available for your choosing. Once you've found one simply add the name of the class to the div you wanted effected and woila! CSS3 animation effects.

There are a plethura of ideas one can get from these simple effects as the creativity is left up to you to the direction in which these effects are used, for example, in combination with jQuery one can add hover effects to items instead of on pure page loads or even extra classes to trigger extra events.

Written by
Anthony Marrero
Front-End Expert

A Florida native, Anthony is always living in the bleeding edge of modern design patterns and practices. He has built countless responsive and mobile websites using the latest technologies, and is our go to person for ensuring the finished product is pixel perfect on all devices. Outside of code he is an accomplished lyricist and musician.