c# - Adding motion effect in asp.net website -

i developing website in asp.net c#.

i have plus sign going through center end of each side dividing whole page 4 parts in each part have different information displayed.

i want code draw plus sign starting center , ending on 4 sides on page load event of home page of website.

i know possible using flash want code implement without using flash using jscript or other way. have link http://daneden.github.io/animate.css/ since not able implement code given in link.

css file

    #pnlup     {         background-color:aqua;         position:absolute;         vertical-align:bottom;         display:none;         margin-left:47.85%;         bottom:300px;         overflow:hidden;     }      #pnldown     {         position:absolute;         vertical-align:bottom;         margin-top:0px;         margin-left:47.85%;         bottom:5px;      }     #down     {          background-color:aqua;         height: 20px;                  }     #down1     {          background-color:aqua;         height: 265px;         display:none;         overflow:hidden;     }     #pnlleft     {         background-color:aqua;         position:absolute;         vertical-align:bottom;         margin-top:0px;         margin-right:47%;         bottom:285px;           display:none;         right:55px;      }     #pnlright     {             background-color:aqua;                   position:absolute;         vertical-align:bottom;         margin-top:0px;         margin-left:48.25%;         bottom:285px;            display:none;            } </style> 

jscript code

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/jscript">       $(document).ready(function(){         $('#pnlup').slidedown("slow");         $('#down1').slidedown("slow");         jquery('#pnlright').slidetogglewidth();         jquery('#pnlleft').slidetogglewidth1();     });      jquery.fn.extend({         slideright: function() {         return this.each(function() {         jquery(this).animate({width: 'show'});         });         },         slideleft: function() {             return this.each(function() {             jquery(this).animate({width: 'hide'});         });         },         slideright1: function() {             return this.each(function() {             jquery(this).animate({width: 'hide'});         });         },         slideleft1: function() {             return this.each(function() {             jquery(this).animate({width: 'show'});         });         },         slidetogglewidth: function() {             return this.each(function() {             var el = jquery(this);             if (el.css('display') == 'none') {                 el.slideright();             }              else              {                 el.slideleft();             }       });       },     slidetogglewidth1: function() {             return this.each(function() {             var el = jquery(this);             if (el.css('display') == 'none') {                 el.slideleft1();             }              else              {                 el.slideright1();             }     });     }     }); 

html code

<form id="form1" runat="server">     <div>         <asp:panel id="pnlup" runat="server" style="width:15px; height:325px;">         </asp:panel>         <asp:panel id="pnlleft" runat="server" style="width:695px; height:15px;">         </asp:panel>         <asp:panel id="pnlright" runat="server" style="width:695px; height:15px;">         </asp:panel>         <asp:panel id="pnldown" runat="server" style="width:15px; height:280px;">             <div id="down" runat="server"></div>             <div id="down1" runat="server"></div>         </asp:panel>     </div> </form>