Animated CSS Boxes

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.

• denizli escort
• denizli escort
• didim escort
• düzce escort
• edirne escort
• edirne escort
• edremit escort

Source: topgravity.com

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');
});

Changing the class "bounce" to any of other mentioned class will change animation style.