green boxes animation

by Reusablecode

HTML

<script src="http://addyosmani.com/resources/css3transitions/js/jquery.animate-enhanced.min.js"></script>
<h1>Tutorial demo for: jQuery.animate-enhanced.js</h1>
<div class="container">
<div class="subcontainer">
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
 <div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
    <div class="square"></div>

</div>
</div>
<div class="footerMsg">From <a href="http://addyosmani.com">
    AddyOsmani.com</a>
    </div>

CSS

body{
    background-color:#252525;
    margin:0 auto;
    color:#fff;
    text-align:center;
}

h1{
    color:#fff;
    font-size:2em;
    padding:20px;
}



.square {
   width:60px;
   height:60px;
   background-color:blue;
   margin:30px; 
   float:left;
   border:3px solid #fff;   
    -webkit-box-shadow:0 0 15px #ffffff; 
-moz-box-shadow: 0 0 15px #ffffff; 
box-shadow:0 0 15px #ffffff; 
    
   background: #B6DD54; /* old browsers */
background: -moz-linear-gradient(top, #B6DD54 0%, #8ab66b 44%, #398235 100%); /* firefox */

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#B6DD54), color-stop(44%,#8ab66b), color-stop(100%,#398235)); /* webkit */

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#B6DD54', endColorstr='#398235',GradientType=0 ); /* ie */
   
}

.container {
 margin:0 auto;
 width:560px;   
 height:550px;
 background-color:yellow;
 overflow:hidden;
 border-radius:5px;
 -webkit-border-radius:5px;
 -moz-border-radius:5px;
 background: #b5bdc8; /* old browsers */
 background: -moz-linear-gradient(top, #b5bdc8 0%, #828c95 36%, #28343b 100%); /* firefox */

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b5bdc8), color-stop(36%,#828c95), color-stop(100%,#28343b)); /* webkit */

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b5bdc8', endColorstr='#28343b',GradientType=0 ); /* ie */
}

.subcontainer{
    margin-top:-200px;
    width:700px;
    height:700px;
    display:block;
}

.footerMsg {
    padding:20px;
}

.footerMsg a{
     color:#fff;   
}

JavaScript

var sub = $('.subcontainer'),
    squares = $('.square');

sub.animate({
    'marginTop':'10px'},1000,
      function(){
        squares.animate({
            'width':'200px',
            'height':'200px'},500);
         sub.animate({
             'marginTop':'-530px'},3000);  
});