CSS3 Animation on Button Click

Question

I am trying to add a css3 animation to a button when it is clicked. (I want the button to zoom in, spin and then zoom out so that it looks like it is flying off the screen.) I can get the animation to work if I make reference to the class that calls it in the markup. However, if I try to attach the css3 class using jquery the animation does not run. I have verified that the class is being attached via Firebug, but I still am not getting any animation. This is on a .NET .aspx page using a C# code behind. The CSS and markup are below:

 <%@ Page Title="About Us" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"
CodeBehind="Contact.aspx.cs" Inherits="MirandasWebsite.About" %>

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
<title>Contact Miranda</title>
<script>
    $(document).ready(function() {
$("#MainContent_imgbtnSendEmail").click(function() {  // this is your event
    $("#MainContent_imgbtnSendEmail").addClass("rotate");     // here your adding the new class
)}; 
)};
</script>
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
<asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
</asp:ToolkitScriptManager>
<asp:UpdatePanel ID="upEmail" runat="server" UpdateMode="Conditional">
    <ContentTemplate>
        <div id="ContactPage">
            <asp:Panel ID="pnlFacebook" runat="server" Visible="true">
                <div id="Facebook">
                    <div id="dFacebook" runat="server" class="zoom">
                        <asp:HyperLink ID="hlFacebook" runat="server" Text="My Facebook">   </asp:HyperLink>
                    </div>
            </asp:Panel>
            <asp:Panel ID="pnlPhone" runat="server">
                <br />
                <div id="lblPhone">
                <p>You may reach me at this number:</p>
                <span id="Phone" runat="server">
                </span>
                </div>
            </asp:Panel>
            <asp:Panel ID="pnlSendEmail" runat="server" Visible="true">
                <br />
                <table id="ContactTable">
                    <tr>
                        <td>
                            <asp:Label ID="lblSubject" runat="server" Text="Message Subject"></asp:Label>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <asp:TextBox ID="txtSubject" runat="server" Width="20%"></asp:TextBox>
                            <asp:TextBoxWatermarkExtender ID="tbwSubject" runat="server" TargetControlID="txtSubject"
                                WatermarkText="Enter Message Subject Here">
                            </asp:TextBoxWatermarkExtender>
                            <asp:RequiredFieldValidator ID="reqSubject" runat="server" ControlToValidate="txtSubject"
                                Text="**" ErrorMessage="A Message Subject is Required." Display="Static" CssClass="Validation"></asp:RequiredFieldValidator>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <asp:Label ID="lblFrom" runat="server" Text="Your Email Address"></asp:Label>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <asp:TextBox ID="txtFrom" runat="server" Width="20%"></asp:TextBox>
                            <asp:TextBoxWatermarkExtender ID="tbwFrom" runat="server" TargetControlID="txtFrom"
                                WatermarkText="Enter Your Email Address Here">
                            </asp:TextBoxWatermarkExtender>
                            <asp:RequiredFieldValidator ID="reqFrom" runat="server" ControlToValidate="txtFrom"
                                Text="*" ErrorMessage="A Valid Email Address is Required." Display="Static" CssClass="Validation"></asp:RequiredFieldValidator>
                            <asp:RegularExpressionValidator ID="regexEmailAddress" runat="server" ControlToValidate="txtFrom"
                                ErrorMessage="A Valid Email Address is Required" ValidationExpression="^([a-zA-Z0-9_\-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([a-zA-Z0-9\-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$"
                                Display="Static" Text="*" CssClass="Validation"></asp:RegularExpressionValidator>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <asp:Label ID="lblBody" runat="server" Text="Message Body"></asp:Label>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <asp:TextBox ID="txtBody" runat="server" TextMode="MultiLine" Rows="25" Width="40%"></asp:TextBox>
                            <asp:TextBoxWatermarkExtender ID="tbwBody" runat="server" TargetControlID="txtBody"
                                WatermarkText="Message Body Goes Here">
                            </asp:TextBoxWatermarkExtender>
                            <asp:RequiredFieldValidator ID="reqBody" runat="server" ControlToValidate="txtBody"
                                ErrorMessage="A Message Body is Required." Display="Static" Text="**" CssClass="Validation"></asp:RequiredFieldValidator>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <%--<div id="SendEmail" runat="server" class="zoom"><asp:Button ID="btnSendEmail" runat="server" Text="Send" OnClick="btnSendEmail_Click" /></div>--%>
                            <div id="SendEmail" runat="server" class="zoom">
                                <asp:ImageButton ID="imgbtnSendEmail" runat="server" OnClick="btnSendEmail_Click"
                                     ImageUrl="SiteImages/Mail-icon.png" /></div>
                        </td>
                    </tr>
                    <asp:ValidationSummary runat="server" ID="validationSummary" ShowMessageBox="true"
                        ShowSummary="false" />
                </table>
            </asp:Panel>
            <asp:Panel ID="pnlEmailSuccess" runat="server" Visible="false">
                <div id="MessageSuccess">
                    <h2>
                        The Email was Sent Successfully</h2>
                    <p>
                        Thank You for Your Interest</p>
                </div>
            </asp:Panel>
        </div>
    </ContentTemplate>
</asp:UpdatePanel>
<asp:UpdateProgress ID="upprogRegister" runat="server">
    <ProgressTemplate>
        <div id="blurred">
            <img src="SiteImages/ajax-loader.gif" id="blurredimage" runat="server" />
        </div>
    </ProgressTemplate>
</asp:UpdateProgress>
<asp:AlwaysVisibleControlExtender ID="aveProgressRegister" runat="server" TargetControlID="upprogRegister"
    HorizontalSide="Center" VerticalSide="Middle" UseAnimation="true">
</asp:AlwaysVisibleControlExtender>
</asp:Content>

CSS:

 @-webkit-keyframes rotater {
0% { transform:rotate(0) scale(1) }
10% { transform:rotate(90deg) scale(1.5) }
20% { transform:rotate(180deg) scale(2) }
30% { transform:rotate(270deg) scale(2.5) }
40% { transform:rotate(360deg) scale(3) }
50% { transform:rotate(450deg) scale(2.5) }
60% { transform:rotate(540deg) scale(2) }
70% { transform:rotate(630deg) scale(1.5) }
80% { transform:rotate(720deg) scale(1) }
90% { transform:rotate(810deg) scale(.5) }
100% { transform:rotate(900deg) scale(0) }
}

@-moz-keyframes rotater {
0% { transform:rotate(0) scale(1) }
10% { transform:rotate(90deg) scale(1.5) }
20% { transform:rotate(180deg) scale(2) }
30% { transform:rotate(270deg) scale(2.5) }
40% { transform:rotate(360deg) scale(3) }
50% { transform:rotate(450deg) scale(2.5) }
60% { transform:rotate(540deg) scale(2) }
70% { transform:rotate(630deg) scale(1.5) }
80% { transform:rotate(720deg) scale(1) }
90% { transform:rotate(810deg) scale(.5) }
100% { transform:rotate(900deg) scale(0) }
}

@-o-keyframes rotater {
0% { transform:rotate(0) scale(1) }
10% { transform:rotate(90deg) scale(1.5) }
20% { transform:rotate(180deg) scale(2) }
30% { transform:rotate(270deg) scale(2.5) }
40% { transform:rotate(360deg) scale(3) }
50% { transform:rotate(450deg) scale(2.5) }
60% { transform:rotate(540deg) scale(2) }
70% { transform:rotate(630deg) scale(1.5) }
80% { transform:rotate(720deg) scale(1) }
90% { transform:rotate(810deg) scale(.5) }
100% { transform:rotate(900deg) scale(0) }
}

@-ms-keyframes rotater {
0% { transform:rotate(0) scale(1) }
10% { transform:rotate(90deg) scale(1.5) }
20% { transform:rotate(180deg) scale(2) }
30% { transform:rotate(270deg) scale(2.5) }
40% { transform:rotate(360deg) scale(3) }
50% { transform:rotate(450deg) scale(2.5) }
60% { transform:rotate(540deg) scale(2) }
70% { transform:rotate(630deg) scale(1.5) }
80% { transform:rotate(720deg) scale(1) }
90% { transform:rotate(810deg) scale(.5) }
100% { transform:rotate(900deg) scale(0) }
}

@keyframes rotater {
0% { transform:rotate(0) scale(1) }
10% { transform:rotate(90deg) scale(1.5) }
20% { transform:rotate(180deg) scale(2) }
30% { transform:rotate(270deg) scale(2.5) }
40% { transform:rotate(360deg) scale(3) }
50% { transform:rotate(450deg) scale(2.5) }
60% { transform:rotate(540deg) scale(2) }
70% { transform:rotate(630deg) scale(1.5) }
80% { transform:rotate(720deg) scale(1) }
90% { transform:rotate(810deg) scale(.5) }
100% { transform:rotate(900deg) scale(0) }
}

.rotate 
{ 
   -webkit-animation-name: rotater;
   -webkit-animation-timing-function: ease-in-out;
   -webkit-animation-iteration-count: infinite;
   -webkit-animation-duration: 1s;

  -moz-animation-name: rotater;
  -moz-animation-timing-function: ease-in-out;
  -moz-animation-iteration-count: infinite;
  -moz-animation-duration: 1s;

  -o-animation-name: rotater;
  -o-animation-timing-function: ease-in-out;
  -o-animation-iteration-count: infinite;
  -o-animation-duration: 1s;

  animation-name: rotater;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-duration: 1s;
   }  

Answer 1

So it was not exactly how I wanted to handle it, but I got it working. I added an OnClientClick event to the image button, like so:

<asp:ImageButton ID="imgbtnSendEmail" runat="server" OnClientClick="javascript:addSendAnimation()"  OnClick="btnSendEmail_Click"
                                     ImageUrl="SiteImages/Mail-icon.png" /></div>

and then create two JS functions like this:

function addClassName(inElement, inClassName) {
if (!hasClassName(inElement, inClassName))
    inElement.className = [inElement.className, inClassName].join(' ');
}

function addSendAnimation() {
var button = document.getElementById('MainContent_imgbtnSendEmail');
addClassName(button, 'rotate');
alert(button + " was clicked"); //This is used for debugging and should be removed before the site goes live
}