<ajaxToolkit:AnimationExtender id="OpenAnimation" runat="server" TargetControlID="LoginBtn">
<Animations>
<OnClick>
<Sequence>
<%-- Disable the button --%>
<EnableAction Enabled="false" />
<%-- Show the flyout --%>
<Parallel AnimationTarget="flyout" Duration=".3" Fps="25">
<Move Horizontal="150" Vertical="-50" />
<Resize Height="260" Width="280" />
<Color AnimationTarget="flyout" PropertyKey="backgroundColor"
StartValue="#AAAAAA" EndValue="#FFFFFF" />
</Parallel>
<%-- Fade in the text --%>
<FadeIn AnimationTarget="info" Duration=".2"/>
<%-- Cycle the text and border color to red and back --%>
<Parallel AnimationTarget="info" Duration=".5">
<Color PropertyKey="color"
StartValue="#666666" EndValue="#FF0000" />
<Color PropertyKey="borderColor"
StartValue="#666666" EndValue="#FF0000" />
</Parallel>
<Parallel AnimationTarget="info" Duration=".5">
<Color PropertyKey="color"
StartValue="#FF0000" EndValue="#666666" />
<Color PropertyKey="borderColor"
StartValue="#FF0000" EndValue="#666666" />
<FadeIn AnimationTarget="LoginbtnCloseParent" MaximumOpacity=".9" />
</Parallel>
</Sequence>
</OnClick>
</Animations>
</ajaxToolkit:AnimationExtender>
<ajaxToolkit:AnimationExtender id="CloseAnimation" runat="server" TargetControlID="LoginbtnClose">
<Animations>
<OnClick>
<Sequence AnimationTarget="info">
<%-- Scale the flyout down to 5% to make it disappear --%>
<Parallel Duration=".3" Fps="15">
<Scale ScaleFactor="0.05" Center="true"
ScaleFont="true" FontUnit="px" />
<FadeOut />
</Parallel>
<%-- Reset the styles on the info box --%>
<StyleAction Attribute="display" Value="none"/>
<StyleAction Attribute="width" Value="250px"/>
<StyleAction Attribute="height" Value=""/>
<StyleAction Attribute="fontSize" Value="12px"/>
<%-- Re-enable the button --%>
<EnableAction Enabled="true"
AnimationTarget="LoginBtn" />
</Sequence>
</OnClick>
</Animations>
</ajaxToolkit:AnimationExtender>