The AnimationExtender control plays animations whenever a specific event like OnLoad, OnClick, OnMouseOver, or OnMouseOut is raised by the target control.
· TargetControlID - ID of the target control whose events are used to animate.
· OnLoad - Generic animation played as soon as the page is loaded
· OnClick - Generic animation played when the target control is clicked
· OnMouseOver - Generic animation played when the mouse moves over the target control
· OnMouseOut - Generic animation played when the mouse moves out of the target control
· OnHoverOver - Generic animation similar to OnMouseOver except it will stop the OnHoverOut animation before it plays
· OnHoverOut - Generic animation similar to OnMouseOut except it will stop the OnHoverOver animation before it plays
<%-- ScriptManager control manages client script for AJAX enabled ASP.NET pages.This enables partial-page rendering and Web-service calls.You have to used this if you want to use ajax control--%>
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<%-- Add the animation extender and use the animation tag-%>
<cc1:AnimationExtender ID="AnimationExtender1" runat="server" TargetControlID="Button1">
<Color AnimationTarget="Button1" Duration="50" StartValue="#FF0000" EndValue="#666666" PropertyKey="backgroundColor" />
<EnableAction Enabled="true" />
<asp:Panel ID="Panel1" runat="server">
<asp:Button ID="Button1" runat="server" Text="Current Time" OnClick="Button1_Click" />
<asp:Label ID="Label1" runat="server" Text=""></asp:Label>
Run the project
When you click Current time button then its color will be change.
After few second current times is display and button color change into previous color.