#animations boxes

New Post has been published on http://www.htmluse.com/animated-css-boxes/

Animated CSS Boxes

Download   Demo

Animated css boxes are extremely user friendly and can be used for multiple purposes, for example notifications, beauty and general use. Free icons from Font Awesome has been used along with jQuery. There are six different animations used with great care in order to maintain awesome interface.

1. INCLUDE CSS AND JS FILES

<link href="css/font-awesome.min.css" rel="stylesheet" media="all" /> <link href="css/boxes.css" rel="stylesheet" media="all" /> <script src="js/jquery-1.11.0.min.js"></script>

In order to work properly, a file boxes.css must be included. Now user has choice to add one of the following classes on hover, click or any other event. These are bounce, rubberBand, swing, rotateInDownLeft, zoomIn and fadeInLeft.

2. HTML

<div id="one"> <div id="icon"><center><i class="fa fa-openid fa-2x"></i</center></div> <div id="written"<center>Demo text</center></div> </div>

3. JAVASCRIPT

$(function() $("#one").addClass('animated bounce'); );