Animation Control , Adding Cool Animations in your application, Scenario 1

See Demo here

1) Register the AjaxControlToolkit  in your page

 <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>

 2) Add a Script Manager 

    1: <!-- Mandatory Script Manager Control-->

    2: <asp:ScriptManager ID="ScriptManager1" runat="server">

    3: </asp:ScriptManager>

 3) Add  A Server Side Control to attach the Animation to ( We will discuss how to bind Client Side Elements later ).

 <!-- Image to Animate--><asp:Image Visible="false" runat="server" ID="imgThumbNail1" 
CssClass="imgThumbNail"
 ImageUrl="thumbNails/Second_Dimension_by_celsojunior.jpg" />

 4) Declare Your Animation Control Extender Instance 

 <!-- Markup For the Animation Extender Control--> 
<cc1:AnimationExtender ID="animationExtendThumbNail1"    runat="server" TargetControlID="imgThumbNail1">   
</cc1:AnimationExtender>

 5) The TargetControlID is the ID of the Control which you want to animate , it has to be a Server-Side Control .

 6) Define Your Animation Elements, include the "Animations" Tag

 <Animations>

 7) Now , lets make our image move to a spicific point in the page , such as Left=300,Top=400 , when the Image is clicked.

    To Cause UI elements to move , we need to use the <Move> animation Tag .

    For a complete Reference of animations , go Here . 

 <OnClick>
        <Move Duration=".2"  horizontal="300" vertical="400" relative="false" Unit="px"  />
</OnClick>

 8) The "Duration" attribute specifies the timespan in which the animation has to be completed, its measured in Seconds.

 9) "Unit"  specifies the unit by which the Control  has to move .

 10) Now , lets say that you want the Image Control to move by Left =300 and Top = 400  from its current Position , then you gotta set the 

     "relative"  attribute to "true".By default its "false".

 11) End Tags

   </Animations>
</cc1:AnimationExtender>

 12) Lets look at the "imgThumbNail" CssClass

    1: .imgThumbNail

    2: {

    3:    position:absolute;

    4:    height: 110px;

    5:    width: 100px;

    6:    cursor: hand;

    7: }

 13) Any Control  that has to be animated using the MOVE animation HAS to Have the "Position" attribute set to "absolute" 

     because the Control has to be positioned absolutely to move on the screen.

 There you go !

 Click on the Image Control and see the Image move !

 .csharpcode, .csharpcode pre
{
  font-size: small;
   color: black;
   font-family: consolas, "Courier New", courier, monospace;
   background-color: #ffffff;
  /*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt 
{
   background-color: #f4f4f4;
  width: 100%;
    margin: 0em;
}
.csharpcode .lnum { color: #606060; }